WebAuthn 是一種基於公鑰加密的無密碼認(rèn)證標(biāo)準(zhǔn)，通過生物識(shí)別或安全密鑰實(shí)現(xiàn)用戶身份驗(yàn)證。其核心流程包括註冊(cè)與認(rèn)證兩個(gè)階段：1. 註冊(cè)時(shí)，前端調(diào)用navigator.credentials.create() 生成密鑰對(duì)並保存至後端；2. 登錄時(shí)，前端調(diào)用navigator.credentials.get() 獲取簽名數(shù)據(jù)並由後端驗(yàn)證合法性。後端需負(fù)責(zé)生成挑戰(zhàn)值、解析二進(jìn)制數(shù)據(jù)、驗(yàn)證簽名，並妥善存儲(chǔ)公鑰信息。開發(fā)中需注意瀏覽器兼容性、異常處理、認(rèn)證器類型控制及數(shù)據(jù)格式一致性，尤其在跨平臺(tái)場(chǎng)景下更應(yīng)謹(jǐn)慎處理編碼轉(zhuǎn)換問題。

用JavaScript 實(shí)現(xiàn)生物識(shí)別認(rèn)證（WebAuthn）其實(shí)並不復(fù)雜，關(guān)鍵在於理解它的流程和接口。 WebAuthn 是Web Authentication API 的簡(jiǎn)稱，它允許網(wǎng)站通過生物識(shí)別、安全密鑰等方式進(jìn)行用戶認(rèn)證，而不再依賴密碼。

什麼是WebAuthn？

WebAuthn 是W3C 和FIDO 聯(lián)合推出的標(biāo)準(zhǔn)，旨在讓網(wǎng)站可以使用公鑰加密的方式進(jìn)行用戶身份驗(yàn)證。簡(jiǎn)單來說，它通過瀏覽器和認(rèn)證器（比如指紋識(shí)別器、USB 安全密鑰）配合，實(shí)現(xiàn)安全、無需密碼的登錄方式。

它主要包含兩個(gè)核心流程：

• 註冊(cè)（Registration） ：用戶首次設(shè)置認(rèn)證方式，生成一對(duì)公私鑰。
• 認(rèn)證（Authentication） ：用戶再次登錄時(shí)，使用已註冊(cè)的認(rèn)證方式進(jìn)行身份驗(yàn)證。

這個(gè)過程由瀏覽器和操作系統(tǒng)底層的認(rèn)證器共同完成，開發(fā)者主要負(fù)責(zé)與後端配合處理公鑰和簽名驗(yàn)證。

如何在前端使用JavaScript 調(diào)用WebAuthn？

前端主要通過navigator.credentials.create()和navigator.credentials.get()兩個(gè)方法來完成註冊(cè)和登錄。

註冊(cè)流程

當(dāng)用戶點(diǎn)擊“註冊(cè)”時(shí)，前端從後端獲取一個(gè)挑戰(zhàn)（challenge）和其他配置信息，然後調(diào)用create()方法：

 navigator.credentials.create({ publicKey })
  .then((credential) => {
    // 把credential 傳給後端保存})
  .catch((err) => {
    console.error('註冊(cè)失敗:', err);
  });

這裡的publicKey是一個(gè)配置對(duì)象，通常由後端生成，包括挑戰(zhàn)值、RP（依賴方）信息、用戶信息等。

登錄流程

登錄時(shí)類似，前端調(diào)用get()方法：

 navigator.credentials.get({ publicKey })
  .then((assertion) => {
    // 把a(bǔ)ssertion 提交給後端驗(yàn)證})
  .catch((err) => {
    console.error('認(rèn)證失敗:', err);
  });

這部分的關(guān)鍵在於前後端配合，後端需要驗(yàn)證簽名是否合法，並判斷是否匹配之前註冊(cè)的密鑰。

後端怎麼配合WebAuthn？

前端只是觸發(fā)流程，真正驗(yàn)證邏輯在後端。你需要處理以下幾個(gè)關(guān)鍵點(diǎn)：

• 生成challenge ：每次註冊(cè)或登錄請(qǐng)求時(shí)，生成一個(gè)隨機(jī)字符串作為挑戰(zhàn)值，防止重放攻擊。
• 解析前端傳來的credential / assertion 數(shù)據(jù)：這些數(shù)據(jù)是二進(jìn)制格式（ArrayBuffer），需要正確解析。
• 驗(yàn)證簽名：使用公鑰對(duì)簽名數(shù)據(jù)進(jìn)行驗(yàn)證，確保是用戶持有的認(rèn)證器簽發(fā)的。

不同語言有不同的庫可以處理這些邏輯，比如Node.js 可以用@simplewebauthn/server ，Python 可以用py_webauthn 。

另外，還需要注意：

• 存儲(chǔ)用戶註冊(cè)的公鑰和認(rèn)證器信息
• 處理多個(gè)認(rèn)證器的情況
• 設(shè)置合適的超時(shí)時(shí)間
• 支持跨平臺(tái)認(rèn)證（比如註冊(cè)時(shí)用手機(jī)，登錄時(shí)用電腦）

常見問題和注意事項(xiàng)

• 瀏覽器兼容性：主流瀏覽器都支持WebAuthn，但iOS 上Safari 的支持稍有差異，需要特別注意。
• 用戶取消操作：用戶可能中途取消認(rèn)證，前端需要處理AbortError等異常。
• 認(rèn)證器類型：可以選擇是否要求必須使用生物識(shí)別，還是允許使用安全密鑰等其他方式。
• 調(diào)試難度大：因?yàn)樯婕暗讓诱J(rèn)證器，本地開發(fā)調(diào)試時(shí)可能需要用特定設(shè)備或模擬器。

如果你在開發(fā)過程中遇到“簽名驗(yàn)證失敗”等問題，大概率是前後端的數(shù)據(jù)格式處理不一致，比如沒有正確處理ArrayBuffer 或Base64 編碼轉(zhuǎn)換。

基本上就這些。 WebAuthn 不復(fù)雜，但細(xì)節(jié)容易出錯(cuò)，特別是前後端數(shù)據(jù)格式和流程順序。只要一步步按標(biāo)準(zhǔn)來，實(shí)現(xiàn)一個(gè)安全的無密碼登錄系統(tǒng)是完全可行的。

以上是JavaScript生物識(shí)別身份驗(yàn)證的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！