为什么在构建Electron后Google Auth会出现错误？

问题描述

我通过Google docs

在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;

这里的问题是，当我运行应用程序的dev build时，一切正常，但是如果我运行build脚本，然后运行组装的应用程序，则将无法正常工作，只会显示错误

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

谷歌搜索此错误无济于事。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）