google 使用 angular2 和 typescript 登录 - 从哪里获得 gapi？

Question

我正在尝试通过以下问题使用 google 登录 angular2：

但是我收到一个错误：

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 没有定义 - 我可以理解，因为我似乎只声明了一个空变量。

我目前的代码如下：

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

您是否包含 Google 平台 API 脚本？

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

有关如何在执行代码之前等待 GAPI 脚本加载的说明，请参阅。

Answer 2

将以下文件添加到您的项目结构中以消除错误。

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

这将使 gapi 在您的项目中可用。

Answer 3

我在 Angular v4.0 中也遇到了同样的问题。从 Google 平台 API 脚本 中删除 async defer 解决了我的问题

当我使用 Google 平台 api 时，我的问题如下所示：

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

我通过从 Google 平台 api 中丢弃 async defer 解决了我的问题脚本 如下我的 index.html :

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

Answer 4

我通过在 index.html

中调用以下脚本解决了这个问题

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

注：

在没有 async defer 的情况下使用以下脚本：

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

并在此脚本中使用 async defer

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

google 使用 angular2 和 typescript 登录 - 从哪里获得 gapi？

google sign-in with angular2 and typescript - where to get gapi?

javascript

typescript

angular

google-api-js-client