Google认证在Angular 6中的应用

我已经在angular 6中创建了一个项目，它展示了使用google的身份验证。以下是安装命令：

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> 

2） 我们已经导出了函数getAuthServiceConfigs（），后来在app.module.ts的Providers数组中声明了它。那有什么用

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

我尝试在ngOnInit（）中调用该方法：

但屏幕显示为空白

---

请帮我做这个

如果您为app.module.ts发布的代码实际上就是您试图运行的代码，请注意

getAuthServiceConfigs（）{…new GoogleLoginProvider（“您的Google客户端Id”）…}

中的

GoogleLoginProvider（）

的构造函数希望您使用您的Google客户端Id填充它

更具体地说，请注意，客户端ID类似于

YOUR_client_ID.apps.googleusercontent.com

，其中

YOUR_client_ID

将是Google API控制台提供给您的一长串数字和数字。必须将整个字符串

您的\u CLIENT\u ID.apps.googleusercontent.com

提供给

GoogleLoginProvider（）构造函数

。。。。同样，从Google API控制台将

您的客户机ID

替换为您的网站客户机ID

如果您需要从Google获得客户ID，您可以按照以下链接并单击蓝色的“配置项目”按钮：

我希望这有帮助。

---

最好的祝愿。

这里的问题是

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

SigninComponent

的注入式

socialAuthService

在

ngOnInit（）

上不可用。你可以从中看到更多

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

---

另外，在

app.component.ts

中删除

FacebookLoginProvider

和

LinkedInLoginProvider

，因为在

app.module.ts

中没有导入和提及，所以我添加了配置项目时收到的客户端id。它仍然显示错误错误：Uncaught（承诺中）：TypeError：无法读取未定义类型的属性'signIn'。错误：无法读取angular-6-social-login.umd.js:250Rahul上未定义类型的属性'signIn'。你能找到解决方案吗？

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

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