Angular 6 中的谷歌身份验证答案

【问题标题】：Google Authentication in Angular 6Angular 6 中的谷歌身份验证
【发布时间】：2018-11-22 00:42:47
【问题描述】：

我在 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>

我启动了应用程序，它运行良好。虽然我在控制台中收到以下错误：

Error that the console displays when i start the application. Basically when i run ng serve --open and open the console window of the application

应用程序运行良好，即单击按钮，会弹出一个谷歌登录屏幕，询问我的谷歌凭据。我输入它们并对其进行验证。

我有 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) 我们导出了 function getAuthServiceConfigs()，然后在 app.module.ts 的 Providers 数组中声明了它。那有什么用呢？

3) 我需要在应用程序启动时呈现谷歌登录屏幕，即不点击按钮。我如何做到这一点？

我尝试调用 ngOnInit() 中的方法：

ngOnInit(){
    this.socialSignIn('google');
}

但屏幕显示为空白

请帮帮我！

【问题讨论】：

标签： angular google-authentication angular6

【解决方案1】：

如果您为 app.module.ts 发布的代码实际上就是您要运行的代码，请注意 getAuthServiceConfigs() {...new GoogleLoginProvider("Your-Google-Client-Id")...} 内的 GoogleLoginProvider() 的构造函数希望您使用您的 Google 客户端 ID 填充它。

更具体地说，请注意客户端 ID 类似于 YOUR_CLIENT_ID.apps.googleusercontent.com，其中 YOUR_CLIENT_ID 将是由 Google API 控制台提供给您的一长串数字和数字。整个字符串 YOUR_CLIENT_ID.apps.googleusercontent.com 必须再次提供给 GoogleLoginProvider() constructor....，并将 YOUR_CLIENT_ID 替换为您在 Google API 控制台中的网站客户端 ID。

如果您需要从 Google 获取客户端 ID，可以点击以下链接并点击蓝色的 CONFIGURE A PROJECT 按钮：https://developers.google.com/identity/sign-in/web/sign-in

我希望这会有所帮助。最良好的祝愿。

【讨论】：

是的，我已经添加了我在配置项目时收到的客户端 ID。仍然显示错误错误：未捕获（承诺中）：TypeError：无法读取未定义的属性'signIn' TypeError：无法读取angular-6-social-login.umd.js：250处未定义的属性'signIn'
Rahul 你能找到解决方案吗？

【解决方案2】：

这里的问题是这样的

ngOnInit(){
 this.socialSignIn('google');
}

SigninComponent 中注入的socialAuthService 在ngOnInit() 上不可用。你可以在Difference between Constructor and ngOnInit查看更多内容

因为我在 app.component.html 上看到了一个按钮。如果您尝试模拟鼠标点击，我建议您使用适当的Lifecycle Hooks

另外，删除app.component.ts 中的FacebookLoginProvider 和LinkedInLoginProvider，因为app.module.ts 中没有导入也没有提及

【讨论】：