logo标签列表

魔术链接身份认证在React单页应用中的应用

reactjssecurityauthenticationreact-routerauthorization
4

针对一款服务于极小用户群的小型应用程序，我们计划实现魔术链接身份验证。用户将进入应用程序，输入他们的电子邮件地址，在该地址上获取一个魔术链接，当用户单击该链接后，他们将登录应用程序。

我找不到足够的资源来了解如何在SPA中执行此操作。以下是一些有用的链接：

使用Node实现魔术链接

魔法链接与Auth0 以下是我心目中的SPA工作流程：
  1. 用户访问SPA
  2. SPA将用户带到登录页面，用户可以提供他们的电子邮件地址。
  3. SPA将电子邮件地址发送到后端API。
  4. API决定用户是否注册，并向其发送一个短暂的jwt。
  5. 点击此链接会将用户带到带有查询参数中的SPA路由。
  6. 前端将此jwt转发给API后端，API后端验证jwt并设置cookie。
  7. 然后可以使用此cookie来维护用户会话。
我想验证这个工作流程，但我找不到足够的资源。 具体而言，我想澄清魔术链接是否应将用户发送到SPA，由SPA负责提取jwt并将其发送到API后端，还是有其他方法可以实现？ 这是应该如何实现的？安全性方面有什么影响？ 我正在使用react和react-router。
3个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
1

Cotter的联合创始人在此。

我们为React提供了一个超级简单的魔术链接集成。以下是设置React应用程序的简单魔术链接登录的指南。

您可以通过以下2个步骤集成魔术链接登录：

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。 完成！现在你应该拥有一个发送魔术链接给用户的电子邮件登录表单。 这里是一个工作示例。

响应

用户点击链接后 (步骤 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步）
  1. 验证access_token（JWT令牌）是否有效。
  2. 如果有效，则可以注册用户（如果电子邮件未被识别，还应将电子邮件与Cotter的用户ID关联）。
  3. 您可以使用access_token访问所有API端点，或者您可以生成自己的会话并设置cookie。
0

这是魔法链接的工作流程：

当用户输入电子邮件地址时，Magic会向该电子邮件地址发送验证链接以验证该电子邮件。当您单击“确认您的电子邮件”时，将显示一个模态框以登录应用程序。当用户单击“登录到应用程序”时，将生成并存储公共+私有密钥在浏览器上。这意味着用户拥有自己的身份。此密钥对嵌入式iframe中，无法访问开发人员，以保护用户的私钥。

由于这些密钥是在用户客户端上生成而不是在magic服务器上生成的，因此Magic将无法查看这些密钥。

Magic SDK将使用该私钥生成auth token。此auth token称为DID token（分散式标识符）。解码此令牌后，您可以查看用户的电子邮件地址以及发行时间。本质上，DID令牌是您的数字签名。如果我们将此令牌存储在我们的数据库中，并且如果我们的数据库被黑客攻击，恶意用户将无法访问我们的私钥。然后，我们将此DID令牌传递给服务器以检查用户

Magic将用户的电子邮件和ID存储在indexedDb中。它还为自己存储一些cookie，以正常运行

要使用魔法，您需要使用 magic-sdk。您可以设置魔法客户端 ✨

import { Magic } from "magic-sdk";

const createMagic = () => {
  return (   
    new Magic(process.env.API_KEY)
  ); 
};

export const magic = createMagic();

然后使用这个客户端：

// 你已经输入并捕获了电子邮件 if (email) { 尝试 {

  // this store public/private key on browser and returns the DID token
  const didToken = await magic.auth.loginWithMagicLink({
    email,
  });

  if (didToken) {
  // once you have the token, using metadata, you can add another propertis
 // iat, exp, roles etc
 // then sign this with jwt
 // store the token in browser
  }
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，