通过使用AWS Amplify的网站登录到Chrome扩展 [英] Login to chrome extension via website with AWS amplify

问题描述

我正在构建一个Chrome扩展，并尝试实现用户登录和注册。我最初在Chrome扩展的弹出部分拥有注册和登录功能，但在研究了一些比较流行的Chrome扩展，如Grammarly和Honey后，我意识到他们使用自己的网站登录和注册用户。出于各种原因，我决定也这么做。

我在我的网站和弹出窗口中都使用了Reaction js。我正在使用AWS-Amplify处理登录、注册和用户会话。当我打开弹出窗口时，我让它在使用await Auth.signIn(email, password);登录我的站点后使用await Auth.currentSession();检查用户会话。然而，这并不管用。我已经阅读了Amplify文档，但找不到答案。我的弹出窗口中有需要访问AWS服务的功能。

如何使用AWS-Amplify通过我的网站登录我的Chrome扩展？

推荐答案

我最终确实弄明白了这一点。我不确定这是否是做这件事的正确方式，但它奏效了。在我的React Web应用程序上使用Amplify登录后，我可以抓取会话并将其发送到Chrome扩展。但是，只有JSONifible对象可以通过扩展消息传递API发送。因此，会话附带的所有功能都会丢失。但是，您可以从可以通过消息传递API发送的信息重建会话。重新构建会话，创建一个新的CognitoUser对象，然后将会话附加到用户。一旦完成，会话将被存储，Amplify将能够使用它。

在Web端。

//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);     
        });

在后台.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.
  }

这篇关于通过使用AWS Amplify的网站登录到Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！