@bpGusar
*spoiler*

Почему может не работать Google Auth в Electron после сборки?

По примеру из документации Гугла я написал такой скрипт. То бишь переписал его в React вид

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 сборку приложения то всё прекрасно работает, но если я запущу билд скрипт и потом запущу собранное приложение то ничего работать не будет и показывается только лишь ошибка

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').


Гугление этой ошибки ничего не дало.

Я подозреваю в том что в настройках Google OAuth я указал localhost:3000 как доверенный адрес но теперь то у меня приложение открывает файл а не ссылку. Но может я ошибаюсь, а если нет то не знаю как фиксить.

Кто нибудь может знает в чем дело?
  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы