web-dev-qa-db-fra.com

"Impossible de lire la propriété 'load' d'undefined"

J'essaie de suivre this documentation à intégrer à la connexion de Google, bien que je rencontre une erreur dans la console:

Uncaught TypeError: Cannot read property 'load' of undefined
at script.js:1

script.js:

window.gapi.load('auth2', function() {
    console.log('Loaded!');
});

Je reçois l’erreur environ la moitié du temps et lors de l’inspection du panneau de réseau dans Chrome, cela ne se produit que lorsque la ressource suivante est pas chargée:

https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.d2dliHDvPwE.O/m=auth2/exm=signin2/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNGAKhVlpzmTUpjFgzBXLpLM_oEFg/cb=gapi.loaded_1

Comment puis-je éliminer cette erreur?

Si c'est utile, voici mon index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Google Sign In Test</title>
        <meta name="google-signin-client_id" content="*****.apps.googleusercontent.com">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <script src="script.js" async defer></script>
    </head>
    <body>
        <div class="g-signin2" data-onsuccess="onSignIn"></div>
    </body>
</html>
javascriptgoogle-signingooglesigninapi
5
Bennett

Essayez d'ajouter un événement onload à la balise de script. Alors changez votre tag script en

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

Enveloppez ensuite votre code dans la fonction de rappel.

6
thewolff

Ajoutez le paramètre onload au lien, comme dans les documents: Google Sign in Documents

Si vous le faites en html/js pur, vous pouvez simplement ajouter cet extrait à la balise head.

    <script src="https://apis.google.com/js/platform.js?onload=myFunc" async defer></script>
    <script>
    function init() {
      gapi.load('auth2', function() { // Ready. });
    }
    </script>

Si vous voulez charger gapi dans une application de réaction (par exemple, create-react-app), essayez d'ajouter ceci à un composant:

loadGapiAndAfterwardsInitAuth() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/platform.js";
    script.async = true;
    script.defer = true;
    script.onload=this.initAuth;
    const meta = document.createElement("meta");
    meta.name="google-signin-client_id";
    meta.content="%REACT_APP_GOOGLE_ID_OF_WEB_CLIENT%";
    document.head.appendChild(meta);
    document.head.appendChild(script);
}

 initAuth() {
    window.gapi.load('auth2', function () {
      window.gapi.auth2.init({
        client_id: "%REACT_APP_GOOGLE_ID_OF_WEB_CLIENT%";
      }).then(googleAuth => {
        if (googleAuth) {
          if (googleAuth.isSignedIn.get()) {
            const googleUser = googleAuth.currentUser.get();
            // do something with the googleUser
          }
        }
      })
    });
  }
1
GA1