【开源】使用 WebAuthn 告别密码：在线身份保护的未来

前言

WebAuthn 一个第一次认识的。今日前端早读课文章由 @明明投稿分享。

正文从这开始～～

传统身份认证方式的不足：

随着互联网的普及，我们越来越依赖网络服务来完成日常工作和娱乐。然而，在线身份认证一直是一个棘手的问题，传统的身份认证方式如密码、短信 / 邮件验证码、 OTP（一次性密码）或双重认证，都存在一些缺点：

• 密码：使用密码进行身份验证是最常见的方式，但是密码可能会被暴力破解、泄露或忘记，因此不够安全和方便。

• 短信 / 邮件验证码：使用短信 / 邮件验证码进行身份验证时，会向用户的手机发送一个验证码，用户需要在网站或应用中输入这个验证码才能登录。但是，短信验证码可能会被拦截或欺骗，导致身份认证失败。

• OTP（一次性密码）：OTP 是一种使用单次有效的密码进行身份验证的方式。OTP 通常会生成一个动态的密码，每隔一段时间就会更换，用户需要在网站或应用中输入这个密码才能登录。OTP 可以在设备不在身边的情况下进行身份验证，但是如果 OTP 被拦截或欺骗，也会导致身份认证失败。

• 双重认证：又称为双因素认证，是一种身份验证方式，它需要用户同时提供两种不同类型的凭据才能通过身份验证。通常，双重认证会使用两种不同的认证因素：知道的信息（如密码）和拥有的物品（如手机或安全令牌）。所以需要输入额外的信息，所以可能会增加登录的时间，从而影响用户体验。

WebAuthn 是什么？

有没有一种身份认证方式可以既保证安全性又不影响用户体验呢？

那就是 WebAuthn。

WebAuthn 由 W3C（万维网联盟）提出，是一种基于浏览器的、新型的在线身份认证技术，允许用户使用基于硬件的身份验证设备（如 Apple TouchID 和 Windows Hello 或移动设备的生物识别传感器）来进行身份验证。WebAuthn 旨在为用户提供更安全方便的在线身份验证方式，并且被大多数现代 Web 浏览器支持。

WebAuthn 的工作原理如下：

• a. 用户在第一次登录时注册身份

• b. 用户的设备生成一个私钥

• c. 用户的设备使用私钥对登录信息进行签名

• d. 服务器验证签名，确认用户身份

这个过程中，密码并没有使用。相反，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。同时为了方便开发者部署与二次开发，我详细描述了不同的场景下，该如何操作和启动应用。

web-authn-completed-app 是一个基于 SimpleWebAuthn 实现的完整应用。它允许网站使用内置的认证器（如 Apple TouchID 和 Windows Hello 或移动设备的生物识别传感器）对用户进行身份认证；它可以代替密码或短信验证码等常规验证方式，为用户提供更安全、轻松的登录体验。

• 在线体验：可以直接访问 https://web-authn.x-dev.club 体验这种新型的身份验证方式带来的便利

• 源码地址：源码可以在 github 看到

如果感觉对你有帮助，还请多多 star，欢迎一起交流学习～

下图为 demo 在 WIN10 和 Android 设备上的演示

设备和浏览器兼容性也是我们要考虑的问题，设备和浏览器要求：

• 以下任一设备

• 一部 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 用户统计，如仍介意可以发邮件到 [e-mail] 要求删除数据

外链：

• demo 地址：https://web-authn.x-dev.club

• 源码：https://github.com/guMcrey/web-authn-completed-app

• WebAuthn MDN：https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API

欢迎读者自荐投稿，前端早读课等你来。+v：zhgb_f2er