使用 WebAuthn 告別密碼：線上身份保護的未來

Myou_Aki發表於2023-01-03
Web密碼

傳統身份認證方式的不足：

隨著網際網路的普及，我們越來越依賴網路服務來完成日常工作和娛樂。然而，線上身份認證一直是一個棘手的問題，傳統的身份認證方式如密碼、簡訊/郵件驗證碼、 OTP（一次性密碼）或雙重認證，都存在一些缺點：

  • 密碼：使用密碼進行身份驗證是最常見的方式，但是密碼可能會被暴力破解、洩露或忘記，因此不夠安全和方便。
  • 簡訊/郵件驗證碼：使用簡訊/郵件驗證碼進行身份驗證時，會向使用者的手機傳送一個驗證碼，使用者需要在網站或應用中輸入這個驗證碼才能登入。但是，簡訊驗證碼可能會被攔截或欺騙，導致身份認證失敗。
  • OTP（一次性密碼）：OTP 是一種使用單次有效的密碼進行身份驗證的方式。OTP 通常會生成一個動態的密碼，每隔一段時間就會更換，使用者需要在網站或應用中輸入這個密碼才能登入。OTP 可以在裝置不在身邊的情況下進行身份驗證，但是如果 OTP 被攔截或欺騙，也會導致身份認證失敗。
  • 雙重認證：又稱為雙因素認證，是一種身份驗證方式，它需要使用者同時提供兩種不同型別的憑據才能透過身份驗證。通常，雙重認證會使用兩種不同的認證因素：知道的資訊（如密碼）和擁有的物品（如手機或安全令牌）。所以需要輸入額外的資訊，所以可能會增加登入的時間，從而影響使用者體驗。

WebAuthn 是什麼？

有沒有一種身份認證方式可以既保證安全性又不影響使用者體驗呢？

那就是 WebAuthn。

WebAuthn 由 W3C（全球資訊網聯盟）提出，是一種基於瀏覽器的、新型的線上身份認證技術，允許使用者使用基於硬體的身份驗證裝置（如 Apple TouchID 和 Windows Hello 或移動裝置的生物識別感測器）來進行身份驗證。WebAuthn 旨在為使用者提供更安全方便的線上身份驗證方式，並且被大多數現代 Web 瀏覽器支援。

WebAuthn的工作原理如下：

  • 使用者在第一次登入時註冊身份
  • 使用者的裝置生成一個私鑰
  • 使用者的裝置使用私鑰對登入資訊進行簽名
  • 伺服器驗證簽名，確認使用者身份

這個過程中，密碼並沒有使用。相反，WebAuthn 使用數字簽名技術來驗證使用者身份，數字簽名使用公鑰加密演算法，可以提供更高的安全性。

WebAuthn 做身份驗證，解決了哪些問題？

相比於傳統的密碼認證方式，WebAuthn 具有許多優點。

首先，它提供了更高的安全性。由於不使用密碼，因此不會因為密碼洩露而造成賬戶安全威脅。

此外，WebAuthn 還可以使用多種驗證方式，包括指紋識別、人臉識別等。這些驗證方式都非常難以被冒充，因此可以大大提高賬戶安全性。其次，WebAuthn 提供了更便捷的登入體驗，使用者只需要在第一次登入時註冊身份，之後就可以使用 WebAuthn 進行快速登入。使用者無需記住密碼，也無需擔心密碼遺忘帶來的麻煩。

當然，WebAuthn 也有一些缺點。例如，它只能在支援 WebAuthn 的裝置上使用，因此對於一些老舊的裝置可能並不適用。此外，若要為網站或應用建立公私鑰對，使用者必須先在該網站或應用中註冊，而且對於不熟悉 WebAuthn 的使用者來說，可能需要一些時間來學習和理解這種身份驗證方式。

總體而言，在密碼遭受頻繁攻擊的今天，WebAuthn 的出現為我們提供了更高的安全性和更便捷的登入體驗。

web-authn-completed-app 做了什麼？

為了讓對 WebAuthn 感興趣的開發者更快的理解和開發，我完成了一個基於 WebAuthn 的身份認證流程的 demo，方便開發者進行二次開發，專案叫 web-authn-completed-app，技術棧：客戶端使用 Vue3 + Typescript + Vite3 開發；服務端使用 Express；資料庫使用 MySQL8。同時為了方便開發者部署與二次開發，我詳細描述了不同的場景下，該如何操作和啟動應用。

如果感覺對你有幫助，還請多多 star，歡迎一起交流學習~

下圖為 demo 在 WIN10 和 Android 裝置上的演示

如果圖片刷不出來，麻煩到 https://github.com/guMcrey/we... 檢視，或者直接訪問 demo 地址：https://web-authn.x-dev.club

WIN10-Microsoft Edge

/Android-Huawei browser

如果圖片刷不出來，麻煩到 https://github.com/guMcrey/we... 檢視，或者直接訪問 demo 地址：https://web-authn.x-dev.club

裝置和瀏覽器相容性也是我們要考慮的問題，裝置和瀏覽器要求：

  • 以下任一裝置

    • 一部 Android 裝置（最好帶有生物識別感測器）
    • 一部搭載 iOS 14 或更高版本且具備觸控 ID 或面容 ID 功能的 iPhone 或 iPad
    • 一部搭載 macOS Big Sur 或更高版本且具備觸控 ID 功能的 MacBook Pro 或 Air
    • 設定了 Windows Hello 的 Windows 10 19H1 或更高版本

  • 以下任一瀏覽器

    • Google Chrome 67 或更高版本
    • Microsoft Edge 85 或更高版本
    • Safari 14 或更高版本
      更多瀏覽器相容性請檢視 Can I use
宣告：所有透過 https://web-authn.x-dev.club 註冊的使用者資料不會被使用，僅用於 demo 使用者統計，如仍介意可以發郵件到 itgumx@163.com 要求刪除資料

外鏈：

相關文章