使用 angular2 和 typescript 登录谷歌 - 从哪里获得 gapi？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38664350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google sign-in with angular2 and typescript - where to get gapi?
提问by NDevox
I'm trying to use google sign-in with angular2 by following this question: Google Sign-In for Websites and Angular 2 using Typescript
我正在尝试通过以下问题使用 google sign-in with angular2：Google Sign-In for Websites and Angular 2 using Typescript
But I'm getting an error:
但我收到一个错误：
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)
Evidently gapi isn't defined - which I can understand as I seem to only be declaring an empty var.
显然 gapi 没有定义 - 我可以理解，因为我似乎只是在声明一个空的 var。
My current code is as below:
我目前的代码如下：
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();
});
}
}
The template loads fine, it is just the gapibit.
模板加载良好，只是一gapi点点。
So my question is: what am I missing? How do I need to be defining gapifor it to work?
所以我的问题是：我错过了什么？我需要如何定义gapi它才能工作？
Here is my main app.component code:
这是我的主要 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 { }
采纳答案by rphv
Have you included the Google platform API script?
您是否包含了 Google 平台 API 脚本？
<script src="https://apis.google.com/js/platform.js"></script>
See this questionfor instructions on how to wait for the GAPI script to load before executing your code.
有关如何在执行代码之前等待 GAPI 脚本加载的说明，请参阅此问题。
回答by Amir
I also had same problem in Angular v4.0. Removing async deferfrom the Google platform API scriptsolved my problem
我在Angular v4.0 中也遇到了同样的问题。从Google 平台 API 脚本中删除 async defer解决了我的问题
My Problem was like below when I used Google platform api like :
当我使用 Google 平台 api 时，我的问题如下所示：
<script src="https://apis.google.com/js/platform.js" async defer></script>
I solved my problem by discarding async deferfrom Google platform api scriptas like below in my index.html:
我通过从Google 平台 api 脚本中丢弃async defer解决了我的问题， 如下所示在我的index.html 中：
<script src="https://apis.google.com/js/platform.js"></script>
回答by Amuk Saxena
I solved the issue by calling the following script in index.html
我通过在 index.html 中调用以下脚本解决了这个问题
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
Note:
笔记：
Use the following script without async defer:
使用以下不带async defer 的脚本：
<script src="https://apis.google.com/js/platform."></script>
and use async deferin this script
并在此脚本中使用异步延迟
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
回答by Nipun Madan
Add the following file to your project structure for removing the error.
将以下文件添加到您的项目结构中以消除错误。
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/gapi/gapi.d.ts
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/gapi/gapi.d.ts
This will make gapi available in your project.
这将使 gapi 在您的项目中可用。
