đăng nhập bằng google bằng angular2 và bản in - nơi để lấy gapi?

Question

Tôi đang cố gắng sử dụng google đăng nhập với angular2 bằng cách làm theo câu hỏi này: Google Sign-In for Websites and Angular 2 using Typescript

Nhưng tôi nhận được một lỗi:

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) 

Rõ ràng GAPI không được định nghĩa - mà tôi có thể hiểu được như tôi dường như chỉ tuyên bố một var trống.

mã hiện tại của tôi là như sau:

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

Mẫu tải tốt, nó chỉ là chút gapi.

Vì vậy, câu hỏi của tôi là: tôi đang thiếu gì? Làm thế nào để tôi cần xác định gapi để nó hoạt động?

Đây là mã app.component chính của tôi:

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

Bạn đã bao gồm kịch bản nền tảng Google API?

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

Xem this question để biết hướng dẫn cách đợi tập lệnh GAPI tải trước khi thực thi mã của bạn.

Câu hỏi mới nhất

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

 Các vấn đề liên quan

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