Аутентификация Firebase и Angular с Auth0: Часть 1

Auth Module

Далее давайте добавим немного кода в наш AuthModule в файле auth.module.ts :

 // src/app/auth/auth.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthService } from './auth.service'; import { AuthGuard } from './auth.guard'; import { AngularFireAuthModule } from 'angularfire2/auth'; @NgModule({ imports: [ CommonModule, AngularFireAuthModule ] }) export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [ AuthService, AuthGuard ] }; } } 

Мы импортируем ModuleWithProviders для реализации forRoot() как мы это делали с нашим CoreModule . Затем мы импортируем наш AuthService и AuthGuard . Нам также необходимо импортировать AngularFireAuthModule из angularfire2/auth чтобы мы могли защитить наши соединения Firebase в нашем AuthService . Служба и защита должны затем быть возвращены в массиве providers в forRoot() .

Модуль комментариев

Откройте файл comments.module.ts для реализации CommentsModule следующим образом:

 // src/app/comments/comments.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CoreModule } from '../core/core.module'; import { environment } from './../../environments/environment'; import { AngularFireModule } from 'angularfire2'; import { AngularFirestoreModule } from 'angularfire2/firestore'; import { CommentsComponent } from './comments/comments.component'; import { CommentFormComponent } from './comments/comment-form/comment-form.component'; @NgModule({ imports: [ CommonModule, CoreModule, // Access FormsModule, Loading, and Error components AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule ], declarations: [ CommentsComponent, CommentFormComponent ], exports: [ CommentsComponent ] }) export class CommentsModule { } 

Нам нужно будет импортировать CoreModule чтобы мы могли использовать его экспортированные FormsModule , LoadingComponent и ErrorComponent . Нам также необходимо получить доступ к нашей конфигурации из файла environment.ts . Комментарии используют базу данных Firebase Cloud Firestore, поэтому давайте импортируем AngularFireModule и AngularFirestoreModule а также два наших компонента: CommentsComponent и CommentFormComponent .

Когда мы добавляем AngularFireModule в массив imports @ NgModule, мы вызываем его метод initializeApp() , передавая нашу конфигурацию Firebase. Оба наших компонента уже должны быть в массиве declarations , а компонент CommentsComponent уже должен быть добавлен в массив exports чтобы другие компоненты из других модулей могли использовать его.

Примечание: нам не нужно экспортировать CommentsFormComponent потому что это дочерний элемент CommentsComponent .

Модуль CommentsModule не предоставляет никаких сервисов, поэтому нет необходимости реализовывать метод forRoot() .

Модуль приложения

Теперь, когда наши CoreModule , AuthModule и CommentsModule были реализованы, нам нужно импортировать их в наш корневой модуль, AppModule расположенный в файле app.module.ts :

 // src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { CoreModule } from './core/core.module'; import { AuthModule } from './auth/auth.module'; import { CommentsModule } from './comments/comments.module'; import { AppComponent } from './app.component'; import { CallbackComponent } from './callback.component'; @NgModule({ declarations: [ AppComponent, CallbackComponent ], imports: [ BrowserModule, AppRoutingModule, CoreModule.forRoot(), AuthModule.forRoot(), CommentsModule ], bootstrap: [AppComponent] }) export class AppModule { } 

AppComponent и CallbackComponent уже были автоматически добавлены CLI. Когда мы добавим наши CoreModule и AuthModule в массив AuthModule , мы вызовем метод forRoot() чтобы убедиться, что для их сервисов не создаются дополнительные экземпляры. Модуль CommentsModule не предоставляет никаких услуг, так что это не относится к этому модулю.

Реализация модулей маршрутизации и отложенной загрузки

У нас есть два модуля, которые требуют маршрутизации: DogsModule для основного списка собак и DogModule , который содержит компонент, показывающий страницу с подробностями о породе собак.

Маршрутизация приложений

Сначала давайте реализуем маршрутизацию нашего приложения. Откройте файл app-routing.module.ts и добавьте этот код:

 // src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CallbackComponent } from './callback.component'; import { AuthGuard } from './auth/auth.guard'; const routes: Routes = [ { path: '', loadChildren: './dogs/dogs.module#DogsModule', pathMatch: 'full' }, { path: 'dog', loadChildren: './dog/dog.module#DogModule', canActivate: [ AuthGuard ] }, { path: 'callback', component: CallbackComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 

Мы импортируем наш CallbackComponent и AuthGuard . Остальные маршруты будут строковыми ссылками на модули, а не на импортированные компоненты, использующие свойство loadChildren .

Мы установим путь по умолчанию для загрузки дочерних маршрутов из DogsModule и путь 'dog' для загрузки дочерних маршрутов из DogModule . Путь 'dog' также должен быть защищен AuthGuard , который мы объявляем с canActivate свойства canActivate . Это может содержать массив охранников маршрута, если нам потребуется более одного. Наконец, маршрут 'callback' должен просто указывать на CallbackComponent .

 // src/app/dogs/dogs.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; import { CoreModule } from '../core/core.module'; import { CommentsModule } from '../comments/comments.module'; import { DogsComponent } from './dogs/dogs.component'; const DOGS_ROUTES: Routes = [ { path: '', component: DogsComponent } ]; @NgModule({ imports: [ CommonModule, CoreModule, RouterModule.forChild(DOGS_ROUTES), CommentsModule ], declarations: [ DogsComponent ] }) export class DogsModule { } 

 // src/app/dog/dog.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; import { CoreModule } from '../core/core.module'; import { DogComponent } from './dog/dog.component'; const DOG_ROUTES: Routes = [ { path: ':rank', component: DogComponent } ]; @NgModule({ imports: [ CommonModule, CoreModule, RouterModule.forChild(DOG_ROUTES) ], declarations: [ DogComponent ] }) export class DogModule { } 

 http://localhost:4200/dog/3 

 // src/app/core/loading.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: 'app-loading', template: ` <div [ngClass]="{'inline': inline, 'text-center': !inline, 'py-2': !inline }"> <img src="/assets/images/loading.svg"> </div> `, styles: [` .inline { display: inline-block; } img { height: 80px; width: 80px; } .inline img { height: 24px; width: 24px; } `] }) export class LoadingComponent { @Input() inline: boolean; } 

 <!-- Large, full width, centered: --> <app-loading></app-loading> <!-- Inline: --> <app-loading inline="true"></app-loading> 

 // src/app/core/error.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-error', template: ` <p class="alert alert-danger"> <strong>Error:</strong> There was an error retrieving data. </p> ` }) export class ErrorComponent { } 

 login(redirect?: string) { // Set redirect after login const _redirect = redirect ? redirect : this.router.url; localStorage.setItem('auth_redirect', _redirect); // Auth0 authorize request this._auth0.authorize(); } 

 handleLoginCallback() { this.loading = true; // When Auth0 hash parsed, get profile this._auth0.parseHash((err, authResult) => { if (authResult && authResult.accessToken) { window.location.hash = ''; // Store access token this.accessToken = authResult.accessToken; // Get user info: set up session, get Firebase token this.getUserInfo(authResult); } else if (err) { this.router.navigate(['/']); this.loading = false; console.error(`Error authenticating: ${err.error}`); } }); } getUserInfo(authResult) { // Use access token to retrieve user's profile and set session this._auth0.client.userInfo(this.accessToken, (err, profile) => { if (profile) { this._setSession(authResult, profile); } else if (err) { console.warn(`Error retrieving profile: ${err.error}`); } }); } private _setSession(authResult, profile) { // Set tokens and expiration in localStorage const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + Date.now()); localStorage.setItem('expires_at', expiresAt); this.userProfile = profile; // Session set; set loggedIn and loading this.loggedIn = true; this.loading = false; // Get Firebase token this._getFirebaseToken(); // Redirect to desired route this.router.navigateByUrl(localStorage.getItem('auth_redirect')); 

  private _getFirebaseToken() { // Prompt for login if no access token if (!this.accessToken) { this.login(); } const getToken$ = () => { return this.http .get(`${environment.apiRoot}auth/firebase`, { headers: new HttpHeaders().set('Authorization', `Bearer ${this.accessToken}`) }); }; this.firebaseSub = getToken$().subscribe( res => this._firebaseAuth(res), err => console.error(`An error occurred fetching Firebase token: ${err.message}`) ); } private _firebaseAuth(tokenObj) { this.afAuth.auth.signInWithCustomToken(tokenObj.firebaseToken) .then(res => { this.loggedInFirebase = true; // Schedule token renewal this.scheduleFirebaseRenewal(); console.log('Successfully authenticated with Firebase!'); }) .catch(err => { const errorCode = err.code; const errorMessage = err.message; console.error(`${errorCode} Could not log into Firebase: ${errorMessage}`); this.loggedInFirebase = false; }); } 

 scheduleFirebaseRenewal() { // If user isn't authenticated, check for Firebase subscription // and unsubscribe, then return (don't schedule renewal) if (!this.loggedInFirebase) { if (this.firebaseSub) { this.firebaseSub.unsubscribe(); } return; } // Unsubscribe from previous expiration observable this.unscheduleFirebaseRenewal(); // Create and subscribe to expiration observable // Custom Firebase tokens minted by Firebase // expire after 3600 seconds (1 hour) const expiresAt = new Date().getTime() + (3600 * 1000); const expiresIn$ = Observable.of(expiresAt) .pipe( mergeMap( expires => { const now = Date.now(); // Use timer to track delay until expiration // to run the refresh at the proper time return Observable.timer(Math.max(1, expires - now)); } ) ); this.refreshFirebaseSub = expiresIn$ .subscribe( () => { console.log('Firebase token expired; fetching a new one'); this._getFirebaseToken(); } ); } unscheduleFirebaseRenewal() { if (this.refreshFirebaseSub) { this.refreshFirebaseSub.unsubscribe(); } } 

 logout() { // Ensure all auth items removed localStorage.removeItem('expires_at'); localStorage.removeItem('auth_redirect'); this.accessToken = undefined; this.userProfile = undefined; this.loggedIn = false; // Sign out of Firebase this.loggedInFirebase = false; this.afAuth.auth.signOut(); // Return to homepage this.router.navigate(['/']); } get tokenValid(): boolean { // Check if current time is past access token's expiration const expiresAt = JSON.parse(localStorage.getItem('expires_at')); return Date.now() < expiresAt; } 

 // src/app/callback.component.ts import { Component, OnInit } from '@angular/core'; import { AuthService } from './auth/auth.service'; @Component({ selector: 'app-callback', template: ` <app-loading></app-loading> ` }) export class CallbackComponent implements OnInit { constructor(private auth: AuthService) { } ngOnInit() { this.auth.handleLoginCallback(); } } 

 // src/app/auth/auth.guard.ts import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AuthService) { } canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { if (this.auth.loggedIn) { return true; } else { // Send guarded route to redirect after logging in this.auth.login(state.url); return false; } } } 

 // src/app/core/header/header.component.ts import { Component } from '@angular/core'; import { AuthService } from '../../auth/auth.service'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styles: [` img { border-radius: 100px; width: 30px; } .loading { line-height: 31px; } .home-link { color: #212529; } .home-link:hover { text-decoration: none; } `] }) export class HeaderComponent { constructor(public auth: AuthService) {} } 

 <!-- src/app/core/header/header.component.html --> <nav class="nav justify-content-between mt-2 mx-2 mb-3"> <div class="d-flex align-items-center"> <strong class="mr-1"><a routerLink="/" class="home-link">Popular Dogs </a></strong> </div> <div class="ml-3"> <small *ngIf="auth.loading" class="loading"> Logging in... </small> <ng-template [ngIf]="!auth.loading"> <button *ngIf="!auth.loggedIn" class="btn btn-primary btn-sm" (click)="auth.login()">Log In</button> <span *ngIf="auth.loggedIn"> <img [src]="auth.userProfile.picture"> <small>{{ auth.userProfile.name }}</small> <button class="btn btn-danger btn-sm" (click)="auth.logout()">Log Out</button> </span> </ng-template> </div> </nav> 

 <!-- src/app/app.component.html --> <app-header></app-header> <div class="container"> <router-outlet></router-outlet> </div> 

 // src/app/core/dog.ts export interface Dog { breed: string; rank: number; image: string; } 

 // src/app/core/dog-detail.ts export interface DogDetail { breed: string; rank: number; description: string; personality: string; energy: string; group: string; image: string; link: string; } 

 // src/app/core/api.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; import { environment } from './../../environments/environment'; import { AuthService } from './../auth/auth.service'; import { Observable } from 'rxjs/Observable'; import { catchError } from 'rxjs/operators'; import 'rxjs/add/observable/throw'; import { Dog } from './../core/dog'; import { DogDetail } from './../core/dog-detail'; @Injectable() export class ApiService { private _API = `${environment.apiRoot}api`; constructor( private http: HttpClient, private auth: AuthService) { } getDogs$(): Observable<Dog[]> { return this.http .get(`${this._API}/dogs`) .pipe( catchError((err, caught) => this._onError(err, caught)) ); } getDogByRank$(rank: number): Observable<DogDetail> { return this.http .get(`${this._API}/dog/${rank}`, { headers: new HttpHeaders().set('Authorization', `Bearer ${this.auth.accessToken}`) }) .pipe( catchError((err, caught) => this._onError(err, caught)) ); } private _onError(err, caught) { let errorMsg = 'Error: Unable to complete request.'; if (err instanceof HttpErrorResponse) { errorMsg = err.message; if (err.status === 401 || errorMsg.indexOf('No JWT') > -1 || errorMsg.indexOf('Unauthorized') > -1) { this.auth.login(); } } return Observable.throw(errorMsg); } }