web-dev-qa-db-fra.com

gapi n'est pas défini lors du chargement React Component

J'essaie d'intégrer Google Sign In ( link ) à l'aide de React.
J'ai trouvé une question qui a résolu cela dans le passé tilisation du bouton de connexion Google avec React 2

J'ai reproduit les mêmes étapes que celles mentionnées. Dans mon index.html Je fais

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

Alors mon Component ressemble

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;

Lorsque j'exécute le programme à l'aide de yarn start, Je reçois

/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)

Le code source complet est disponible sur https://github.com/hhimanshu/google-login-with-react

Quelqu'un pourrait-il m'aider à comprendre mon erreur?

Merci

javascriptreactjsgoogle-signin
13
daydreamer

Il me semble que vous chargez les API Google en tant que balise de script, que nous nous attendons à définir window.gapi à l'API Google. Cependant, vous exécutez alors eslint ou un autre vérificateur, et cela n'a aucune idée que window.gapi est censé exister. Il échoue car il vous voit utiliser une variable non déclarée.

Une solution bon marché consiste à dire à Eslint que vous savez ce que vous faites;

/* global gapi */

Mettez ceci en haut de votre fichier et eslint traitera gapi comme une variable globale connue.

13
Steve Cooper

Cela a fonctionné pour moi. Mettez-le dans componentDidMount ou constructeur:

componentDidMount() {
    window.gapi.load('auth2', () => {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        this.auth2 = window.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) => {

            });
    });
}
4
Giang Le

Assurez-vous que vous n'utilisez pas async defer, ce qui entraînera des conditions de concurrence critique entre window.gapi.someMethod () et le chargement de votre script

En bref, supprimez async defer de votre balise de script dans votre index.html.

avant

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>

après

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded"></script>
0
Yang

Vous pouvez également essayer le package gapi-script , ce package fournit instantanément le gapi, vous n'avez donc pas à attendre un script pour le charger, il suffit de l'importer et d'utiliser:

import { gapi } from 'gapi-script';
0
Lucas Andrade