angular - Angular 6 中的谷歌身份验证
问题描述
我在 angular 6 中创建了一个项目,该项目使用angular-6-social-login展示谷歌身份验证。以下是安装命令:
npm install --save angular-6-social-login
在此之后,我对app.module.ts文件进行了以下更改:
import {SocialLoginModule,AuthServiceConfig,GoogleLoginProvider} from "angular-6-social-login";
// Configs
export function getAuthServiceConfigs() {
let config = new AuthServiceConfig(
[
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Your-Google-Client-Id")
}
];
);
return config;
}
@NgModule({
imports: [
...
SocialLoginModule
],
providers: [
...
{
provide: AuthServiceConfig,
useFactory: getAuthServiceConfigs
}
],
bootstrap: [...]
})
export class AppModule { }
app.component.ts中的以下更改:
import {Component, OnInit} from '@angular/core';
import {
AuthService,
GoogleLoginProvider
} from 'angular-6-social-login';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
constructor( private socialAuthService: AuthService ) {}
public socialSignIn(socialPlatform : string) {
let socialPlatformProvider;
if(socialPlatform == "facebook"){
socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
}else if(socialPlatform == "google"){
socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
}else if (socialPlatform == "linkedin") {
socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
}
this.socialAuthService.signIn(socialPlatformProvider).then(
(userData) => {
console.log(socialPlatform+" sign in data : " , userData);
// Now sign-in with userData
// ...
}
);
}
}
以下是我的app.component.html
<button (click)="socialSignIn('google')">Sign in with Google</button>
我启动了应用程序,它运行良好。虽然我在控制台中收到以下错误:
启动应用程序时控制台显示的错误。基本上当我运行 ng serve --open 并打开应用程序的控制台窗口
该应用程序运行良好,即单击按钮,会弹出一个谷歌登录屏幕,询问我的谷歌凭据。我输入它们并对其进行验证。
我有 3 个问题或更确切地说是怀疑:1)为什么会出现该错误?
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'signIn'
of undefined
TypeError: Cannot read property 'signIn' of undefined
at angular-6-social-login.umd.js:250
at new ZoneAwarePromise (zone.js:891)
at GoogleLoginProvider.push../node_modules/angular-6-social-login/angular-6-
social-login.umd.js.GoogleLoginProvider.signIn (angular-6-social-
login.umd.js:249)
2) 我们导出了函数 getAuthServiceConfigs()并在app.module.ts的 Providers 数组中声明了它。那有什么用?
3)我需要在应用程序启动时呈现谷歌登录屏幕,即不点击按钮。我如何做到这一点?
我尝试在 ngOnInit() 中调用该方法:
ngOnInit(){
this.socialSignIn('google');
}
但屏幕显示为空白
请在这件事上给予我帮助!
解决方案
这里的问题是
ngOnInit(){
this.socialSignIn('google');
}
注入socialAuthService
的SigninComponent
不适用于ngOnInit()
。您可以在 Constructor 和 ngOnInit 之间的差异中看到更多信息
因为我在 app.component.html 上看到了一个按钮。如果您尝试模拟鼠标点击,我建议您使用适当的Lifecycle Hooks
另外,删除FacebookLoginProvider
和LinkedInLoginProvider
输入,app.component.ts
因为没有进口,也没有提及app.module.ts
推荐阅读
- jetty - Jetty 不接受来自 realm.properties 的密码
- java - 同步 REST 端点以等待 2 个具有相同参数的调用
- r - 为多个数据框的图形制作手动键(ggplot2)
- three.js - 在 ThreeJS 中从 3D 橱柜中减去 3D 水槽
- javascript - 将一个字段的值复制到另一个字段(ACF - 高级自定义字段)Wordpress
- json - 在 activiti bpmn 中解析 JSON 字符串
- mongodb - 对象上的 MongoDB 部分匹配
- php - 图像数据未注册
- processing - 如何将 mousePressed 与 2D 数组一起使用
- bash - 如何将不同的值(包括存储在变量中的空格分隔字符串)传递给 grep 命令