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

Myou_AkiMyou_Aki - 2023-01-17 06:50:54

---

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

随着互联网的普及，我们越来越依赖网络服务来完成日常工作和娱乐。然而，在线身份认证一直是一个棘手的问题，传统的身份认证方式如密码、短信/邮件验证码、 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。同时为了方便开发者部署与二次开发，我详细描述了不同的场景下，该如何操作和启动应用。

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

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

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

如果图片刷不出来，麻烦到 https://github.com/guMcrey/we... 查看，或者直接访问 demo 地址：https://web-authn.x-dev.club

如果图片刷不出来，麻烦到 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 要求删除数据

外链：

demo 地址：https://web-authn.x-dev.club源码：https://github.com/guMcrey/we...WebAuthn MDN：https://developer.mozilla.org...

Tags 标签

前端后端node.jshtml5Chrome

扩展阅读