ตัวอย่าง angular auth0
Created At :
Views 👀 :
นี่คือตัวอย่าง Angular Auth0 ง่ายๆ ที่แสดงวิธีใช้ Angular Auth0 เพื่อเพิ่มการรับรองความถูกต้องและอนุญาตให้กับแอปพลิเคชัน Angular
แอปพลิเคชันนี้ประกอบด้วยสองส่วน:
- หน้าแรก แสดงข้อความต้อนรับ
- หน้าข้อมูลผู้ใช้ แสดงข้อมูลเกี่ยวกับผู้ใช้ที่เข้าสู่ระบบ
หน้าแรก
หน้าแรกแสดงข้อความต้อนรับและปุ่ม “เข้าสู่ระบบ” เมื่อผู้ใช้คลิกปุ่ม “เข้าสู่ระบบ” แอปพลิเคชันจะเรียกใช้ AuthService.login() เพื่อนำผู้ใช้ไปยังหน้าเข้าสู่ระบบของ Auth0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private authService: AuthService) {}
ngOnInit() {
this.authService.isAuthenticated$.subscribe((isAuthenticated) => {
if (isAuthenticated) {
this.navigateToUserProfile();
}
});
}
login() {
this.authService.login();
}
navigateToUserProfile() {
}
}
|
1
2
| <h1>Welcome!</h1>
<button (click)="login()">เข้าสู่ระบบ</button>
|
หน้าข้อมูลผู้ใช้
หน้าข้อมูลผู้ใช้แสดงข้อมูลเกี่ยวกับผู้ใช้ที่เข้าสู่ระบบ ข้อมูลนี้รวมถึงชื่อ อีเมล และ ID ผู้ใช้
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'my-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
constructor(private authService: AuthService) {}
ngOnInit() {
this.user = this.authService.getProfile();
}
}
|
1
2
3
| <h1>{{ user.name }}</h1>
<p>{{ user.email }}</p>
<p>{{ user.id }}</p>
|
เพื่อปกป้องหน้าข้อมูลผู้ใช้ไม่ให้ผู้ใช้ที่ไม่ได้รับอนุญาตเข้าถึง ให้ใช้ AuthGuard เพื่อกำหนดค่าการเข้าถึงเฉพาะสำหรับผู้ใช้ที่เข้าสู่ระบบ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { CanActivate, Injectable } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Injectable({
providedIn: 'root'
})
export class UserProfileGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate() {
return this.authService.isAuthenticated;
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @NgModule({
declarations: [
AppComponent,
UserProfileComponent
],
imports: [
BrowserModule,
AuthModule.forRoot({
domain: 'YOUR_AUTH0_DOMAIN',
clientId: 'YOUR_AUTH0_CLIENT_ID'
}),
AuthGuardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
เมื่อผู้ใช้เข้าสู่ระบบ แอปพลิเคชันจะแสดงหน้าข้อมูลผู้ใช้ ผู้ใช้ที่ไม่ได้รับอนุญาตจะถูกนำกลับไปที่หน้าแรก