Angular Základná Autentifikácia: Príklad Použitia

Angular je populárny framework pre tvorbu moderných webových aplikácií. Pri vytváraní aplikácií je často potrebné chrániť určité stránky alebo zdroje pred neprístupnými používateľmi. Tento proces sa nazýva autentifikácia. V tomto článku sa pozrieme na to, ako implementovať základnú autentifikáciu v Angular pomocou služieb, smerovania a jednoduchého rozhrania používateľskej autentifikácie.

Čo je základná autentifikácia?

Základná autentifikácia je proces, pri ktorom používateľ poskytne svoje poverenia (napríklad meno používateľa a heslo), aby mohol získať prístup k zabezpečeným častiam aplikácie. Je to najjednoduchšia forma zabezpečenia, kde sú poverenia overované na strane servera a na základe toho sa rozhoduje, či má používateľ prístup alebo nie.

Implementácia základnej autentifikácie v Angular

Pre implementáciu základnej autentifikácie v Angular budeme používať Angular CLI (Command Line Interface) na vytvorenie novej aplikácie a Angular služby na správu autentifikačných procesov.

Krok 1: Vytvorenie novej Angular aplikácie

Najskôr si nainštalujeme Angular CLI, ak ešte nie je nainštalovaný:

bash
npm install -g @angular/cli

Potom vytvoríme novú aplikáciu:

bash
ng new angular-auth-example
cd angular-auth-example

Krok 2: Vytvorenie autentifikačnej služby

Vytvoríme službu, ktorá bude zodpovedná za autentifikáciu používateľa. V Angular sa služby vytvárajú pomocou príkazu ng generate service:

bash
ng generate service auth

Táto služba bude mať základné metódy na prihlásenie, odhlásenie a overenie stavu autentifikácie:

typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isAuthenticated: boolean = false;

  constructor() { }

  login(username: string, password: string): boolean {
    if (username === 'user' && password === 'password') {
      this.isAuthenticated = true;
      return true;
    }
    return false;
  }

  logout(): void {
    this.isAuthenticated = false;
  }

  getAuthStatus(): boolean {
    return this.isAuthenticated;
  }
}

Krok 3: Pridanie ochrany ciest (Route Guards)

Route guards v Angular sú nástroje, ktoré umožňujú obmedziť prístup k určitým cestám aplikácie na základe podmienok. Pre základnú autentifikáciu vytvoríme guard, ktorý kontroluje, či je používateľ prihlásený:

bash
ng generate guard auth

V súbore auth.guard.ts pridáme nasledovný 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.getAuthStatus()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Krok 4: Definovanie ciest a komponentov

Pridáme cesty do app-routing.module.ts, aby sme zabezpečili prístup k určitým stránkam len pre prihlásených používateľov:

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

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

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

Krok 5: Vytvorenie prihlásenia a domovského komponentu

Vytvoríme komponenty pre prihlásenie a pre domovskú stránku:

bash
ng generate component login
ng generate component home

V login.component.ts spracujeme prihlasovacie údaje:

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

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

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

  onLogin(): void {
    if (this.authService.login(this.username, this.password)) {
      this.router.navigate(['/home']);
    } else {
      alert('Nesprávne meno používateľa alebo heslo!');
    }
  }
}

V login.component.html vytvoríme jednoduchý prihlasovací formulár:

html
<div>
  <h2>Prihlásenieh2>
  <input type="text" placeholder="Používateľské meno" [(ngModel)]="username">
  <input type="password" placeholder="Heslo" [(ngModel)]="password">
  <button (click)="onLogin()">Prihlásiť sabutton>
div>

Krok 6: Testovanie aplikácie

Spustíme aplikáciu a overíme, že autentifikácia funguje podľa očakávania:

bash
ng serve

Otvorte prehliadač a prejdite na http://localhost:4200/. Po zadaní správnych prihlasovacích údajov (meno: user, heslo: password) by ste mali byť presmerovaní na domovskú stránku.

Záver

Tento článok ukázal, ako implementovať základnú autentifikáciu v Angular pomocou služby, route guardov a komponentov. Táto autentifikácia je jednoduchá a vhodná pre základné aplikácie, ale pre produkčné prostredie by sa mali používať robustnejšie riešenia ako OAuth alebo JWT (JSON Web Tokens). Dúfame, že vám tento príklad pomohol pochopiť základné pojmy autentifikácie v Angular a inšpiroval vás k implementácii vlastných riešení zabezpečenia.