使用手机的指纹传感器或使用网络摄像头的面部识别的无密码身份验证，借助WebAuthn协议可以在浏览器中使用。它不仅对用户更舒适，而且更安全，因为它是单步的两因素身份验证。

在此演示中，我们将使用免费的Passwordless.ID API。这是一个公共身份提供商，它将照顾我们的繁重。它是免费的，您甚至不需要注册帐户或下载任何内容。

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

我们的演示网站将简单地重定向到无密码。ID以验证“无密码”（也不需要电子邮件）并授权阅读配置文件，然后返回到原始演示页面。

感谢它，我们将获得该演示的用户化身并显示它！除了用户的个人资料外，还获得了签名的JSON Web令牌。以后可以将此令牌发送到您的API，作为用户身份的证明。稍后会有更多信息。

现场演示

请注意，出于安全原因，身份验证将在iFrame中被阻止，请单击右上角以在其自己的选项卡中打开代码框！

如果以某种方式显示代码框或不正常显示，您还可以看到Live Demo here和源代码here。

无密码。IDAPI遵循OAuth2 / OpenID标准，就像Google或Facebook登录一样。然而，由于它是 public api，它更简单，更容易集成，不需要任何特殊授权。

逐步教程

尽管它与大多数其他“与...签名”的客户库兼容，但与之集成的最简单方法是使用@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()方法后，用户将被重定向到无密码。IDUI，该UI将提示其创建一个帐户或登录，然后授权您的应用程序读取您个人资料的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
}

加载页面时，通常执行代码的Chuck。 id()函数将首先查看当前的URL，并尝试在Hash中解析id_token。否则，请求将直接发送到无密码。IDAPI获取该请求（如果用户已登录并以前已授予范围）。

函数始终返回。如果用户被签名并授予了范围，则结果的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"
 }
}

就是这样！您已经签署了用户并阅读了其个人资料！

您可能需要的是签署用户的一种方法。由于无密码。ID是一个集中式身份验证系统，因此被登录或输出会影响使用它的所有网站。因此，您不能强行签署用户。您可以很好地问他们：“您想签约吗？”使用以下行。

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

这将把用户重定向到签名页面，一旦完成（或不执行），返回到当前URL。

现在一切都在那里登录，登录并检索用户。恭喜！为了简洁起见，我们将跳过显示配置文件和其他UI交互的部分。这取决于您可以根据您的网站的风格自定义。

那服务器呢？

上面的示例显示了浏览器侧交互，配置文件信息直接可用。但是，您怎么能相信该信息服务器端呢？这就是响应中的id_token的目的！这是“ Json Web Token”（JWT），是用户身份的签名证明。

id_token是签署的USINGS nosever.ID的秘密私钥，可以使用其public key进行验证。

有两种验证令牌的方法：

在本地使用众多可用的JWT库之一。
通过致电https://api.passwordless.id/openid/validate

这样，您的服务器和API可以确定用户的身份。每个id_token还将根据OpenID标准拥有一个sub字段，该标准是唯一的用户标识符。您也可以请求email作为范围，但请注意，一封电子邮件在无密码中是可选的。

这只是一个“ alpha版本”！

无密码。ID尚未完全准备就绪。这是概念验证阶段。尽管它已经可以用于测试和集成目的，但尚未完全准备好生产。

如果您认为这是一项有意义的公共服务，如果您喜欢本教程，请喜欢并分享！成功的最佳方法是传播并鼓励我们。希望您喜欢它，我很高兴听到您的反馈！