BasicOIDC/templates/login/webauthn_input.html

90 lines
2.8 KiB
HTML
Raw Normal View History

2022-04-23 16:56:14 +00:00
{% extends "base_login_page.html" %}
{% block content %}
2022-04-23 17:20:59 +00:00
<p style="color:red" id="err_target"></p>
2022-04-23 16:56:14 +00:00
<div>
<p>Please insert now your security key <i>{{ factor.name }}</i>, and accept authentication request.</p>
</div>
2022-04-23 17:20:59 +00:00
<div style="margin: 10px 0px;">
<input type="button" value="Try again" class="btn btn-primary" onclick="launch_procedure()"/>
</div>
2022-04-23 16:56:14 +00:00
<div style="margin-top: 10px;">
<a href="/2fa_auth?force_display=true&redirect={{ _p.redirect_uri.get_encoded() }}">Sign in using another factor</a><br/>
<a href="/logout">Sign out</a>
</div>
2022-04-23 17:20:59 +00:00
<script src="/assets/js/base64_lib.js"></script>
2022-04-23 16:56:14 +00:00
<script>
2022-04-23 17:20:59 +00:00
const REDIRECT_URI = decodeURIComponent("{{ _p.redirect_uri.get_encoded() }}");
2022-04-23 16:56:14 +00:00
const OPAQUE_STATE = "{{ opaque_state }}";
const AUTH_CHALLENGE = JSON.parse(decodeURIComponent("{{ challenge_json }}"));
2022-04-23 17:20:59 +00:00
// Decode data
AUTH_CHALLENGE.publicKey.challenge = base64NoPaddingToUint8Array(
AUTH_CHALLENGE.publicKey.challenge
);
for (let cred of AUTH_CHALLENGE.publicKey.allowCredentials) {
cred.id = base64NoPaddingToUint8Array(cred.id);
}
function set_error(err) {
const err_target = document.getElementById("err_target");
err_target.innerHTML = err;
}
async function launch_procedure() {
try {
set_error("");
const result = await navigator.credentials.get(AUTH_CHALLENGE);
const creds = {
id: result.id,
rawId: ArrayBufferToBase64(result.rawId),
type: result.type,
response: {
authenticatorData: ArrayBufferToBase64(
result.response.authenticatorData
),
clientDataJSON: ArrayBufferToBase64(
result.response.clientDataJSON
),
signature: ArrayBufferToBase64(result.response.signature),
userHandle: result.response.userHandle,
},
};
const res = await fetch("/login/api/auth_webauthn", {
method: "post",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
opaque_state: OPAQUE_STATE,
credential: creds,
})
});
let text = await res.text();
set_error(text);
if (res.status == 200)
location.href = REDIRECT_URI;
else if(text === "")
set_error("Failed to authenticate you!");
} catch(e) {
console.error(e);
set_error(e);
}
}
window.addEventListener("load", () => launch_procedure())
2022-04-23 16:56:14 +00:00
</script>
{% endblock content %}