Yo use FIDOw FIDO2 keys in web browsers, we have to use the FIDO2 Web Authentication (WebAuthn) API. WebAuthn is a set of standards and APIs that allows the browser to communicate with the operating system and deal with using cryptographic keys. WebAuthn falls under FIDO2 standards, but it was developed by the W3C.
We use a client-side JavaScript library called "webauth-json" that serves as a convenience wrapper for the the WebAuthn API by encoding binary data using base64url.
https://github.com/github/webauthn-json
This article demonstrates how to use the webauth-json JavaScript library and DualShield API to register a FIDO2 key for a user in a web browser.
Import WebAuth-Jason
To use the webauth-jason, you need to install it first
| Code Block |
|---|
npm install --save @github/webauthn-json |
Install WebAuth-Jason
Then, you need to import it
| Code Block |
|---|
import { create, CredentialCreationOptionsJSON, CredentialRequestOptionsJSON, get, PublicKeyCredentialWithAssertionJSON } from '@github/webauthn-json'; |
Create Objects
We need to create 3 objects, fidoObj, CredentialCreationOptionsJSON, and CredentialRequestOptionsJSON
| Code Block |
|---|
|
fidoObj = {
manufacturerCode: "DN",
productCode: "FIDO2",
method: "FIDO2"
};
credentialCreateOptions: CredentialCreationOptionsJSON = {
publicKey: {
rp: {
name: ""
},
user: {
name: "",
displayName: "",
id: ""
},
challenge: "",
pubKeyCredParams: [],
timeout: 0,
excludeCredentials: [],
authenticatorSelection: {userVerification: "discouraged"},
attestation: "none",
}
};
credentialRequestOptions: CredentialRequestOptionsJSON = {
publicKey: {
challenge: "",
extensions:{
appid:""
},
allowCredentials: [],
userVerification: "discouraged"
}
}; |
Register a FIDO2 Key for a user
To register a FIDO2 key for a user, we call 2 DualShield APIs
| Expand |
|---|
|
| Include Page |
|---|
| token.preRegister |
|---|
| token.preRegister |
|---|
|
|
| Expand |
|---|
|
| Include Page |
|---|
| token.register |
|---|
| token.register |
|---|
|
|
Pre-Register FIDO2 Token
First, we can the DualShield API token/preRegister to pre-register a FIDO2 token
| Expand |
|---|
|
| Include Page |
|---|
| token.preRegister |
|---|
| token.preRegister |
|---|
|
|
| Code Block |
|---|
|
let json = {
product: this.fidoObj,
user: { loginName: this.loginName}, \\ Pass the user name to which the Fido2 key needs to be registered
}; |
The response from the preRegister API call is then passed to the CredentialCreationOptionsJSON object
| Code Block |
|---|
|
\\ response is stored in data
this.registerRequestId = data.result.registerRequestId;
let registerObj = JSON.parse(data.result.registerRequestData);
if(registerObj){
this.credentialCreateOptions.publicKey.rp.id = registerObj.rp.id;
this.credentialCreateOptions.publicKey.rp.name = registerObj.rp.name;
this.credentialCreateOptions.publicKey.user.displayName = registerObj.user.displayName;
this.credentialCreateOptions.publicKey.user.id = registerObj.user.id;
this.credentialCreateOptions.publicKey.user.name = registerObj.user.name;
this.credentialCreateOptions.publicKey.timeout = 180000; //Set to 3 minutes
this.credentialCreateOptions.publicKey.challenge = registerObj.challenge;
this.credentialCreateOptions.publicKey.pubKeyCredParams = registerObj.pubKeyCredParams;
this.credentialCreateOptions.publicKey.attestation = registerObj.attestation;
this.credentialCreateOptions.publicKey.excludeCredentials = registerObj.excludeCredentials;
this.credentialCreateOptions.publicKey.authenticatorSelection.userVerification= registerObj.authenticatorSelection.userVerification;
} |
Now, pass the CredentialCreationOptionsJSON object to the create API in the WebAuthn-Jason library
| Code Block |
|---|
|
create(this.credentialCreateOptions).then((response: any) => {
let token: {publicKeyCredentialJson: string, pin?: string, registerRequestId: string} = {
publicKeyCredentialJson: JSON.stringify(response),
registerRequestId: this.registerRequestId,
}; |
Register FIDO2 Token to a user
Finally, we call the DualShield API token/register to register the FIDO2 token
| Expand |
|---|
|
| Include Page |
|---|
| token.register |
|---|
| token.register |
|---|
|
|
| Code Block |
|---|
|
let json = {
product:{productCode: this.fidoObj.productCode},
application: {name: ""},
user: { loginName: this.loginName },
token: token
}; |