reactjs - 使用 AWS 放大通过网站登录到 chrome 扩展

Question

我正在构建一个 chrome 扩展，并试图实现用户登录和注册。我最初在我的 chrome 扩展程序的弹出部分中有注册和登录功能，但在检查了一些更流行的 chrome 扩展程序(如 Grammarly 和 Honey)后，我意识到他们使用他们的网站来登录和注册用户。由于各种原因，我决定做同样的事情。

我的网站和弹出窗口都使用 React js。我使用 AWS-Amplify 来处理登录、注册和用户 session 。当我打开弹出窗口时，我使用 await Auth.currentSession(); 检查用户 session 。使用 await Auth.signIn(email, password); 登录我的网站后.但是，这不起作用。我已阅读 Amplify 文档，但找不到答案。我的弹出窗口中有需要访问 AWS 服务的功能。

如何使用 AWS-Amplify 通过我的网站登录到我的 chrome 扩展程序？

Answer 1

我最终弄清楚了这一点。我不确定这是否是执行此操作的“正确方法”，但它有效。在我的 React Web 应用程序上使用 amplify 登录后，我可以获取 session 并将其发送到 chrome 扩展程序。但是，只能通过扩展消息传递 api 发送 JSONifible 对象。因此， session 附带的所有功能都丢失了。但是，您可以根据可以通过消息传递 api 发送的信息重建 session 。您重建 session ，创建一个新的 CognitoUser 对象，然后将 session 附加到用户。完成后， session 将被存储，并且放大将能够使用它。
在网络方面。

//Get the current session from aws amplify
const session = await Auth.currentSession();


const extensionId = 'your_extension_id';

chrome.runtime.sendMessage(extensionID, session,
        function(response) {
            // console.log(response);     
        });

在 background.js 中的扩展端

// This is all needed to reconstruct the session
import {
    CognitoIdToken, 
    CognitoAccessToken, 
    CognitoRefreshToken, 
    CognitoUserSession,
    CognitoUser,
    CognitoUserPool
  } from "amazon-cognito-identity-js";
import {Auth} from "aws-amplify";

//Listen for incoming external messages.
chrome.runtime.onMessageExternal.addListener(
  async function (request, sender, sendResponse) {
    if (request.session) {
      authenticateUser(request.session);;
    } else {
      console.log(request);
    }
    sendResponse("OK")
  });

//Re-build the session and authenticate the user
export const authenticateUser = async (session) => {
    let idToken = new CognitoIdToken({
      IdToken: session.idToken.jwtToken
    });
    let accessToken = new CognitoAccessToken({
        AccessToken: session.accessToken.jwtToken
    });
    let refreshToken = new CognitoRefreshToken({
        RefreshToken: session.refreshToken.token
    });
    let clockDrift = session.clockDrift;
    const sessionData = {
      IdToken: idToken,
      AccessToken: accessToken,
      RefreshToken: refreshToken,
      ClockDrift: clockDrift
    }
    // Create the session
    let userSession  = new CognitoUserSession(sessionData);
    const userData = {
      Username: userSession.getIdToken().payload['cognito:username'],
      Pool: new CognitoUserPool({UserPoolId: YOUR_USER_POOL_ID, ClientId: YOUR_APP_CLIENT_ID})
    }
    
    // Make a new cognito user
    const cognitoUser = new CognitoUser(userData);
    // Attach the session to the user
    cognitoUser.setSignInUserSession(userSession);
    // Check to make sure it works
    cognitoUser.getSession(function(err, session) {
      if(session){
        //Do whatever you want here
      } else {
        console.error("Error", err);
      }
      
    })
    // The session is now stored and the amplify library can access it to do
    // whatever it needs to.
  }