reactjs - 如何在 Chrome 扩展程序中启用“使用 Google 登录”？

Question

我已经浏览过这份文档

https://cloud.google.com/identity-platform/docs/web/chrome-extension

但是，我不知道如何将扩展程序链接添加到授权域。

这是我的ma​​nifest.json

{
  "manifest_version": 2,
  "name": "AppName",
  "description": "This official AppName Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "AppName"
  },
  "icons": {
    "16": "icon1.png",
    "48": "icon1.png",
    "128": "icon1.png"
  },
  "content_security_policy": "script-src 'self' 'sha256-kFv4LNofhwVLOIwHReYGCRy3S9dD6iHKsyMST3uabnU='; object-src 'self'",
  "permissions": [
    "storage"
  ]
}

我已经更喜欢 https://stackoverflow.com/a/44987478/12318562但这对我没有更多帮助。

Answer 1

我遇到了类似的问题，这是我的解决方法，

manifest.json

{
  "manifest_version": 2,
  "name": "AppName",
  "description": "This official AppName Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "AppName"
  },
  "icons": {
    "16": "icon1.png",
    "48": "icon1.png",
    "128": "icon1.png"
  },
  "background": {
    "scripts": [
      "./background.js"
    ],
    "persistent": false
  },
  "oauth2": {
    "client_id": "YOUR_CLIENT_ID",
    "scopes": [
       "openid", "email", "profile"
    ]
 },
  "content_security_policy": "script-src 'self' 'sha256-kFv4LNofhwVLOIwHReYGCRy3S9dD6iHKsyMST3uabnU='; object-src 'self'",
  "permissions": [
    "storage",
    "identity",
    "*://*.google.com/*"
  ]
}




background.js

let user_signed_in = false;

const CLIENT_ID = "YOUR_CLIENT_ID"
const RESPONSE_TYPE = encodeURIComponent('token')
const REDIRECT_URI = chrome.identity.getRedirectURL("oauth2");
const STATE = encodeURIComponent('jsksf3')
const SCOPE = encodeURIComponent('openid')
const PROMPT = encodeURIComponent('consent')

function create_oauth() {

  let auth_url = `https://accounts.google.com/o/oauth2/v2/auth?`

  var auth_params = {
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT_URI,
    response_type: 'token',
    scope: "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid",
  };

  const url = new URLSearchParams(Object.entries(auth_params));
  url.toString();
  auth_url += url;

  return auth_url;
}

function is_user_signedIn() {
  return user_signed_in;
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

  if (request.message === 'login') {

    if (user_signed_in) {
      return;
    } else {
      chrome.identity.launchWebAuthFlow({
        url: create_oauth(),
        interactive: true
      }, function (redirect_uri) {
        sendResponse('success')
      })
    }
  }
})