上一篇文章中,我们用 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 保存所有数据到 中。最后,重定向到主页面。
主页
创建如下内容的 文件:
领取专属 10元无门槛券
私享最新 技术干货