Xác thực trong Angular bằng Auth0 & Auth0 Lock
Việc xác thực có thể khó và việc phát minh lại bánh xe mỗi khi nó cần trong một ứng dụng chắc chắn không có gì thú vị. Rất may, các dịch vụ và công cụ khác nhau có thể đảm nhận công việc nặng nhọc cho ta . Ta đã thảo luận về việc triển khai xác thực bằng Firebase , vì vậy bây giờ ta hãy khám phá một giải pháp thay thế: Auth0 . Auth0 là một giải pháp rất mạnh mẽ cung cấp tất cả các tính năng mà bạn mong đợi từ một nhà cung cấp dịch vụ xác thực (thông tin đăng nhập xã hội, thông tin đăng nhập email / password , luật ủy quyền,…)
Trong bài đăng này, ta sẽ sử dụng tiện ích Auth0 Lock , tiện ích này cho phép nhúng cửa sổ bật lên bên trong ứng dụng của bạn để xác thực. Bạn cũng có thể triển khai xác thực trên trang đăng nhập được lưu trữ của Auth0, trong trường hợp đó, bạn có thể cần tham khảo hướng dẫn này .
Bài đăng này bao gồm xác thực cho các ứng dụng Angular 2+.
Cài đặt
Điều đầu tiên, bạn cần tạo một account Auth0 và sau đó tạo một ứng dụng khách Ứng dụng Web Trang Đơn mới.
Khi ứng dụng client của bạn được tạo, bạn có thể cấu hình cài đặt theo sở thích của bạn . Một điều quan trọng là thêm URL gọi lại phản ánh lộ trình gọi lại đăng nhập thực tế trong ứng dụng Angular của bạn. Tại đây, ta sẽ tạo một tuyến đăng nhập , vì vậy ta sẽ thêm http://localhost:4200/login làm URL gọi lại được phép duy nhất của ta . Auth0 sẽ chuyển hướng đến nó sau khi xác thực.
Trong cài đặt khách hàng của bạn, bạn cũng sẽ có quyền truy cập vào miền và thông tin ID khách hàng . Thêm thông tin đó vào file môi trường của ứng dụng của bạn:
export const environment = { production: false, auth0: { domain: 'your-awesome-domain.auth0.com', clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX', callbackURL: 'http://localhost:4200/login' } }; Bạn cũng cần ba gói bổ sung trong dự án của bạn : auth0-js , auth0-lock và angle2-jwt . Hãy cài đặt chúng vào dự án của ta bằng cách sử dụng npm hoặc Yarn:
$ yarn add auth0-js auth0-lock angular2-jwt # or, using npm: $ npm install auth0-js auth0-lock angular2-jwt Bây giờ, hãy thêm auth0.min.js vào danh sách các tập lệnh có trong bản dựng cho ứng dụng của bạn:
..., "scripts": [ "../node_modules/auth0-js/build/auth0.min.js" ], ... Người thuê nhà
Với Auth0, bạn có thể tạo nhiều đối tượng thuê để phù hợp với các môi trường triển khai khác nhau ( phát triển , sản xuất , dàn dựng ,…) Mỗi đối tượng thuê có domain riêng (ví dụ: my-app-dev.auth0.com và my-app.auth0.com ). Bằng cách này, bạn có thể tạo một khách hàng khác cho production và tất cả những gì bạn cần là điền vào file môi trường production của bạn với domain , id khách hàng và URL gọi lại khác nhau.
Cài đặt thành phần & định tuyến
Ta sẽ thêm hai thành phần ứng dụng của ta : một thành phần gia đình và một thành phần đăng nhập callback. Ta có thể sử dụng Angular CLI để dễ dàng tạo các thành phần mới:
$ ng g c home $ ng g c login Tiếp theo, hãy cài đặt một module định tuyến đơn giản:
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'login', component: LoginComponent } ]; Dịch vụ xác thực
Hãy cũng sử dụng Angular CLI để tạo dịch vụ Auth :
$ ng g s auth Đến đây, bạn cần đảm bảo module định tuyến của bạn được nhập vào module ứng dụng của bạn và dịch vụ xác thực cũng được cung cấp bởi module ứng dụng.
Hãy bắt đầu cài đặt dịch vụ xác thực:
import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { environment } from '../environments/environment'; import { tokenNotExpired } from 'angular2-jwt'; import Auth0Lock from 'auth0-lock'; @Injectable() export class AuthService { auth0Options = { theme: { logo: '/assets/alligator-logo.svg', primaryColor: '#DFA612' }, auth: { redirectUrl: environment.auth0.callbackURL, responseType: 'token id_token', audience: https://${environment.auth0.domain}/userinfo, params: { scope: 'openid profile' } }, autoclose: true, oidcConformant: true, }; lock = new Auth0Lock( environment.auth0.clientId, environment.auth0.domain, this.auth0Options ); constructor(private router: Router) { this.lock.on('authenticated', (authResult: any) => { console.log('Nice, it worked!'); this.router.navigate(['/']); // go to the home route // ...finish implementing authenticated }); this.lock.on('authorization_error', error => { console.log('something went wrong', error); }); } login() { this.lock.show(); } logout() { // ...implement logout } Dưới đây là một số điều cần lưu ý:
- Đầu tiên ta xác định một version mới của Auth0Lock , lấy id client , domain và một đối tượng cấu hình. Có rất nhiều tùy chọn cấu hình có sẵn và ở đây ngoài các tùy chọn bắt buộc, ta cũng đã thêm một số tùy chọn theo chủ đề để tạo kiểu cho tiện ích khóa.
- Trong các tùy chọn, ta cũng chỉ định loại dữ liệu ta muốn lấy lại bằng cách sử dụng khóa phạm vi . Ở đây, trên openid mặc định, ta cũng muốn lấy lại thông tin hồ sơ .
- Trong phương thức khởi tạo của dịch vụ, ta lắng nghe các sự kiện đã xác thực hoặc sự kiện ủy quyền trên version khóa. Lệnh gọi lại của sự kiện được xác thực sẽ có logic của ta khi xác thực thành công.
- Phương thức đăng nhập dễ thực hiện như gọi phương thức hiển thị trên version khóa của ta .
- Ta sẽ phải quay lại và hoàn tất việc triển khai các phương thức đăng xuất và isAuthenticated .
Bây giờ ta có thể đưa dịch vụ auth vào thành phần home của ta :
import { Component } from '@angular/core'; import { AuthService } from '../auth.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html' }) export class HomeComponent { Và hãy thêm các node đăng nhập và đăng xuất vào mẫu:
<button *ngIf="!auth.isAuthenticated()" (click)="auth.login()"> Sign Up or Login </button> <button *ngIf="auth.isAuthenticated()" (click)="auth.logout()"> Logout </button> Với dịch vụ xác thực cơ bản của ta tại chỗ, tính năng nhúng Auth0 đã hoạt động và ta có thể đăng ký hoặc đăng nhập:
Hồ sơ, Được xác thực, Đăng xuất
Hãy hoàn thành việc triển khai dịch vụ xác thực của ta . Đối với ví dụ của ta , ta sẽ lưu Mã thông báo web JSON mà Auth0 trả về bộ nhớ local . Sau đó, mã thông báo đó có thể được thêm vào tiêu đề Ủy quyền bằng cách sử dụng tiền tố Bearer trên các yêu cầu HTTP tới API backend của bạn. Sau đó, backend sẽ có trách nhiệm đảm bảo mã thông báo hợp lệ. Ta cũng sẽ lấy thông tin profile của account mà ta đã yêu cầu bằng cách sử dụng phạm vi và lưu nó vào bộ nhớ local .
Đầu tiên, logic về các sự kiện được xác thực thành công:
this.lock.on('authenticated', (authResult: any) => { this.lock.getUserInfo(authResult.accessToken, (error, profile) => { if (error) { throw new Error(error); } localStorage.setItem('token', authResult.idToken); localStorage.setItem('profile', JSON.stringify(profile)); this.router.navigate(['/']); Ở đây ta đang gọi getUserInfo trên version khóa và chuyển mã thông báo truy cập được trả về từ xác thực thành công. getUserInfo cung cấp cho ta quyền truy cập vào thông tin profile cho user .
isAuthenticated
Phương pháp isAuthenticated của ta rất hữu ích cho ứng dụng của ta để biết liệu có một phần mềm đã được xác thực được sử dụng hay không và điều chỉnh giao diện user do đó.
Để triển khai nó, ta sẽ sử dụng phương thức tokenNotExpired của angle2- tokenNotExpired . Nó sẽ trả về false nếu không có mã thông báo hoặc nếu mã thông báo đã hết hạn:
isAuthenticated() { return tokenNotExpired(); } Đăng xuất
Vì việc sử dụng JWT để xác thực là không có trạng thái, tất cả những gì ta phải làm để đăng xuất là xóa mã thông báo và profile khỏi bộ nhớ local :
logout() { localStorage.removeItem('profile'); localStorage.removeItem('token'); } 🔑 Và bạn đã có nó! Xác thực đơn giản cho các ứng dụng của bạn.
Các tin liên quan
