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.
...
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 forto which the Fido2 key needs to be registered
}; |
...
| 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
}; |
...