Služba autentifikácie v Angulari: Kompletný návod

Na začiatku sa zameriame na základné koncepty autentifikácie, aby sme sa dostali k tomu, čo všetko obnáša vytvorenie autentifikačnej služby. Autentifikácia je proces, pri ktorom overujeme identitu používateľa, a zvyčajne sa uskutočňuje pomocou používateľských mien a hesiel, ale môže zahŕňať aj ďalšie faktory, ako sú biometrické údaje alebo jednorazové kódy. V Angulari je autentifikácia spravidla riadená prostredníctvom služieb, ktoré komunikujú so serverom a zabezpečujú správu prístupových tokenov.

Krok 1: Nastavenie prostredia

Pred začatím vývoja je dôležité mať správne nastavené prostredie. Uistite sa, že máte nainštalovaný Angular CLI, ktorý vám umožní vytvárať a spravovať Angular projekty. Používajte nasledujúci príkaz na vytvorenie nového projektu:

bash
ng new my-auth-app
cd my-auth-app

Krok 2: Inštalácia závislostí

Pre autentifikáciu budeme používať Angular Router a HttpClient. Tieto moduly vám umožnia spravovať navigáciu a vykonávať HTTP požiadavky. Nainštalujte potrebné závislosti:

bash
npm install @angular/router @angular/common @angular/core
npm install @angular/http

Krok 3: Vytvorenie autentifikačnej služby

Autentifikačná služba je srdcom vašej autentifikácie. Vytvorte nový súbor s názvom auth.service.ts v priečinku src/app/ a pridajte nasledujúci kód:

typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private authUrl = 'http://your-api-url.com/auth';  // URL na váš autentifikačný server

  constructor(private http: HttpClient) { }

  login(username: string, password: string): Observable<boolean> {
    return this.http.post<any>(`${this.authUrl}/login`, { username, password })
      .pipe(
        map(response => {
          if (response.token) {
            localStorage.setItem('authToken', response.token);
            return true;
          } else {
            return false;
          }
        }),
        catchError(() => of(false))
      );
  }

  logout(): void {
    localStorage.removeItem('authToken');
  }

  isAuthenticated(): boolean {
    return !!localStorage.getItem('authToken');
  }
}

Krok 4: Pridanie autentifikačného gardu

Autentifikačný gard zabezpečuje, že používateľ je prihlásený pred prístupom k určitým stránkam. Vytvorte nový súbor s názvom auth.guard.ts v priečinku src/app/ a pridajte nasledujúci kód:

typescript
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()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Krok 5: Konfigurácia routeru

Upravte súbor app-routing.module.ts tak, aby používal autentifikačný gard:

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

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

Krok 6: Vytvorenie prihlásenia a domovskej stránky

Pre jednoduchosť vytvoríme dve základné stránky – prihlásenie a domovskú stránku. Použite Angular CLI na generovanie komponentov:

bash
ng generate component login
ng generate component home

Pridajte jednoduché formuláre do login.component.html:

html
<form (ngSubmit)="onSubmit()">
  <label for="username">Usernamelabel>
  <input type="text" id="username" [(ngModel)]="username" name="username" required>
  
  <label for="password">Passwordlabel>
  <input type="password" id="password" [(ngModel)]="password" name="password" required>
  
  <button type="submit">Loginbutton>
form>

A pridajte príslušnú logiku do login.component.ts:

typescript
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  username: string;
  password: string;

  constructor(private authService: AuthService, private router: Router) { }

  onSubmit(): void {
    this.authService.login(this.username, this.password).subscribe(isAuthenticated => {
      if (isAuthenticated) {
        this.router.navigate(['/home']);
      } else {
        alert('Invalid credentials');
      }
    });
  }
}

Záver

Po vykonaní týchto krokov by ste mali mať základnú autentifikačnú službu fungujúcu vo vašej Angular aplikácii. Tento postup poskytuje jednoduchý spôsob, ako zabezpečiť vašu aplikáciu a spravovať prístup používateľov. Nezabudnite testovať a zabezpečiť vašu aplikáciu na všetkých úrovniach, aby ste zabezpečili najvyššiu úroveň bezpečnosti pre svojich používateľov.