在react SPA中进行魔力链接认证

Question

对于一个面向极少数用户的小程序，我们打算实现魔法链接认证。用户来到应用中，输入自己的邮箱地址，在邮箱地址上得到一个神奇的链接，用户点击链接后，就会登录到应用中。

我无法找到足够的资源来弄清楚如何在SPA中进行。这里有一些有用的链接。

用Node做魔力链接

• https:/medium.com@aleksandrasayssending-magic-links-with-nodejs-765a8686996。
• https:/medium.comone-more-thing-studiohow-to-make-magic-links-with-node-1d164c036e29。

魔法链接与Auth0

• https:/auth0.compasswordless。

这就是我心目中的SPA工作流程。

1. 用户来到SPA
2. SPA将用户带到登录页面，在那里他们可以提供他们的电子邮件地址。
3. SPA将电子邮件地址发送到后端api。
4. api决定用户是否注册，并向他们发送一封带有短暂jwt的邮件。
5. 点击这个链接，用户会进入一个SPA路由，查询参数中包含jwt。
6. 前台将这个jwt转发到api后台，api后台对jwt进行验证，并设置一个cookie。
7. 这个cookie就可以用来维护用户会话。

我想验证一下这个工作流程，但是我找不到足够的资源.具体来说，我想弄清楚，到底是应该把用户发送到SPA，由SPA负责提取jwt并发送给API后台，还是有其他的方法？

是否应该这样实现？对安全有什么影响？

我使用的是 react 和 react-router。

Answer 1

查看这个Reack Hook use-magic-link 以快速地将Magic Link集成到React应用中。

阅读本文了解更多信息。为你的React应用进行简单的认证设置