logowanie google za pomocą angular2 i maszynopisu - gdzie uzyskać gapi?

Question

Próbuję użyć google logowania z angular2 przez następujące pytanie: Google Sign-In for Websites and Angular 2 using Typescript

Ale ja dostaję błąd:

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) 

Widocznie GAPI nie jest określony - co mogę zrozumieć jak wydaje się być tylko deklarując pusty var.

Mój obecny kod jest jak poniżej:

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(); 
    }); 
} 
} 

Obciążenia szablon w porządku, to jest po prostu gapi bit.

Moje pytanie brzmi: czego mi brakuje? Jak muszę zdefiniować, aby to działało?

Tu jest mój główny kod 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 { } 

Answer 1

Czy dołączono skryptu Google platforma API?

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

Zobacz this question instrukcje dotyczące czekać na załadowanie skryptu GAPI przed wykonaniem kodu.

Ostatnie pytanie

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Powiązane problemy

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.