Kako se odvija proces autentifikacije?

Proces autentifikacije korisnika u frontend aplikaciji obično se sastoji od sledećih koraka:

1. Zahtev za korisničkim podacima: Korisnik unosi korisničko ime i lozinku u formu na sajtu ili u aplikaciji.
2. Slanje podataka na server: Frontend šalje te podatke na server (backend) putem HTTP zahteva (obično POST) na poseban endpoint za autentifikaciju. Podaci mogu biti poslati u telu zahteva u JSON ili FormData formatu.
3. Provera podataka na serveru: Backend prima podatke, proverava ih u svojoj bazi podataka (na primer, da li korisničko ime postoji i da li se hash unete lozinke poklapa sa hash-om u bazi).
4. Generisanje tokena/sesije: Ako su podaci tačni, server generiše jedinstveni token za autentifikaciju. To može biti:
   • ID sesije: Server kreira sesiju i povezuje je sa korisnikom, šaljući klijentu identifikator sesije (na primer, u HttpOnly kolačiću).
   • Token (na primer JWT): Server generiše token koji sadrži informacije o korisniku i njegovim pravima, potpisujući ga svojim tajnim ključem. Ovaj token se šalje klijentu.
5. Slanje tokena/sesije klijentu: Server odgovara frontend-u, šaljući generisani token za autentifikaciju.
   • Ako se koristi ID sesije, on se obično prosleđuje u Set-Cookie HTTP zaglavlju.
   • Ako se koristi token, može biti prosleđen u telu odgovora (JSON) ili u Authorization zaglavlju (Bearer <token>).
6. Skladištenje tokena na klijentu: Frontend prima token i čuva ga za buduće zahteve.
   • ID sesije se automatski čuva u kolačićima pretraživača.
   • Token može biti sačuvan u localStorage, sessionStorage ili kolačićima (sa HttpOnly zastavicom za zaštitu od XSS). Preporučuje se korišćenje HttpOnly kolačića za pristupne tokene, jer to smanjuje rizik od krađe tokena putem XSS.
7. Korišćenje tokena za zaštićene zahteve: Pri izvršavanju narednih zahteva za zaštićene resurse (zahtevaju autentifikaciju), frontend šalje sačuvani token u svakom zahtevu.
   • Za sesije, pretraživač automatski šalje odgovarajuće kolačiće sa ID sesije.
   • Za tokene, frontend mora eksplicitno dodati token u Authorization zaglavlje (na primer, Authorization: Bearer <token>).
8. Provera tokena na serveru: Pri primanju svakog zahteva za zaštićeni resurs, server izvlači token iz zahteva i proverava njegovu autentičnost (na primer, validnost tokena, potpis tokena, prisustvo sesije sa takvim ID-jem).
9. Autorizacija: Ako je token validan, server određuje korisnika povezanog sa tim tokenom i proverava njegova prava pristupa traženom resursu (ovo je već proces autorizacije, nakon autentifikacije).
10. Izvršenje zahteva: Ako je korisnik autentifikovan i autorizovan, server izvršava zahtev i šalje odgovor. U suprotnom, server šalje grešku (na primer, 401 Unauthorized ili 403 Forbidden).

Šemati autentifikacije mogu biti različiti (na osnovu sesija, JWT tokena, OAuth2, OpenID Connect itd.), ali osnovni koraci dobijanja i korišćenja tokena za identifikaciju korisnika ostaju slični.

Primer slanja podataka na server (korišćenjem fetch API i tokena):

// Primer podataka korisnika
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Slanje podataka na server
fetch('/api/login', { // Endpoint za autentifikaciju na serveru
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Prijava nije uspela');
  }
  return response.json(); // Očekujemo da server vrati JSON sa tokenom
})
.then(data => {
  const authToken = data.token; // Dobijanje tokena iz odgovora
  localStorage.setItem('authToken', authToken); // Čuvanje tokena (na primer, u localStorage)
  console.log('Uspešna prijava, token sačuvan.');
  // Preusmeravanje korisnika na zaštićenu stranicu
})
.catch(error => {
  console.error('Greška pri autentifikaciji:', error);
  // Prikazivanje poruke o grešci korisniku
});

// Primer zaštićenog zahteva sa korišćenjem sačuvanog tokena
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Dodavanje tokena u zaglavlje Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token je istekao ili je nevažeći. Preusmeravanje na login.');
        // Token je nevažeći, ukloniti token i preusmeriti na login
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Neuspešno učitavanje zaštićenog resursa');
    }
    return response.json();
  })
  .then(data => {
    console.log('Zaštićeni podaci:', data);
  })
  .catch(error => {
    console.error('Greška pri učitavanju zaštićenog resursa:', error);
  });
} else {
  console.log('Nema pronađenog auth tokena. Preusmeravanje na login.');
  // window.location.href = '/login';
}

Važni sigurnosni aspekti:

• Uvek koristite HTTPS za slanje podataka i tokena, kako biste sprečili presretanje.
• Sigurno čuvajte tokene (izbegavajte čuvanje osetljivih informacija poput lozinki ili tokena za pristup u kodu ili javnim poljima).
• Za JWT tokene: koristite kratak rok trajanja za tokene za pristup i osvežavajte ih pomoću tokena za osvežavanje koji se čuvaju u HttpOnly kolačićima. Pristupni tokeni mogu biti u memoriji ili localStorage, ali treba uzeti u obzir rizike od XSS.
• Validirajte sve podatke na serveru.