Ako na autentifikáciu v Angular: Kompletný sprievodca

Vo svete webového vývoja je autentifikácia jedným z najdôležitejších aspektov zabezpečenia aplikácií. Angular, populárny framework pre vytváranie dynamických webových aplikácií, ponúka rôzne možnosti pre implementáciu autentifikácie. Tento článok sa zameriava na základný prístup k vytváraniu autentifikačných služieb v Angulari a poskytuje praktické kroky a ukážky, ktoré vám pomôžu pochopiť, ako správne implementovať a spravovať autentifikáciu vo vašich aplikáciách.

Najskôr, než sa ponoríme do detailov implementácie autentifikácie, je dôležité pochopiť základné pojmy. Autentifikácia je proces, pri ktorom sa overuje, či je používateľ tým, za koho sa vydáva. Naopak, autorizácia určuje, aké akcie môže používateľ vykonávať. V kontexte Angularu sa často používa autentifikácia založená na tokenoch, kde sa používateľovi po úspešnom prihlásení vydá token, ktorý sa následne používa na overovanie jeho identity pri ďalších požiadavkách na server.

1. Príprava projektu

Pred začatím implementácie autentifikačnej služby v Angulari je potrebné pripraviť projekt. Ak ešte nemáte Angular projekt, môžete ho vytvoriť pomocou Angular CLI. Otvorte terminál a zadajte:

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

Tento príkaz vytvorí nový Angular projekt a prejde do jeho priečinka.

2. Inštalácia závislostí

Pre autentifikáciu budeme používať Angular's HttpClient na komunikáciu so serverom. Ak ešte nemáte HttpClientModule nainštalovaný, pridajte ho do svojho projektu:

bash
ng add @angular/common

Potom otvorte app.module.ts a pridajte HttpClientModule:

typescript
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // ďalšie moduly
  ],
  // ďalšie nastavenia
})
export class AppModule { }

3. Vytvorenie autentifikačnej služby

Autentifikačná služba je srdcom vašej autentifikačnej implementácie. Vytvorte nový súbor s názvom auth.service.ts v priečinku src/app/services:

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiUrl = 'http://localhost:3000/api'; // URL vášho autentifikačného servera
  private currentUserSubject: BehaviorSubject<any>;
  public currentUser: Observable<any>;

  constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser') || '{}'));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): any {
    return this.currentUserSubject.value;
  }

  login(username: string, password: string) {
    return this.http.post<any>(`${this.apiUrl}/login`, { username, password })
      .pipe(map(user => {
        // uložte údaje používateľa a token do miestneho úložiska
        localStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        return user;
      }));
  }

  logout() {
    // odstráňte údaje používateľa a token z miestneho úložiska
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }
}

4. Implementácia prihlásenia a odhlásenia

Vytvorte komponenty pre prihlásenie a odhlásenie. Začnime prihlásením. Vytvorte nový súbor login.component.ts:

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

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

  constructor(private authService: AuthService) { }

  login() {
    this.authService.login(this.username, this.password).subscribe({
      next: () => {
        // presmerovanie na domovskú stránku po prihlásení
        // použite Angular router na navigáciu
      },
      error: error => {
        this.errorMessage = 'Prihlásenie zlyhalo';
      }
    });
  }
}

A súbor login.component.html:

html
<div>
  <h2>Prihlásenieh2>
  <form (ngSubmit)="login()">
    <label for="username">Užívateľské meno:label>
    <input type="text" id="username" [(ngModel)]="username" name="username" required>
    
    <label for="password">Heslo:label>
    <input type="password" id="password" [(ngModel)]="password" name="password" required>
    
    <button type="submit">Prihlásiť sabutton>
    <div *ngIf="errorMessage">{{ errorMessage }}div>
  form>
div>

5. Pridanie ochrany trás

Aby sa zabezpečilo, že prístup k určitým častiam aplikácie je obmedzený na prihlásených používateľov, môžete implementovať guard. Vytvorte nový súbor auth.guard.ts:

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

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

  canActivate(): boolean {
    const currentUser = this.authService.currentUserValue;
    if (currentUser) {
      // prístup povolený
      return true;
    }
    // presmerovanie na prihlasovaciu stránku
    this.router.navigate(['/login']);
    return false;
  }
}

A nakoniec, pridajte ochranu trás do svojho modulu, aby ste zabezpečili prístup k chráneným stránkam:

typescript
import { AuthGuard } from './services/auth.guard';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // ďalšie trasy
];

6. Testovanie

Uistite sa, že všetky komponenty a služby fungujú správne. Otestujte prihlásenie, odhlásenie a prístup k chráneným trasám.

Záver

S implementovanou autentifikačnou službou v Angulari máte teraz základný rámec na zabezpečenie vašich webových aplikácií. Tento sprievodca vám ukázal, ako vytvoriť autentifikačnú službu, komponenty pre prihlásenie a odhlásenie, ako aj ochranu trás. Autentifikácia je kľúčová pre zabezpečenie vašich aplikácií a tento prístup vám poskytne dobrý základ na ďalší rozvoj vašich projektov.