Otentikasi dan Otorisasi di Angular SPA

Aplikasi Halaman Tunggal (SPA) telah menjadi pilihan populer untuk pengembangan web modern karena pengalaman pengguna yang mulus. Angular, kerangka kerja JavaScript yang kuat, sering kali digunakan untuk membangun SPA. Namun, mengamankan aplikasi ini dengan mekanisme autentikasi dan otorisasi yang kuat sangatlah penting untuk melindungi data sensitif dan memastikan bahwa pengguna hanya dapat mengakses sumber daya yang diizinkan. Pada artikel ini, kita akan mengeksplorasi bagaimana autentikasi dan otorisasi diimplementasikan dalam Angular SPA.

Memahami Otentikasi dan Otorisasi

Otentikasi dan otorisasi adalah dua konsep paling mendasar dalam keamanan web:

Otentikasi: Tindakan memverifikasi identitas pengguna. Ini biasanya berbentuk nama pengguna dan kata sandi, token OAuth atau otentikasi biometrik.
Otorisasi: mendefinisikan tindakan dan sumber daya apa saja yang bisa diakses oleh pengguna setelah mereka diautentikasi.

Dalam Angular SPA, menerapkan keduanya secara efektif membutuhkan penggunaan layanan, pencegat, penjaga, dan penyedia otentikasi pihak ketiga.

sumber: hypr.com

Menerapkan Otentikasi di Angular

1. Menggunakan Token Web JSON (JWT)

Salah satu metode yang paling umum untuk menangani autentikasi di Angular SPA adalah melalui JWT. Token ini berisi informasi yang dikodekan tentang pengguna dan dikeluarkan setelah login berhasil.

Langkah-langkah untuk Menerapkan Otentikasi JWT:

Login Pengguna - Bagian depan mengumpulkan kredensial pengguna dan mengirimkannya ke bagian belakang untuk diverifikasi.
Penerbitan Token - Jika autentikasi berhasil, backend membuat JWT dan mengembalikannya ke klien.
Penyimpanan - Frontend menyimpan token (biasanya di localStorage atau sessionStorage).
Penggunaan - Token ditambahkan ke permintaan HTTP untuk mengakses sumber daya yang aman.

2. Membuat Layanan Autentikasi

Untuk mengelola autentikasi, buatlah AuthService di Angular:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
private apiUrl = 'https://your-api.com/auth';

constructor(private http: HttpClient) {}

login(credentials: { email: string, password: string }): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, credentials);
}

logout() {
localStorage.removeItem('token');
}

getToken(): string | null {
return localStorage.getItem('token');
}

isAuthenticated(): boolean {
return !!this.getToken();
}
}

Permintaan API menggunakan Pencegat HTTP

Karena Anda ingin melampirkan token autentikasi Anda ke setiap permintaan ke titik akhir yang aman, kami akan memperkenalkan pencegat HTTP:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
const token = this.authService.getToken();
if (token) {
req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
}
return next.handle(req);
}
}

Anda dapat mendaftarkan pencegat di dalam berkas app. module. ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
})
export class AppModule {}

Menerapkan Otorisasi dengan Penjaga Rute

Dalam metode di atas, penjaga rute Angular dapat diimplementasikan untuk membatasi akses ke bagian aplikasi berdasarkan peran pengguna atau status login.

Membuat Pelindung Auth

AuthGuard mencegah pengguna yang tidak diautentikasi mengakses rute tertentu.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

canActivate(): boolean {
if (!this.authService.isAuthenticated()) {
this.router.navigate(['/login']);
return false;
}
return true;
}
}

Melindungi Rute

Terapkan AuthGuard dalam perutean aplikasi untuk rute aman. modul. file ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}

RBAC (Kontrol Akses Berbasis Peran)

Peran dapat diberikan kepada pengguna, dan Anda dapat melakukan pemeriksaan otorisasi di dalam komponen dan layanan untuk kontrol yang lebih terperinci.

Memeriksa contoh peran pengguna:

isAdmin(): boolean {
const token = this.getToken();
if (token) {
const payload = JSON.parse(atob(token.split('.')[1]));
return payload.role === 'admin';
}
return false;
}

Kesimpulan

Otentikasi dan otorisasi sangat penting untuk mengamankan Angular SPA. Dengan memanfaatkan JWT, pencegat HTTP, dan penjaga rute, pengembang dapat memastikan bahwa hanya pengguna yang diautentikasi yang dapat mengakses sumber daya yang dilindungi. Selain itu, menerapkan kontrol akses berbasis peran semakin memperkuat keamanan dengan membatasi izin pengguna berdasarkan peran mereka. Dengan praktik terbaik ini, Angular SPA dapat dibangun dengan langkah-langkah keamanan yang kuat sekaligus memberikan pengalaman pengguna yang mulus.

Kembali ke>>>> Membangun Aplikasi Halaman Tunggal (SPA) dengan Angular