5分钟内即可为您的网站启用无密码身份验证！

分步教程

服务器情况如何？

这只是个“Alpha 版本”！

借助 WebAuthn 协议，用户现在可以在浏览器中使用手机指纹传感器进行无密码身份验证，或使用网络摄像头进行人脸识别。这不仅为用户带来更便捷的体验，而且由于只需一步即可完成双因素身份验证，因此也更加安全。

在本演示中，我们将使用免费的Passwordless.ID API。这是一个公共身份提供商，它将为我们处理大部分繁重的工作。它是免费的，您甚至无需注册帐户或下载任何内容即可使用它。

下图描述了我们即将要做的事情。

我们的演示网站会直接重定向到passwordless.id进行“无密码”身份验证（也不需要电子邮件），并授权读取个人资料，然后返回到原始演示页面。

多亏了它，我们才能获取该演示的用户头像并显示出来，就这么简单！除了用户个人资料之外，我们还会获取一个已签名的 JSON Web Token。这个令牌之后可以作为用户身份证明发送到您的 API。稍后会详细介绍。

在线演示

请注意，出于安全原因，IFrame 内将阻止身份验证，请点击右上角在新标签页中打开 CodeSandbox！

如果 CodeSandbox 显示不正确或无法正常工作，您也可以在此处查看实时演示，并在此处查看源代码。

Passwordless.ID API 遵循 OAuth2/OpenID 标准，与 Google 或 Facebook 登录类似。但由于它是一个公共API，无需任何特殊授权，因此集成起来更加简单便捷。

分步教程

虽然它作为通用的 OpenID 提供程序与大多数其他“使用...登录”客户端库兼容，但最简单的集成方法是使用@passwordless-id/connect库。

让我们逐一分析代码，首先从“登录”按钮开始。

<button id="sign-in" hidden class="btn btn-light" onclick="app.signIn()">Sign In</button>

现在，这只是非常基础的内容，根据你使用的前端框架的不同，它看起来会有所不同，但这就是要点。

外观app.signIn()如下。

import passwordless from 'https://unpkg.com/@passwordless-id/connect'

function signIn() {
    // redirects to the authentication/authorization page and back
    passwordless.auth({scope: 'openid avatar email'})
}

// a global `app` object just for the purpose of the demo
window.app = {
    signIn
}

方法调用后passwordless.auth()，用户将被重定向到 Passwordless.ID 的用户界面，该界面会提示用户创建帐户或登录，然后授权您的应用读取其个人资料的密码openid和avatar密码email。如果用户已登录并已授予访问权限，则重定向将直接返回到应用。

重定向返回时，它会将参数附加id_token到 URL 哈希值（https://example.com/mypage#id_token=...）。然后可以使用以下代码从 URL 中提取个人资料。

const user = await passwordless.id({scope: 'openid avatar email'})
if(user.signedIn && user.scopeGranted) {
    // great, user.profile contains the information
    // and user.id_token can be sent to APIs
}
    // the user is not signed in or has refused
    // to grant authorization
}

这段代码通常在页面加载时执行。该id()函数首先会检查当前 URL，并尝试解析id_token哈希表中的密码（如果存在）。否则，将直接向 Passwordless.ID API 发送请求以获取密码（当然，前提是用户已登录并已授予相应的权限）。

该函数始终返回。如果用户已登录并已授予权限，则结果user如下所示。

{
 "signedIn": true,
 "scopeGranted": true,
 "id_token": "eyJ0eXAiOiJK...",
 "profile": {
  "nickname": "Johny",
  "picture": "https://ui.passwordless.id/avatars/sam.svg",
  "preferred_username": "johndoe",
  "...": "...more attributes depending on requested scope"
 }
}

搞定！您已登录用户并阅读了其个人资料！

您可能还需要一种让用户注销的方法。由于 Passwordless.ID 是一个集中式身份验证系统，登录或注销会影响所有使用它的网站。因此，您无法强制用户注销。您可以使用以下代码礼貌地询问用户“您想注销吗？”

// redirects the user to the sign out page
passwordless.logout()

这将把用户重定向到注销页面，注销完成后（或注销失败后），返回到当前 URL。

现在登录、登出和找回用户的功能都已就绪。恭喜！为了简洁起见，我们将省略个人资料显示和其他用户界面交互部分。您可以根据网站风格自由自定义这些内容。

服务器情况如何？

之前的例子展示了浏览器端的交互，可以直接获取个人资料信息。但是，如何才能信任服务器端的这些信息呢？这就是id_token响应中的信息的作用！它是一个“ JSON Web Token ”（JWT），是用户身份的签名证明。

该id_token密钥使用 Passwordless.ID 的私钥进行签名，并可以使用其公钥进行验证。

验证令牌有两种方法：

1. 在本地，可以使用众多可用的 JWT 库之一。

2. 通过调用/openid/validate

这样，您的服务器和 API 就能确保用户的身份。每个服务器和 APIid_token都将拥有一个sub符合 OpenID 标准的字段，该字段是唯一的用户标识符。您也可以请求该email字段，但请注意，在 Passwordless.ID 中，电子邮件地址是可选的，因此即使您请求了该字段，也未必总能获得。

这只是个“Alpha 版本”！

Passwordless.ID 尚未完全准备就绪，目前仍处于概念验证阶段。虽然它已可用于测试和集成，但尚未完全准备好用于生产环境。

如果您认为这是一项有意义的公益服务，并且喜欢这篇教程，请点赞并分享！让教程传播开来并鼓励我们，是我们取得成功的最佳途径。希望您喜欢这篇教程，期待您的反馈！

GIF