reactjs - react SPA中的魔术链接身份验证

Question

对于迎合极少数用户的小型应用程序，我们计划实现魔术链接身份验证。用户会来到应用程序，输入他们的电子邮件地址，在电子邮件地址上获得一个魔术链接，在用户点击链接后，他们登录到应用程序。

我找不到足够的资源来弄清楚如何在 SPA 中做到这一点。以下是一些有用的链接:

与节点的魔术链接

https://medium.com/@aleksandrasays/sending-magic-links-with-nodejs-765a8686996

https://medium.com/one-more-thing-studio/how-to-make-magic-links-with-node-1d164c036e29

与 Auth0 的魔术链接

https://auth0.com/passwordless

这是我想到的 SPA 工作流程:

用户来到SPA

SPA 将用户带到登录页面，他们可以在其中提供他们的电子邮件地址。

SPA 将电子邮件地址发送到后端 api

api 决定用户是否注册，并向他们发送一封带有短暂 jwt 的电子邮件。

单击此链接会将用户带到查询参数中带有 jwt 的 SPA 路由。

Frontend把这个jwt转发给api backend，api backend验证jwt并设置cookie

然后可以使用此 cookie 来维护用户 session 。

我想验证此工作流程，但找不到足够的资源。
具体来说，我想澄清一下魔术链接是否应该将用户发送到SPA，SPA应该负责提取jwt并将其发送到API后端，还是有其他方法可以做到？

这是应该如何实现？有什么安全影响？

我正在使用 react 和 react 路由器。

Answer 1

Cotter联合创始人在这里。
我们为 React 提供了一个 super 简单的魔术链接集成。这是设置 Simple Magic Link Login for your React App 的指南.
您可以分两步集成魔术链接登录:
1.添加依赖

yarn add cotter

2. 显示登录表单
(流程中的第 2-4 步)

import React, { useEffect } from "react";
import Cotter from "cotter"; //  1️⃣  Import Cotter

function App() {
  useEffect(() => {
    //  2️⃣ Initialize and show the form
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
    cotter
      .signInWithLink() // use Magic link
      .showEmailForm() // show email login form
      .then(resp => console.log(resp))
      .catch(err => console.log(err));
  }, []);

  return (
    // 3️⃣  Put a <div> with id "cotter-form-container"
    // that will contain the form
    <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
  );
}

export default App;

您可以创建您的 API_KEY_ID here .
完毕!现在您应该有一个电子邮件登录表单，可以向您的用户发送一个神奇的链接。 Here's a working example .
响应
用户单击链接(第 5 步)后，您将在 then((resp) => console.log(resp)) 中收到以下响应。 :

{
    "email": "youremail@gmail.com",
    "oauth_token": {
        "access_token": "eyJhbGciONiIsImtiJFUzI1pZCI6...",
        // you'll also get a refresh token and an id token
    },
    "user": {
        "ID": "abcdefgh-1234-5678-1234-f17786ed499e", // Cotter's User ID
        // More user information
    }
}

然后，您可以将此响应发送到您的后端服务器并执行以下步骤:(流程中的步骤 6-7)

验证是否 access_token (JWT token )有效。

如果它有效，您可以在无法识别电子邮件的情况下注册用户(您还应该将电子邮件与 Cotter 的用户 ID 相关联)。

您可以使用 access_token适用于所有 API 端点，或者您可以生成自己的 session 并设置 cookie