javascript 使用Google API集成反应组件

Posted 2021-05-03

/* global document, gapi, Promise */

import React, { PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { gapiReady: false, values: {} };
  }
  initGoogleAPI = () => {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/api.js';

    script.onload = () => {
      gapi.load('client:auth2', () => {
        gapi.client
          .init({
            apiKey: '<api-key>',
            clientId: '<cilent-id>',
            discoveryDocs: [
              'https://sheets.googleapis.com/$discovery/rest?version=v4',
            ],
            scope: 'https://www.googleapis.com/auth/spreadsheets',
          })
          .then(() => {
            Promise.resolve(gapi.auth2.getAuthInstance().signIn()).then(() => {
              if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
                this.setState({ gapiReady: true });
              }
            });
          });
      });
    };
    document.body.appendChild(script);
  };
  componentDidMount() {
    this.initGoogleAPI();
  }
  componentDidUpdate() {
    if (this.state.gapiReady) {
      gapi.client.sheets.spreadsheets.values
        .get({
          spreadsheetId: '<spreadsheet-id>',
          range: 'A1:B1',
        })
        .then((response) => {
          this.setState(({ values }) => ({
            ...values,
            values: response.result,
          }));
        });
    }
  }
  render() {
    if (this.state.gapiReady) {
      return (
        <div>
          <h1>GAPI is loaded and ready to use.</h1>
          <pre>{this.state.values}</pre>
        </div>
      );
    }
    return <div>Loading GAPI...</div>;
  }
}

export default App;