- From: Arian van Putten via GitHub <sysbot+gh@w3.org>
- Date: Thu, 21 Dec 2023 18:41:50 +0000
- To: public-webauthn@w3.org
I've started experimenting with a Form-Associated Custom Element (FACE) that allows you to use Webauthn with "just" HTML.
FACE is cool as you can define how the element contributes to form submission. This makes the element I define function very similar to the old `<keygen>`. It just send the clientDataJSON and signature as a `multipart` file.
Of course you need the javascript to define the element. But can serve as a playground to find the right html interface
[Example of conditional UI](https://github.com/arianvp/public-key-credential-element/blob/main/index.html)
```html
<script type="module" src="./index.js"></script>
<form method="get" action="login.html">
<label for="username">User name</label>
<input type="text" name="username" id="username" autocomplete="username webauthn">
<input type="submit" value="Log in">
</form>
<form method="post" action="login.html" enctype="multipart/form-data">
<public-key-credential challenge="AAAA" name="credential" conditional />
</form>
```
[Example of modal UI](https://github.com/arianvp/public-key-credential-element/blob/main/login.html):
```html
<script type="module" src="./index.js"></script>
<form method="get" enctype="multipart/form-data">
<public-key-credential
name="credential"
allow-credentials="h1OZg6bnPuktiGIlE39YwY9VRTw"
challenge="AAAA" />
<input type="submit" value="Login with Passkey">
</form>
```
https://github.com/arianvp/public-key-credential-element/blob/main/index.ts
--
GitHub Notification of comment by arianvp
Please view or discuss this issue at https://github.com/w3c/webauthn/issues/1255#issuecomment-1866777111 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 21 December 2023 18:41:53 UTC