add basic passkey management
This commit is contained in:
parent
5759cb1e4f
commit
f858a1a78c
10 changed files with 258 additions and 273 deletions
|
|
@ -17,7 +17,8 @@
|
|||
<div class="sidebar-sticky active">
|
||||
{#<a href="/"><img alt="logo" class="container-fluid" src="/static/images/dog_main_small.png"></a>#}
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.index') }}">{{ gettext('Account') }}</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.client_cert') }}">{{ gettext('Client Cert') }}</a></li>
|
||||
{#<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.client_cert') }}">{{ gettext('Client Cert') }}</a></li>#}
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.passkey') }}">{{ gettext('Passkey') }}</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.app_token') }}">{{ gettext('App Tokens') }}</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.totp') }}">{{ gettext('2FA - TOTP') }}</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url_for('frontend.oauth2_tokens') }}">{{ gettext('Oauth2 Tokens') }}</a></li>
|
||||
|
|
|
|||
30
lenticular_cloud/template/frontend/passkey_list.html.j2
Normal file
30
lenticular_cloud/template/frontend/passkey_list.html.j2
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{% extends 'frontend/base.html.j2' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="users">
|
||||
<h1>Passkey Credentials list</h1>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>name</th>
|
||||
<th>id</th>
|
||||
<th>last used</th>
|
||||
<th>created at</th>
|
||||
<th>actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for credential in credentials %}
|
||||
<tr>
|
||||
<td>{{ credential.name }}</td>
|
||||
<td>{{ credential.credential_id[0:8].hex() }}...</td>
|
||||
<td>{{ credential.last_used }}</td>
|
||||
<td>{{ credential.created_at }}...</td>
|
||||
<td>{{ render_form(button_form, action_url=url_for('.passkey_delete', id=credential.id), action_text='delete', btn_class='btn btn-danger') }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
69
lenticular_cloud/template/frontend/passkey_new.html.j2
Normal file
69
lenticular_cloud/template/frontend/passkey_new.html.j2
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
{#- This file is part of sner4 project governed by MIT license, see the LICENSE.txt file. -#}
|
||||
{% extends 'frontend/base.html.j2' %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
let options_req = {{ options }};
|
||||
let token = "{{ token }}";
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/parseRequestOptionsFromJSON_static
|
||||
// PublicKeyCredential.parseRequestOptionsFromJSON(
|
||||
|
||||
async function get_passkey_credentials(options) {
|
||||
let option_obj = PublicKeyCredential.parseCreationOptionsFromJSON(options);
|
||||
console.log(option_obj);
|
||||
let credential = await navigator.credentials.create({
|
||||
'publicKey': option_obj,
|
||||
});
|
||||
let credential_json = credential.toJSON()
|
||||
console.log(credential_json);
|
||||
return credential_json;
|
||||
}
|
||||
let form = document.getElementById('webauthn_register_form');
|
||||
|
||||
async function register() {
|
||||
|
||||
//let credential = await get_passkey_credentials(options_req);
|
||||
let credential = await auth_passkey.sign_up(options_req);
|
||||
let name = form.querySelector('#name').value;
|
||||
|
||||
let response = await fetch("{{ url_for('.passkey_new_process') }}", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
token,
|
||||
credential,
|
||||
name
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
form.onsubmit = ev => {
|
||||
ev.preventDefault()
|
||||
register().then( result => {
|
||||
document.location = "{{ url_for('.passkey') }}";
|
||||
})
|
||||
};
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="profile">
|
||||
<h1>Register new Passkey credential</h1>
|
||||
|
||||
<div>
|
||||
To register new credential:
|
||||
<ol>
|
||||
<li>Insert/connect authenticator and verify user presence.</li>
|
||||
<li>Set name for the new credential.</li>
|
||||
<li>Submit the registration.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{{ render_form(form, id="webauthn_register_form") }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{% extends 'frontend/base.html.j2' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="users">
|
||||
<h1>WebauthnCredentials list</h1>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>user.username</th>
|
||||
<th>user_handle</th>
|
||||
<th>credential_data</th>
|
||||
<th>name</th>
|
||||
<th>_actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for cred in creds %}
|
||||
<tr>
|
||||
<td>{{ cred.user.username }}</td>
|
||||
<td>{{ cred.user_handle }}</td>
|
||||
<td>{{ cred.credential_data[0:40] }}...</td>
|
||||
<td>{{ cred.name }}</td>
|
||||
<td>{{ render_form(button_form, action_url=url_for('app.webauthn_delete_route', webauthn_id=cred.id)) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
{#- 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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue