97fb3baf47
WebAuthn is another popular 2FA method. Security keys, such as Yubikey and Apple passkeys, are built on WebAuthn. We use the `webauthn` plugin from rodauth for this purpose, which also includes the necessary JavaScript code. The `webauthn_setup_*` configurations are related to WebAuthn key setup, while the `webauthn_remove_*` configurations are associated with removing webauthn key. The `webauth_auth_*` configurations are used for user authentication via WebAuthn keys. I replace 'WebAuthn' texts with 'Security Keys' in the UI, as I believe it's more user-friendly. Also, I add the `name` property to webauthn keys. It makes the management easier for users.
36 lines
1.5 KiB
Plaintext
36 lines
1.5 KiB
Plaintext
<% @page_title = "2FA - Security Keys" %>
|
|
|
|
<% @page_message = "Verify your sign in" %>
|
|
|
|
<form
|
|
class="rodauth space-y-6"
|
|
role="form"
|
|
method="POST"
|
|
action="<%= rodauth.webauthn_auth_form_path %>"
|
|
id="webauthn-auth-form"
|
|
data-credential-options="<%= (cred = rodauth.webauthn_credential_options_for_get).as_json.to_json %>"
|
|
>
|
|
<%== rodauth.webauthn_auth_additional_form_tags %>
|
|
<%== rodauth.csrf_tag(rodauth.webauthn_auth_form_path) %>
|
|
<%== render("components/form/hidden", locals: { name: rodauth.webauthn_auth_challenge_param, value: cred.challenge }) %>
|
|
<%== render(
|
|
"components/form/hidden",
|
|
locals: {
|
|
name: rodauth.webauthn_auth_challenge_hmac_param,
|
|
value: rodauth.compute_hmac(cred.challenge)
|
|
}
|
|
) %>
|
|
<input id="webauthn-auth" class="hidden" type="text" name="<%= rodauth.webauthn_auth_param %>" value="" hidden/>
|
|
<div id="webauthn-auth-button" class="flex flex-col text-center">
|
|
<%== render("components/form/submit_button", locals: { text: rodauth.webauthn_auth_button }) %>
|
|
</div>
|
|
<p class="mt-10 text-center text-sm text-gray-400">
|
|
Can't access your authentication app?
|
|
<br>
|
|
<a href="/<%= rodauth.recovery_auth_route %>" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">Enter a recovery code</a>
|
|
or
|
|
<a href="mailto:support@ubicloud.com" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">contact support</a>
|
|
</p>
|
|
</form>
|
|
<script src="<%= "#{rodauth.webauthn_js_host}#{rodauth.webauthn_auth_js_path}" %>"></script>
|