Аутентификация Google в Angular 6 - PullRequest
Новая
       22

Аутентификация Google в Angular 6

0 голосов
/ 12 июня 2018

Я создал проект в angular 6, который показывает аутентификацию Google, используя 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 и открываю консольное окно приложения

Приложение работает нормально, то есть по нажатию кнопки, появляется окно входа в систему Google, спрашивая меня о моемучетные данные Google.Я ввожу их, и это подтверждает подлинность.

У меня 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 () и позже объявили ее в массиве Providers в app.module.ts .Какая польза от этого?

3) Мне нужно визуализировать экран входа в Google при запуске приложения, т.е. без нажатия кнопки.Как мне этого добиться?

Я пытался вызвать метод в ngOnInit (): 

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

, но на экране ничего не отображается

Пожалуйста, помогите мне с этим!

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Проблема здесь в следующем: 

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

Введенный socialAuthService из SigninComponent недоступен на ngOnInit().Вы можете увидеть больше в Разница между Конструктором и ngOnInit

Поскольку я вижу кнопку на app.component.html.Если вы пытаетесь смоделировать щелчок мыши, я бы предложил использовать соответствующие Lifecycle Hooks

Кроме того, удалите FacebookLoginProvider и LinkedInLoginProvider в app.component.ts, так как нет импорта и нетупоминание в app.module.ts

0 голосов
/ 04 июля 2018

Если код, который вы опубликовали для app.module.ts, является буквально тем, что вы пытаетесь запустить, обратите внимание, что конструктор для GoogleLoginProvider() в getAuthServiceConfigs() {...new GoogleLoginProvider("Your-Google-Client-Id")...} ожидает, что вы заполните его своим идентификатором клиента Google.

В частности, обратите внимание, что идентификатор клиента будет выглядеть примерно так: YOUR_CLIENT_ID.apps.googleusercontent.com, где YOUR_CLIENT_ID будет длинным списком цифр и чисел, предоставленных вам консолью Google API.Вся эта строка YOUR_CLIENT_ID.apps.googleusercontent.com должна быть передана GoogleLoginProvider() constructor .... снова, с YOUR_CLIENT_ID, замененным идентификатором клиента вашего веб-сайта из консоли API Google.

Если вам нужно получить клиентаИдентификатор из Google, вы можете перейти по следующей ссылке и нажать синюю кнопку НАСТРОИТЬ ПРОЕКТ: https://developers.google.com/identity/sign-in/web/sign-in

Надеюсь, это поможет.С наилучшими пожеланиями.

...