无密码验证：客户端

上一篇文章中，我们用 Go 写了一个 HTTP 服务，用这个服务来做无密码验证 API。今天，我们为它再写一个 JavaScript 客户端。

-- Nicolás Parada

致谢

编译自　|

https://nicolasparada.netlify.com/posts/passwordless-auth-client/

作者　|　Nicolás Parada

译者　|　qhwdw 共计翻译：131篇 贡献时间：250 天

我们继续无密码验证

[1]

的文章。上一篇文章中，我们用 Go 写了一个 HTTP 服务，用这个服务来做无密码验证 API。今天，我们为它再写一个 JavaScript 客户端。

我们将使用这里的

[2]

这个单页面应用程序（SPA）来展示使用的技术。如果你还没有读过它，请先读它。

记住流程：

◈ 用户输入其 email。

◈ 用户收到一个带有魔法链接的邮件。

◈ 用户点击该链接、

◈ 用户验证成功。

对于根 URL（），我们将根据验证的状态分别使用两个不同的页面：一个是带有访问表单的页面，或者是已验证通过的用户的欢迎页面。另一个页面是验证回调的重定向页面。

伺服

我们将使用相同的 Go 服务器来为客户端提供服务，因此，在我们前面的 中添加一些路由：

这个伺服文件放在 下，配合 作为回调。

你可以使用你自己的服务器，但是你得在服务器上启用CORS

[3]

。

HTML

我们来看一下那个 文件。

单页面应用程序的所有渲染由 JavaScript 来完成，因此，我们使用了一个空的 body 部分和一个 文件。

我们将使用上篇文章

[2]

中的 Router。

渲染

现在，我们使用下面的内容来创建一个 文件：

与上篇文章不同的是，我们实现了一个 函数和一个 函数，使用它去渲染两种验证状态的页面。因此，当用户访问 时，它将根据用户是否通过了验证来展示主页或者是欢迎页面。

验证

现在，我们来编写 函数。使用下面的内容来创建一个 文件：

当有人登入时，我们将保存 JSON 格式的 web 令牌、它的过期日期，以及在 上的当前已验证用户。这个模块就是这个用处。

◈ 用于从 获取已认证的用户，以确认 JSON 格式的 Web 令牌没有过期。

◈ 在前面的函数中用于去检查它是否没有返回 。

获取

在继续这个页面之前，我将写一些与服务器 API 一起使用的 HTTP 工具。

我们使用以下的内容去创建一个 文件：

这个模块导出了 和 函数。它们是 API 的封装。当用户是已验证的，这二个函数注入一个 头到请求中；这样服务器就能对我们进行身份验证。

欢迎页

我们现在来到欢迎页面。用如下的内容创建一个 文件：

这个页面使用一个 作为视图。这只是一个输入用户 email 的简单表单。

为了避免干扰，我将跳过错误处理部分，只是将它们输出到控制台上。

现在，我们来写 函数。

它对 发起了 POST 请求，请求体中包含 和 。在本例中它返回 状态码时，我们将创建一个用户。

这个用户创建程序，首先询问用户名，然后使用 email 和用户名做一个 请求到 。成功之后，给创建的用户发送一个魔法链接。

回调页

这是访问表单的全部功能，现在我们来做回调页面。使用如下的内容来创建一个 文件：

请记住……当点击魔法链接时，我们会来到 ，它将把我们重定向到重定向 URI，我们将放在哈希中的 JWT 和过期日期传递给 。

回调页面解码 URL 中的哈希，提取这些参数去做一个 请求到 ，用 JWT 保存所有数据到 中。最后，重定向到主页面。

主页

创建如下内容的 文件：