Смотри, в данном контексте все очень сильно зависит от поставленной задачи. Например, у нас есть внутренние системы, которые привязаны к Google аккаунту и пользователь в принципе не может увидеть приложение пока не авторизуется.
Я тебе покажу, как это реализовано у меня, ты можешь просто взять код и переделать его под свои нужды, ибо здесь нет никаких лучших практик, только trade-off'ы.
Во-первых нам нужны определения типов для удобной работы с Google библиотеками:
yarn add -D @types/{gapi,gapi.auth2,gapi.plus}
К сожалению компилятор видит это просто как глобальный тип, но не как свойство window
, для этого создаем файл typings.d.ts
в папке src
наравне с main.ts
:
declare interface Window {
gapi: typeof gapi;
}
Все, gapi
нам доступно в свойстве window
.
У меня есть GapiService
который занимается инициализацией Google объектов:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { mergeMapTo, shareReplay, mergeMap } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class GapiService {
private config: gapi.auth2.ClientConfig = {
scope: 'profile',
ux_mode: 'redirect',
redirect_uri: location.origin
};
private googleAuthObject$ = this.loadGapiAuth2Library().pipe(
mergeMapTo(this.initializeAuth2()),
mergeMapTo(this.loadGapiPlusLibrary()),
mergeMapTo(this.waitForTheGoogleAuthObjectInitializationComplete()),
shareReplay(1)
);
public getGoogleAuthObject(): Observable<gapi.auth2.GoogleAuth> {
return this.googleAuthObject$;
}
public signIn(): Observable<unknown> {
return this.googleAuthObject$.pipe(mergeMap(googleAuth => googleAuth.signIn()));
}
private loadGapiAuth2Library() {
return new Observable<void>(observer => {
window.gapi.load('auth2', () => {
observer.next();
observer.complete();
});
});
}
private loadGapiPlusLibrary() {
return new Observable<void>(observer => {
window.gapi.client
.load('plus', 'v1')
.then(() => {
observer.next();
observer.complete();
})
.catch(error => {
observer.error(error);
});
});
}
private initializeAuth2() {
return new Observable<void>(observer => {
window.gapi.auth2.init(this.config).then(
() => {
observer.next();
observer.complete();
},
error => {
observer.error(error);
}
);
});
}
private waitForTheGoogleAuthObjectInitializationComplete() {
return new Observable<gapi.auth2.GoogleAuth>(observer => {
window.gapi.auth2.getAuthInstance().then(
googleAuth => {
observer.next(googleAuth);
observer.complete();
},
error => {
observer.error(error);
}
);
});
}
}
И так, давай поэтапно пройдемся по коду:
loadGapiAuth2Library
- загружаем auth2
библиотеку
initializeAuth2
- инициализируем библиотеку с нашей конфигурацией, инициализация асинхронная
loadGapiPlusLibrary
- загружаем библиотеку для работы с Google Plus
waitForTheGoogleAuthObjectInitializationComplete
- ждем инициализации объекта GoogleAuth, это тоже асинхронно
В некоторых местах используется then/catch
, но это псевдо-промис (не инстанс Promise
), с async/await
работать не будет.
shareReplay(1)
кеширует результат выполнения операторов, то есть если 10 раз подписаться на googleAuthObject$
, то 10 раз либы грузиться не будут.
Также у меня есть GapiVerifierService
, который перед инициализацией приложения проверяет авторизован ли пользователь:
import { Injectable } from '@angular/core';
import { Observable, EMPTY } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { GapiService } from './gapi.service';
import { AuthService } from './auth.service';
@Injectable({ providedIn: 'root' })
export class GapiVerifierService {
constructor(private gapiService: GapiService, private authService: AuthService) {}
public verify(): Observable<unknown> {
return this.gapiService.getGoogleAuthObject().pipe(
mergeMap(googleAuth => {
const isSignedIn = googleAuth.currentUser.get().isSignedIn();
if (isSignedIn) {
this.authService.setUser(googleAuth);
return EMPTY;
}
return this.gapiService.signIn();
})
);
}
}
Что внутри AuthService
:
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { User } from '~app/shared/types';
import { GapiService } from './gapi.service';
@Injectable({ providedIn: 'root' })
export class AuthService {
public user$ = new BehaviorSubject<User | null>(null);
constructor(private gapiService: GapiService) {}
public signOut(): void {
this.gapiService
.getGoogleAuthObject()
.pipe(mergeMap(googleAuth => this.signOutFromAllAccounts(googleAuth)))
.subscribe(() => {
window.location.href = window.config.landingAppHost;
});
}
public setUser(googleAuth: gapi.auth2.GoogleAuth): void {
this.user$.next(new User(googleAuth));
}
private signOutFromAllAccounts(googleAuth: gapi.auth2.GoogleAuth) {
return new Observable<void>(observer => {
googleAuth
.signOut()
.then(() => {
observer.next();
observer.complete();
})
.catch(error => {
observer.error(error);
});
});
}
}
У меня после выхода из системы пользователя редиректит на лендинг страницу, можешь пропустить это. Что в классе User
?
export class User {
public readonly id: string;
public readonly name: string;
public readonly email: string;
public readonly imageUrl: string;
public readonly givenName: string;
public readonly familyName: string;
private readonly profile: gapi.auth2.BasicProfile;
constructor(googleAuth: gapi.auth2.GoogleAuth) {
this.profile = googleAuth.currentUser.get().getBasicProfile();
this.id = this.profile.getId();
this.name = this.profile.getName();
this.email = this.profile.getEmail();
this.imageUrl = this.profile.getImageUrl();
this.givenName = this.profile.getGivenName();
this.familyName = this.profile.getFamilyName();
}
}
Как я это использую при инициализации приложения? Очень просто, провайжу APP_INITIALIZER
:
export function appInitializerFactory(
gapiVerifierService: GapiVerifierService
): () => Promise<unknown> {
return () => gapiVerifierService.verify().toPromise();
}
@NgModule({
providers: [
{
provide: APP_INITIALIZER,
useFactory: appInitializerFactory,
multi: true,
deps: [GapiVerifierService]
}
]
})
export class AppModule {}
Если у тебя в приложении авторизация только по клику на кнопку или еще какой-то другой кейс, то тебе нужно проделать почти все то же самое, только в отместку еще создать какой-то страж AuthGuard
на определенные URL'ы, который будет проверять авторизован ли пользователь или нет.
ux_mode: 'redirect'
, тем самым при вызовеsignIn()
гугл сам тебя будет редиректить на нужный урлredirect_uri: location.origin
, тем самым гугл тебя вернет обратно после успешной авторизацииgetAuthInstance().currentUser.isSignedIn().get()
currentUser.get().getBasicProfile()