По примеру из
документации Гугла я написал такой скрипт. То бишь переписал его в 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 как доверенный адрес но теперь то у меня приложение открывает файл а не ссылку. Но может я ошибаюсь, а если нет то не знаю как фиксить.
Кто нибудь может знает в чем дело?