gapi ist beim Laden nicht definiert Reagieren Komponente

Question

Ich versuche, Google Anmelden (link) mit React zu integrieren.
Ich habe eine Frage gefunden, die dies in der Vergangenheit Using google sign in button with react 2

gelöst hat Ich replizierte die gleichen Schritte wie erwähnt. In meinem index.html ich

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script> 
    <script type="text/javascript"> 
     function triggerGoogleLoaded() { 
      console.log("google event loaded"); 
      window.dispatchEvent(new Event('google-loaded')); 
     } 
    </script> 

Dann ist mein Component sieht aus wie

var LoginButton = React.createClass({ 

    onSignIn: function(googleUser) { 
     console.log("user signed in"); // plus any other logic here 
    }, 

    renderGoogleLoginButton: function() { 
     console.log('rendering google signin button'); 
     gapi.signin2.render('my-signin2', { 
      'scope': 'https://www.googleapis.com/auth/plus.login', 
      'width': 200, 
      'height': 50, 
      'longtitle': true, 
      'theme': 'light', 
      'onsuccess': this.onSignIn 
     }) 
    }, 

    componentDidMount: function() { 
     window.addEventListener('google-loaded',this.renderGoogleLoginButton); 
    }, 

    render: function() { 
     let displayText = "Sign in with Google"; 
     return (
      <div class="g-signin2" data-onsuccess="onSignIn"></div> 
     ); 
    } 

}); 

export default LoginButton; 

Wenn ich das Programm mit yarn start laufen, ich

/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js 
    11:9 error 'gapi' is not defined        no-undef 
    26:13 warning 'displayText' is assigned a value but never used no-unused-vars 

✖ 2 problems (1 error, 1 warning) 

Der vollständige Quellcode bei https://github.com/hhimanshu/google-login-with-react verfügbar bekommen ist

Coul d jemand bitte hilf mir meinen Fehler zu verstehen?

Dank

Answer 1

Es sieht für mich wie Sie die Google APIs als Script-Tag einlegen, die wir window.gapi auf den Google-API zu setzen erwarten würden. Sie führen dann jedoch eslint oder einen anderen Checker, und das hat keine Ahnung, dass window.gapi existieren soll. Es schlägt fehl, weil Sie sehen, dass Sie eine nicht deklarierte Variable verwenden.

Eine billige Lösung ist Eslint zu sagen, dass Sie wissen, was Sie tun;

/* global gapi */ 

am Anfang der Datei und eslint Setzen Sie diese gapi als ein bekannten globalen Variable behandeln.

Answer 2

Das funktionierte für mich. Legen Sie es in componentDidMount oder Konstruktor:

componentDidMount() { 
    gapi.load('auth2',() => { 
     // Retrieve the singleton for the GoogleAuth library and set up the client. 
     this.auth2 = gapi.auth2.init({ 
      client_id: '436676563344-.apps.googleusercontent.com', 
      cookiepolicy: 'single_host_origin', 
     }); 

     this.auth2.attachClickHandler(this.refs.googleButton, {}, 
      (googleUser) => { 
       this.googleLogin(googleUser.getBasicProfile()); 
      }, (error) => { 

      }); 
    }); 
}