Web Authentication Demo

WebAuthentication.js

let rawId = null; // store cert id (get it from server actually)

// registor
let challenge = window.crypto.getRandomValues(new Uint8Array(32));
let user = {
    id: Uint8Array.from(window.atob("UZSL85T9AFC"), c=>c.charCodeAt(0)),  // sample user id in Base64
    name: "kairuiliu@msn.com",
    displayName: "Kairui Liu",
};
let relyingParty = {
    name: "Example Domain",
    id: "example.com"
};

let credentialCreationOptions = {
    challenge: challenge,
    rp: relyingParty,
    user: user,
    // most device support -7 (ES256), but windows hello can only worked on -257 (RS256), you can aslo add -8 (EdDSA), but in most of cases -7 (and -257, if you want to use windows hello) is enough (https://github.com/w3c/webauthn/issues/1757)
    pubKeyCredParams: [{alg: -7, type: "public-key"}, {alg: -257, type: "public-key"}],
    timeout: 60000,
    attestation: "direct"
};

navigator.credentials.create({publicKey: credentialCreationOptions})
.then((newCredentialInfo) => {
    console.info(newCredentialInfo);
    rawId = newCredentialInfo.rawId;
})
.catch((error) => {
    console.error(error);
});

// verify
let challenge = window.crypto.getRandomValues(new Uint8Array(32));
let allowCredentials = [{
    type: "public-key",
    id: rawId,
    // transports: ["usb", "nfc", "ble"] // do not write this config if you want to use build-in verifier. actually, it should be provided by server
}];

let credentialRequestOptions = {
    challenge: challenge,
    allowCredentials: allowCredentials,
    timeout: 60000
};

navigator.credentials.get({publicKey: credentialRequestOptions})
.then((assertion) => {
    console.info(assertion)
})
.catch((error) => {
    console.error(error);
});