141 lines
4.5 KiB
HTML
141 lines
4.5 KiB
HTML
|
{#- This file is part of sner4 project governed by MIT license, see the LICENSE.txt file. -#}
|
|||
|
{% extends 'frontend/base.html.j2' %}
|
|||
|
|
|||
|
{% block script %}
|
|||
|
<script>
|
|||
|
/**
|
|||
|
* decode base64 data to ArrayBuffer
|
|||
|
*
|
|||
|
* @param {string} data data to decode
|
|||
|
* @return {ArrayBuffer} decoded data
|
|||
|
*/
|
|||
|
function base64_to_array_buffer(data) {
|
|||
|
return Uint8Array.from(atob(data), c => c.charCodeAt(0)).buffer;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* request publicKeyCredentialCreationOptions for webauthn from server
|
|||
|
*
|
|||
|
* @return {Promise<Object>} A promise that resolves with publicKeyCredentialCreationOptions for navigator.credentials.create()
|
|||
|
*/
|
|||
|
function get_pkcco() {
|
|||
|
return fetch("{{ url_for('frontend.webauthn_pkcco_route')}}", {method:'post', headers: {'Content-Type': 'application/json'}})
|
|||
|
.then(function(resp) {
|
|||
|
return resp.text();
|
|||
|
})
|
|||
|
.then(function(data){
|
|||
|
var pkcco = CBOR.decode(base64_to_array_buffer(data));
|
|||
|
console.debug('credentials.create options:', pkcco);
|
|||
|
|
|||
|
var publicKey = {
|
|||
|
// The challenge is produced by the server; see the Security Considerations
|
|||
|
challenge: new Uint8Array([21,31,105 /* 29 more random bytes generated by the server */]),
|
|||
|
|
|||
|
// Relying Party:
|
|||
|
rp: {
|
|||
|
name: "Lenticular Cloud - domain TODO"
|
|||
|
},
|
|||
|
|
|||
|
// User:
|
|||
|
user: {
|
|||
|
id: Uint8Array.from(window.atob("MIIBkzCCATigAwIBAjCCAZMwggE4oAMCAQIwggGTMII="), c=>c.charCodeAt(0)),
|
|||
|
name: "{user.domain}",
|
|||
|
displayName: "{user.name}",
|
|||
|
},
|
|||
|
|
|||
|
// This Relying Party will accept either an ES256 or RS256 credential, but
|
|||
|
// prefers an ES256 credential.
|
|||
|
pubKeyCredParams: [
|
|||
|
{
|
|||
|
type: "public-key",
|
|||
|
alg: -7 // "ES256" as registered in the IANA COSE Algorithms registry
|
|||
|
},
|
|||
|
{
|
|||
|
type: "public-key",
|
|||
|
alg: -257 // Value registered by this specification for "RS256"
|
|||
|
}
|
|||
|
],
|
|||
|
|
|||
|
authenticatorSelection: {
|
|||
|
// Try to use UV if possible. This is also the default.
|
|||
|
userVerification: "preferred"
|
|||
|
},
|
|||
|
|
|||
|
timeout: 360000, // 6 minutes
|
|||
|
excludeCredentials: [
|
|||
|
// Don’t re-register any authenticator that has one of these credentials
|
|||
|
//{"id": Uint8Array.from(window.atob("E/e1dhZc++mIsz4f9hb6NifAzJpF1V4mEtRlIPBiWdY="), c=>c.charCodeAt(0)), "type": "public-key"}
|
|||
|
],
|
|||
|
|
|||
|
// Make excludeCredentials check backwards compatible with credentials registered with U2F
|
|||
|
extensions: {"appidExclude": "https://acme.example.com"}
|
|||
|
};
|
|||
|
|
|||
|
|
|||
|
return { "publicKey": publicKey };
|
|||
|
})
|
|||
|
.catch(function(error) { console.log('cant get pkcco ',error)});
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* pack attestation
|
|||
|
*
|
|||
|
* @param {object} attestation attestation response for the credential to register
|
|||
|
*/
|
|||
|
function pack_attestation(attestation) {
|
|||
|
console.debug('new credential attestation:', attestation);
|
|||
|
|
|||
|
var attestation_data = {
|
|||
|
'clientDataJSON': new Uint8Array(attestation.response.clientDataJSON),
|
|||
|
'attestationObject': new Uint8Array(attestation.response.attestationObject)
|
|||
|
};
|
|||
|
//var form = $('#webauthn_register_form')[0];
|
|||
|
var form = document.querySelector('form')
|
|||
|
var base64 = btoa(new Uint8Array(CBOR.encode(attestation_data)).reduce((data, byte) => data + String.fromCharCode(byte), ''));
|
|||
|
form.attestation.value = base64;
|
|||
|
form.submit.disabled = false;
|
|||
|
//form.querySelecotr('p[name="attestation_data_status"]').innerHTML = '<span style="color: green;">Prepared</span>';
|
|||
|
}
|
|||
|
|
|||
|
console.log(window.PublicKeyCredential ? 'WebAuthn supported' : 'WebAuthn NOT supported');
|
|||
|
|
|||
|
|
|||
|
get_pkcco()
|
|||
|
.then(pkcco => navigator.credentials.create(pkcco))
|
|||
|
.then(attestation_response => pack_attestation(attestation_response))
|
|||
|
.catch(function(error) {
|
|||
|
//toastr.error('Registration data preparation failed.');
|
|||
|
console.log(error.message);
|
|||
|
});
|
|||
|
</script>
|
|||
|
{% endblock %}
|
|||
|
|
|||
|
{% block content %}
|
|||
|
<div class="profile">
|
|||
|
<h1>Register new Webauthn credential</h1>
|
|||
|
|
|||
|
<div>
|
|||
|
To register new credential:
|
|||
|
<ol>
|
|||
|
<li>Insert/connect authenticator and verify user presence.</li>
|
|||
|
<li>Optionaly set comment for the new credential.</li>
|
|||
|
<li>Submit the registration.</li>
|
|||
|
</ol>
|
|||
|
</div>
|
|||
|
|
|||
|
{{ render_form(form) }}
|
|||
|
{#
|
|||
|
<form id="webauthn_register_form" class="form-horizontal" method="post">
|
|||
|
{{ form.csrf_token }}
|
|||
|
<div class="form-group">
|
|||
|
<label class="col-sm-2 control-label">Registration data</label>
|
|||
|
<div class="col-sm-10"><p class="form-control-static" name="attestation_data_status"><span style="color: orange;">To be prepared</span></p></div>
|
|||
|
</div>
|
|||
|
{{ b_wtf.bootstrap_field(form.attestation, horizontal=True) }}
|
|||
|
{{ b_wtf.bootstrap_field(form.name, horizontal=True) }}
|
|||
|
{{ b_wtf.bootstrap_field(form.submit, horizontal=True) }}
|
|||
|
</form>
|
|||
|
#}
|
|||
|
</div>
|
|||
|
{% endblock %}
|