Аутентификация с Angular и Auth0

 // 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'; import { Router } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor( private authService: AuthService, private router: Router ) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { if (!this.authService.isLoggedIn) { this.router.navigate(['/']); return false; } return true; } } 

Чтобы реализовать эту app-routing.module.ts маршрута в наших маршрутах, давайте откроем наш файл app-routing.module.ts . Здесь мы включим нашу службу аутентификации и включим ее на нашем секретном маршруте. Давайте посмотрим на реализацию.

 // app-routing.module.ts ... // Import the AuthGuard import { AuthGuard } from './auth/auth.guard'; const routes: Routes = [ ..., { path: 'special', component: PrivateDealsComponent, // Add this to guard this route canActivate: [ AuthGuard ] }, ... ]; @NgModule({ ..., // Add AuthGuard to the providers array providers: [AuthGuard], ... }) export class AppRoutingModule { } 

Это все, что нужно сделать. Наш маршрут теперь защищен на уровне маршрутизации.

Если вы помните, мы включили заглушку для AuthService в наши компоненты сделки. Поскольку служба аутентификации теперь реализована, наша функциональность заполнителя будет работать. Мы увидим правильное поведение, отображаемое в зависимости от состояния пользователя.

Нам нужно будет обновить наш корневой компонент, поскольку мы не включили в него функции аутентификации. Я сделал это специально, чтобы мы могли пройти пример за строкой. Давайте сделаем это дальше.

 // app.component.ts import { Component } from '@angular/core'; import { AuthService } from './auth/auth.service'; @Component({ selector: 'app-root', template: ` <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" routerLink="/">{{ title }}</a> </div> <ul class="nav navbar-nav"> <li> <a routerLink="/deals" routerLinkActive="active">Deals</a> </li> <li> <a routerLink="/special" *ngIf="authService.isLoggedIn" routerLinkActive="active">Private Deals</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a *ngIf="!authService.isLoggedIn" (click)="authService.login()">Log In</a> </li> <li> <a (click)="authService.logout()" *ngIf="authService.isLoggedIn">Log Out</a> </li> </ul> </nav> <div class="col-sm-12"> <router-outlet></router-outlet> </div> </div> `, styles: [ `.navbar-right { margin-right: 0px !important}` ] }) export class AppComponent { title = 'Daily Deals'; constructor(public authService: AuthService) {} } 

Мы импортировали AuthService и сделали его общедоступным в нашем конструкторе (он должен быть public чтобы шаблон мог использовать свои методы).

Мы добавили *ngIf="authService.isLoggedIn в нашу ссылку на частные сделки, чтобы она не отображалась, если пользователь не вошел в систему. Мы также добавили логику *ngIf в наши ссылки для входа и выхода, чтобы показать соответствующую ссылку в зависимости от пользователя состояние аутентификации. Когда пользователь нажимает на ссылку входа в систему сейчас, он будет перенаправлен на централизованную страницу входа в домене Auth0, где он введет здесь свои учетные данные и, если они верны, будет перенаправлен обратно в приложение.

Компонент обратного вызова

Теперь мы закодируем компонент обратного вызова, который мы сгенерировали в начале урока. Этот компонент будет активирован при вызове маршрута localhost:4200/callback , и он обработает перенаправление из Auth0 и обеспечит получение правильных данных обратно в хеш после успешной аутентификации. Для этого компонент будет использовать созданный ранее AuthService . Давайте посмотрим на реализацию:

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

После аутентификации пользователя Auth0 перенаправит обратно в наше приложение и вызовет маршрут /callback . Auth0 также добавит токен доступа к этому запросу, и наш CallbackComponent обеспечит правильную обработку и сохранение токена и профиля. Если все хорошо, то есть мы получили токен доступа, мы будем перенаправлены обратно на домашнюю страницу и перейдем в состояние входа в систему.

Обновление Сервиса

Есть одно последнее обновление, которое нам нужно сделать. Если вы попытаетесь получить доступ к /special маршруту сейчас, даже если вы вошли в систему, вы не получите список секретных сделок. Это потому, что мы не передаем токен доступа на сервер. Нам придется обновить наш сервис сделки.

Нам нужно обновить вызов /api/deals/private чтобы включить наш токен доступа. Нам нужно импортировать HttpHeaders, чтобы прикрепить к нашему запросу заголовок authorization со схемой носителя. Нам также нужно будет импортировать наш AuthService чтобы получить доступ к accessToken . Давайте посмотрим, как мы собираемся реализовать это в нашем приложении.

 // deal.service.ts ... // Import HttpHeaders import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; // Import AuthService import { AuthService } from './auth/auth.service'; ... constructor( private http: HttpClient, private authService: AuthService ) { } ... // Implement a method to get the private deals getPrivateDeals() { return this.http .get(this.privateDealsUrl, { headers: new HttpHeaders().set('Authorization', `Bearer ${this.authService.accessToken}`) }) .pipe( catchError(this.handleError) ); } 

Мы добавим заголовок Authorization в наш getPrivateDeals() используя токен из службы аутентификации. Теперь, когда вызов сделан на частный маршрут в нашем API, мы автоматически authService.accessToken к вызову. Давайте попробуем это в следующем разделе, чтобы убедиться, что это работает.

Собираем все вместе

Вот и все. Теперь мы готовы протестировать наше приложение. Если ваш сервер Node.js не работает, сначала запустите его. Перейдите на localhost:4200 и вы автоматически будете перенаправлены на localhost:4200/deals и посмотрите список публичных сделок.

Далее, нажмите на экран входа в систему, и вы будете перенаправлены на ваш домен Auth0, и появится виджет входа в систему. Войдите или зарегистрируйтесь, и вы будете перенаправлены обратно на маршрут обратного вызова, а затем на страницу сделок, но теперь интерфейс будет выглядеть немного иначе. В главном меню появится новая опция для частных сделок, а в сообщении внизу также будет показана ссылка на частные сделки. Вместо ссылки «Вход в систему» ​​на панели навигации вы также увидите ссылку «Выход из системы». Наконец, нажмите на ссылку Частные предложения, чтобы увидеть наш список эксклюзивных частных сделок.

Примечание. Поскольку мы используем localhost для нашего домена, после первого входа пользователя в систему или в случае изменения области действия в будущем будет отображаться диалоговое окно согласия, в котором пользователю будет предложено предоставить ему доступ к API. Это диалоговое окно согласия не будет отображаться, если вы используете не локальный хост-домен, а клиент является сторонним клиентом.

Вы только что написали и аутентифицировали приложение Angular. Congrats!

Вывод

В этом руководстве мы рассмотрели некоторые способы написания компонентов и сервисов Angular. Мы реализовали аутентификацию на основе токенов с помощью Auth0. Но это только царапина на поверхности.

Angular предоставляет множество полезных функций, таких как pipe, i18n и многое другое. Auth0 может помочь защитить ваши приложения Angular не только с помощью современной аутентификации, но и с такими расширенными функциями, как многофакторная аутентификация , обнаружение аномалий , корпоративная федерация , единый вход (SSO) и многое другое. Зарегистрируйтесь сегодня, чтобы вы могли сосредоточиться на создании функций, уникальных для вашего приложения.