web-dev-qa-db-fra.com

connexion Google avec angular2 et TypeScript - où trouver gapi?

J'essaie d'utiliser Google Sign-in avec angular2 en répondant à la question suivante: Connexion Google pour les sites Web et Angular 2 à l'aide de TypeScript

Mais je reçois une erreur:

ORIGINAL EXCEPTION: ReferenceError: gapi is not defined
ORIGINAL STACKTRACE:
ReferenceError: gapi is not defined
    at LoginAppComponent.ngAfterViewInit (http://localhost:3000/app/login.component.js:33:9)
    at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:46:68)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12169:23)
    at DebugAppView.AppView.detectChangesInternal (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12154:18)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10397:69)
    at eval (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9911:88)

De toute évidence, gapi n'est pas défini - ce que je peux comprendre car il semble que je ne déclare qu'un var vide.

Mon code actuel est comme ci-dessous:

import {Component, NgZone} from "@angular/core";

declare var gapi: any;

@Component({
    selector: "login",
    templateUrl: "templates/login-template.html"
})
export class LoginAppComponent {
  googleLoginButtonId = "google-login-button";
  userAuthToken = null;
  userDisplayName = "empty";

  constructor(private _zone: NgZone) {
    console.log(this);
  }

  // Angular hook that allows for interaction with elements inserted by the
  // rendering of a view.
  ngAfterViewInit() {
    // Converts the Google login button stub to an actual button.
    gapi.signin2.render(
      this.googleLoginButtonId,
      {
        "onSuccess": this.onGoogleLoginSuccess,
        "scope": "profile",
        "theme": "dark"
      });
  }

  // Triggered after a user successfully logs in using the Google external
  // login provider.
  onGoogleLoginSuccess = (loggedInUser) => {
    this._zone.run(() => {
        this.userAuthToken = loggedInUser.getAuthResponse().id_token;
        this.userDisplayName = loggedInUser.getBasicProfile().getName();
    });
}
}

Le modèle se charge bien, il ne s'agit que du bit gapi.

Donc ma question est: qu'est-ce qui me manque? Comment dois-je définir gapi pour que cela fonctionne?

Voici mon code principal app.component:

import { Component } from '@angular/core';
import { LoginAppComponent } from './login.component'

@Component({
  selector: 'my-app',
  template: `<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
            <script>
            window.onLoadCallback = function(){
              gapi.auth2.init({
                  client_id: 'filler_text_for_client_id.apps.googleusercontent.com'
                });
            }
            </script>
             <h1>Angular2 P.O.C.</h1>
             <login></login>`,
  directives: [LoginAppComponent]
})
export class AppComponent { }
javascripttypescriptangulargapi
11
NDevox

Avez-vous inclus le script API de la plate-forme Google?

<script src="https://apis.google.com/js/platform.js"></script>

Voir cette question pour des instructions sur l'attente du chargement du script GAPI avant d'exécuter votre code.

10
rphv

J'ai également eu le même problème dans Angular v4.0. La découpe de async différer du script API de la plate-forme Google a résolu mon problème.

Mon problème était comme ci-dessous lorsque j'ai utilisé l'API de la plate-forme Google comme suit:

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

 enter image description here

J'ai résolu mon problème en supprimant différer async} de le script d'api de la plateforme Google comme ci-dessous dans mon index.html:

<script src="https://apis.google.com/js/platform.js"></script>
5
Amir

Ajoutez le fichier suivant à la structure de votre projet pour supprimer l’erreur.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/gapi/gapi.d.ts

Cela rendra gapi disponible dans votre projet.

0
Nipun Madan

J'ai résolu le problème en appelant le script suivant dans index.html

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

Remarque:

Utilisez le script suivant sans async différer :

<script src="https://apis.google.com/js/platform."></script>

et utilisez async defer dans ce script

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
0
Amuk Saxena