javascript - 为什么 Google Auth 在构建 Electron 后会出错？

Question

我在Google 文档的 React/Electron 应用程序中编写了这段代码

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";

import s from "./index.module.scss";

class AuthPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      CLIENT_ID:
       CLIENT_ID,
      API_KEY: API_KEY,
      DISCOVERY_DOCS: [
        "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
      ],
      SCOPES: "https://www.googleapis.com/auth/drive.metadata.readonly",
      googleAuth: null,
      isLogged: false,
      loginInProcess: true,
    };
  }

  componentDidMount() {
    const script = document.createElement("script");
    script.onload = () => this.handleClientLoad();
    script.src = "https://apis.google.com/js/api.js";
    document.body.appendChild(script);
  }

  signIn() {
    const { googleAuth } = this.state;
    googleAuth.signIn();
    this.updateSigninStatus();
  }

  signOut() {
    const { googleAuth } = this.state;
    googleAuth.signOut().then(() => this.updateSigninStatus());
    // eslint-disable-next-line no-restricted-globals
    window.location.replace("/");
  }

  updateSigninStatus() {
    this.setState({
      isLogged: window.gapi.auth2.getAuthInstance().isSignedIn.get(),
      loginInProcess: false,
    });

    // this.listFiles();
  }

  handleClientLoad() {
    window.gapi.load("client:auth2", () => this.initClient());
  }

  initClient() {
    const { API_KEY, CLIENT_ID, DISCOVERY_DOCS, SCOPES } = this.state;

    window.gapi.client
      .init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        scope: SCOPES,
        discoveryDocs: DISCOVERY_DOCS,
        ux_mode: "redirect",
      })
      .then(() => {
        this.setState(
          {
            googleAuth: window.gapi.auth2.getAuthInstance(),
          },
          () => {
            window.gapi.auth2
              .getAuthInstance()
              .isSignedIn.listen(this.updateSigninStatus());
          }
        );
      });
  }

  // eslint-disable-next-line class-methods-use-this
  listFiles() {
    window.gapi.client.drive.files
      .list({
        pageSize: 10,
        fields: "nextPageToken, files(id, name)",
      })
      .then(() => {});
  }

  render() {
    const { isLogged, loginInProcess } = this.state;
    return (
      <>
        <Backdrop className={s.backdrop} open={loginInProcess}>
          <CircularProgress color="inherit" />
        </Backdrop>

        {!loginInProcess && !isLogged && (
          <Button variant="contained" onClick={() => this.signIn()}>
            вход
          </Button>
        )}
        {!loginInProcess && isLogged && (
          <Button
            variant="contained"
            color="primary"
            onClick={() => this.signOut()}
          >
            выход
          </Button>
        )}
      </>
    );
  }
}

export default AuthPage;

这里的问题是，当我运行应用程序的开发构建时，一切正常，但是如果我运行构建脚本然后运行组装的应用程序，那么什么都不会起作用，只显示一个错误

无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“file://”）与收件人窗口的来源（“null”）不匹配。

谷歌搜索这个错误没有给出任何结果。

我怀疑在 Google OAuth 设置中我将 localhost:3000 指定为受信任的地址，但现在我的应用程序打开的是文件而不是链接。但也许我错了，但如果不是，那么我不知道如何解决它。

标签： javascriptreactjsgoogle-drive-apielectrongoogle-authentication