无密码验证:客户端

上一篇文章中,我们用 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 保存所有数据到 中。最后,重定向到主页面。

主页

创建如下内容的 文件:

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180712B0WLVB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券