lenticular_cloud2/lenticular_cloud/template/frontend/webauthn_register.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 %}