谷歌登錄與angular2和打字稿 - 在哪裏得到gapi？

Question

我想通過以下這個問題，使用谷歌帳戶登錄的同時angular2：Google Sign-In for Websites and Angular 2 using Typescript

但我發現了一個錯誤：

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) 

顯然GAPI沒有定義 - 這我能理解因爲我似乎只聲明一個空的var。

我當前的代碼如下：

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

模板加載罰款，它只是gapi位。

所以我的問題是：我缺少什麼？我該如何定義gapi才能正常工作？

這裏是我的主要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

你已經包括了谷歌平臺API的腳本？

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

有關如何等待GAPI腳本執行代碼之前加載說明，請參閱this question。

最新問題

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

 相關問題

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