Test User Registration with the FIDO2 Bank Demo Web App
- 15 Oct 2024
- 2 Minutes to read
- DarkLight
Test User Registration with the FIDO2 Bank Demo Web App
- Updated on 15 Oct 2024
- 2 Minutes to read
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
You can use the FIDO2 Bank Demo Web App to test the user registration flow.
Registration flow code samples
The code samples in this article do NOT contain actual production code, rather, the examples used here serve to demonstrate the registration flow for FIDO2.
Initialization
To initialize the registration process, the user must enter their user name in the FIDO2 Bank Demo Web App, select the respective Authenticator attachment option, and click Register.
When the registration is triggered, the FIDO2 Bank Demo Web App sends an initialization request to the OneSpan Trusted Identity platform API via the following endpoint:
The exact structure of the request body can be verified on the Platform API Sandbox page. The initializationResponse should look like this:
{
"requestID": registration:9a97ad39-3581-4c20-99f5-dacd41bcffe4,
"registrationRequest": "{\"rp\":{\"id\":\"sampletest-tenant.clockwork-dev.tid.onespan.cloud\",\"name\":\"OneSpan Corp\",\"icon\":\"https://www.onespan.com/themes/custom/onespan/images/logo.svg\"},\"user\":{\"name\":\"test1@sampletest-tenant\",\"icon\":\"https://www.onespan.com/themes/custom/onespan/images/logo.svg\",\"id\":\"124gx9TOLk_B6tbTlkZN1CHlUOE6UAdYZD63QgxsID2sa-YIN8GhagEfRQgd96H48xEiKBiHln6SNRvBME_jWQ\",\"displayName\":\"test1\"},\"challenge\":\"hXYd7jWooAWFRpYPJHouW_2hklZ2kxuC7JdsatPzEvxJi4A8Ye7JXyZzca4JC4v5uj4MEL1_tpmfK3BEbGE3Tw\",\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-8},{\"type\":\"public-key\",\"alg\":-43}],\"timeout\":100000,\"authenticatorSelection\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":false,\"userVerification\":\"required\"},\"attestation\":\"none\",\"extensions\":{\"authnSel\":[\"fa2a81f4-8412-41f9-8656-c94487f224ec\"],\"exts\":true,\"biometricPerfBounds\":{\"FAR\":0.02,\"FRR\":0.02},\"location\":false,\"uvi\":false,\"uvm\":false},\"status\":\"ok\",\"errorMessage\":\"\"}"
}Communication with the client platform
In this step, the WebAuthn API is called from the client-side JavaScript of your website and prompts the user to create a new set of credentials generated with the authenticator.
navigator.credentials.create(credentialCreationOptions)The credentialCreationOptions object should be based on the initializationResponse received during the initialization step.
var resp = JSON.parse(initializationResponse.registrationRequest);
var credentialCreationOptions = {
publicKey: {
rp: resp.rp,
challenge: bufferDecode(resp.challenge),
user: {
id: bufferDecode(resp.user.id),
name: resp.user.name,
displayName: resp.user.displayName
},
pubKeyCredParams: resp.pubKeyCredParams,
timeout: resp.timeout,
attestation: resp.attestation,
authenticatorSelection: resp.authenticatorSelection,
excludeCredentials: resp.excludeCredentials === undefined ? []
: resp.excludeCredentials.map(item => Object.assign({}, item, {
id: bufferDecode(item.id)
})),
extensions: {}
}
};A custom bufferDecode function is defined in the following way:
function bufferDecode(value) {
const s = base64DecodeUrl(value);
const s1 = atob(s);
return Uint8Array.from(s1, c => c.charCodeAt(0));
}
function base64DecodeUrl(str) {
str = str + Array((4 - str.length % 4) % 4 + 1).join('=');
return str.replace(/-/g, '+').replace(/_/g, '/');
}When navigator.credentials.create() is called, the browser prepares a list of available authenticators.
At this point, the user needs to select an authenticator to trigger the credential creation. Once selected, the user is prompted to provide their consent, and a private-public key pair is created. The public key is received via a promise that contains the PublicKeyCredential object.
navigator.credentials.create(credentialCreationOptions)
then(publicKeyCredential => {
finalize(publicKeyCredential);
})
catch(e => { // error handling
});Finalization
In the finalization step, a POST request is sent to the OneSpan Trusted Identity platform API with the following endpoint:
The body is prepared based on the previously received PublicKeyCredential object.
This request contains the following body:
const body = {
registrationResponse: JSON.stringify({
id: publicKeyCredential.id,
rawId: toBase64Url(publicKeyCredential.rawId),
type: "public-key",
response: {
"attestationObject": toBase64Ur(publicKeyCredential.response.attestationObject),
"clientDataJSON": toBase64Url(publicKeyCredential.response.clientDataJSON)
}
}),
fidoProtocol: "FIDO2",
requestID: "registration:9a97ad39-3581-4c20-99f5-dacd41bcffe4"
};
function toBase64Url(arrayBuffer) {
let binary = ''; const bytes = new Uint8Array(arrayBuffer);
const len = arrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
}The value of the requestID in the body should match the value of the requestID that was retrieved from the initializationResponse.
For more information on the structure, refer to the World Wide Web Consortium (W3C) Web Authentication documentation.
Was this article helpful?