Summary
WebAuthn（也叫Web Authentication API）是Credential Management API的一個擴充套件，它通過公鑰保證了免密認證的安全性。我們通過一個Demo來看它做了什麼。
準備工作
- Firefox Nightly
- 下載原始檔 https://github.com/fido-alliance/webauthn-demo/tree/completed-demo
- Node.js + NPM
- 推薦用最新的Windows：Windows Hello整合了認證模組
核心概念
WebAuthn用公鑰證書代替了密碼，完成使用者的註冊和身份認證（登入）。它更像是現有身份認證的增強或補充。為了保證通訊資料安全，一般基於HTTPS（TLS）通訊。在這個過程中，有4個模組。
- 伺服器：它可以被認為一個依賴方（Relying Party），它會儲存使用者的公鑰並負責使用者的註冊、認證。在Demo的程式碼中，用Express實現。
- JS指令碼：串聯使用者註冊、認證。在Demo中，位於static目錄。
- 瀏覽器：需要包含WebAuthn的Credential Management API
- 認證模組（Authenticator）：它能夠建立、儲存、檢索身份憑證。它一般是個硬體裝置（智慧卡、USB），也可能已經整合到了你的作業系統（比如Windows Hello）
註冊
註冊過程分為7個階段
0. 發起註冊請求
瀏覽器發起註冊請求，包含使用者基本資訊。
1. 伺服器返回Challenge，使用者資訊，依賴方資訊（Relying Party Info）
- Challenge是一個很大的隨機數，由伺服器生成，這是保證通訊安全的關鍵。
2. 瀏覽器呼叫認證模組生成證書
這是一個非同步任務，JS指令碼呼叫瀏覽器的navigator.credentials.create建立證書。
getMakeCredentialsChallenge({username, name})
.then((response) => {
let publicKey = preformatMakeCredReq(response);
return navigator.credentials.create({ publicKey })
})
.then((response) => {
console.log(response);
let makeCredResponse = publicKeyCredentialToJSON(response);
return sendWebAuthnResponse(makeCredResponse)
})
.then((response) => {
if(response.status === 'ok') {
loadMainContainer()
} else {
alert(`Server responed with error. The message is: ${response.message}`);
}
})
.catch((error) => alert(error))
複製程式碼瀏覽器到認證模組之間的資料用JSON格式傳遞，幷包含以下內容：
- Challenge
- 使用者資訊 + 依賴方資訊：用來管理證書
- ClientData：瀏覽器會自動建立、填充引數。其中，origin是關鍵屬性，它會被伺服器用來驗證請求的源頭
3. 認證模組建立一對公鑰/私鑰和attestation資料
4. 認證模組把公鑰/Credential rawID/attestation傳送給瀏覽器
瀏覽器會以{ AttestationObject, ClientDataJSON }的格式返回給JS指令碼。
5. 瀏覽器把Credential傳送給伺服器
6. 伺服器完成註冊
檢查Challenge、Origin，並儲存公鑰和使用者資訊。
身份認證（登入）
同樣分為7步，多數內容與註冊相似。
0. 發起登入請求
瀏覽器發起登入請求，包含使用者基本資訊。
1. 伺服器返回Challenge，使用者資訊，依賴方資訊（Relying Party Info）
2. 瀏覽器呼叫認證模組檢索證書
JS指令碼呼叫瀏覽器的navigator.credentials.get檢索證書。
getGetAssertionChallenge({username})
.then((response) => {
console.log(response)
let publicKey = preformatGetAssertReq(response);
return navigator.credentials.get({ publicKey })
})
.then((response) => {
console.log(response)
let getAssertionResponse = publicKeyCredentialToJSON(response);
return sendWebAuthnResponse(getAssertionResponse)
})
.then((response) => {
if(response.status === 'ok') {
loadMainContainer()
} else {
alert(`Server responed with error. The message is: ${response.message}`);
}
})
.catch((error) => alert(error))
複製程式碼3. 認證模組建立一對公鑰/私鑰和attestation資料
4. 認證模組把公鑰/Credential rawID/attestation傳送給瀏覽器
5. 瀏覽器把Credential傳送給伺服器
6. 伺服器完成註冊
檢查Challenge、Origin，並驗證公鑰和使用者資訊。
let verifyAuthenticatorAssertionResponse = (webAuthnResponse, authenticators) => {
let authr = findAuthr(webAuthnResponse.id, authenticators);
let authenticatorData = base64url.toBuffer(webAuthnResponse.response.authenticatorData);
let response = {'verified': false};
if(authr.fmt === 'fido-u2f') {
let authrDataStruct = parseGetAssertAuthData(authenticatorData);
if(!(authrDataStruct.flags & U2F_USER_PRESENTED))
throw new Error('User was NOT presented durring authentication!');
let clientDataHash = hash(base64url.toBuffer(webAuthnResponse.response.clientDataJSON))
let signatureBase = Buffer.concat([authrDataStruct.rpIdHash, authrDataStruct.flagsBuf, authrDataStruct.counterBuf, clientDataHash]);
let publicKey = ASN1toPEM(base64url.toBuffer(authr.publicKey));
let signature = base64url.toBuffer(webAuthnResponse.response.signature);
response.verified = verifySignature(signature, signatureBase, publicKey)
if(response.verified) {
if(response.counter <= authr.counter)
throw new Error('Authr counter did not increase!');
authr.counter = authrDataStruct.counter
}
}
return response
}
複製程式碼