由於中文資源甚少，因此將自己查找以及測試後的結果做個簡易的整理紀錄，以備不時之需

demo：https://nuxt-lab.vercel.app/fido2-lib

Next.js版：https://parker-nextjs-lab.vercel.app/zh-tw/web-authn

Web Authn是什麼？

W3C於2019時加入的正式標準，全名為Web Authentication，目前大多數的主流瀏覽器已經支援，主要目的在於簡化登入流程，不過由於技術核心主要仰賴加解密技術，因此相比傳統帳號密碼登入來得複雜繁瑣，建置成本也較高．

Web Authn如何運作？

回想一下，在任何資訊系統上要使用指紋辨識時，都必須先登入之後，再執行啟用流程後才能使用，所以這整段啟用流程會是（不提失敗情況）：

• 啟用：前端傳送使用者識別資料 → 後端生成Challenge (二進制資料) 並與使用者資料一起傳至前端 → 前端透過 Challenge 及使用者資料生成金鑰 → 後端解包驗證金鑰並透Challenge驗證該次傳輸是否合法 → 公鑰及識別資料存入資料庫 → 前端儲存金鑰識別資料 → 啟用成功
• 登入：前端傳送金鑰識別資料 → 後端生成Challenge (二進制資料) → 前端透過接收到的資料生成金鑰 → 後端解包驗證金鑰並透Challenge驗證該次傳輸是否合法 → 登入成功

其中生成金鑰主要是仰賴Web Authn的核心api : navigator.credentials，前端就只是透過他生成金鑰而已，前端唯一能稱上難點的也只有二進制資料的轉換而已，所以主要的技術難點會是在後端，因為金鑰資料的驗證會需要知道加解密的相關規則，才能取得Challenge及金鑰資訊，並更近一步做金鑰驗證．

Web Authn怎麼實作？

如果相關基礎知識夠的話可以直接挑任意後端技術實作，這邊礙於已超過前端工程師的專業領域過多，因此採用npm上的 fido2-lib 做後端的驗證處理，前後端則是以Vue的SSR框架Nuxt3，並採用JavaScript做實作，值得注意的是，fido2-lib提供的方法大多數都是異步函式，並且源碼對應的函式底下沒有看到異步處理，如果沒有await等待執行完畢會出現資料處理錯誤的狀況，所以要切記不要忘記await等待執行完畢

前端實作源碼 、 後端實作源碼

• 啟用
• 登入

延伸關鍵字

1. RS1、RS256 與 ES256
2. 雜湊演算法
3. 二進制資料處理

參考資料：

1. https://blog.techbridge.cc/2019/08/17/webauthn-intro
2. https://yishiashia.github.io/posts/passkey-and-webauthn-passwordless-authentication/
3. https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#browser_compatibility
4. https://flyhigher.top/develop/2160.html#verify-authenticator
5. https://webauthn-open-source.github.io/fido2-lib/Fido2Lib.html#assertionOptions

文章目錄：📚Parker Chen 的前端技術碎碎念