Kaip vyksta autentifikacijos procesas?

Vartotojo autentifikacijos procesas frontend programėlėje paprastai susideda iš šių žingsnių:

1. Duomenų užklausa: Vartotojas įveda prisijungimo vardą ir slaptažodį svetainės ar programėlės formoje.
2. Duomenų siuntimas į serverį: Frontend siunčia šiuos duomenis į serverį (backend) HTTP užklausa (dažniausiai POST) į specialų autentifikacijos galinį tašką. Duomenys gali būti siunčiami JSON arba FormData formatu.
3. Duomenų tikrinimas serveryje: Backend gauna duomenis, patikrina jų buvimą savo duomenų bazėje (pavyzdžiui, ar prisijungimo vardas atitinka esantį vartotoją ir ar įvesto slaptažodžio hash'as sutampa su duomenų bazės hash'u).
4. Žetono/sesijos generavimas: Jei duomenys teisingi, serveris generuoja unikalų autentifikacijos žetoną. Tai gali būti:
   • Sesijos ID: Serveris sukuria sesiją ir ją susieja su vartotoju, siunčiant klientui sesijos identifikatorių (pvz., HttpOnly cookies).
   • Žetonas (pvz., JWT): Serveris sukuria žetoną, kuriame yra informacija apie vartotoją ir jo teises, pasirašydamas jį savo slaptažodžio raktu. Šis žetonas siunčiamas klientui.
5. Žetono/sesijos siuntimas klientui: Serveris atsako frontendui, siunčiant sugeneruotą autentifikacijos žymeklį:
   • Jei naudojamas sesijos ID, jis dažniausiai perduodamas Set-Cookie antraštėje.
   • Jei naudojamas žetonas, jis gali būti siunčiamas atsakymo kūne (JSON) arba Authorization antraštėje (Bearer <žetonas>).
6. Žymeklio išsaugojimas kliento pusėje: Frontend gauna žymeklį ir jį išsaugo tolesniems užklausoms:
   • Sesijos ID saugomas naršyklės cookies (automatiškai).
   • Žetonas gali būti saugomas localStorage, sessionStorage arba cookies (HttpOnly žymekliu, siekiant apsaugoti nuo XSS).
7. Žymeklio naudojimas apsaugotuose užklausose: Vykdant vėlesnes užklausas į apsaugotus išteklius, frontend siunčia išsaugotą žymeklį kiekvienoje užklausoje:
   • Naršyklė automatiškai siunčia atitinkamus cookies su sesijos ID.
   • Žetonų atveju frontend turi aiškiai pridėti žetoną į Authorization antraštę (Bearer <žetonas>).
8. Žymeklio tikrinimas serveryje: Kiekvienos užklausos metu serveris ištraukia žymeklį ir tikrina jo autentiškumą (pvz., galiojimo laikas, parašas, sesijos buvimas).
9. Autorizacija: Jei žymeklis galioja, serveris nustato, kuris vartotojas susijęs su šiuo žymekliu, ir tikrina jo teises prieinamam ištekliui.
10. Užklausos vykdymas: Jei vartotojas yra autentifikuotas ir turi teisę, serveris vykdo užklausą ir siunčia atsakymą. Kitaip, siunčiama klaida (401 Unauthorized arba 403 Forbidden).

Autentifikacijos schemos būna įvairios (sesijos, JWT, OAuth2, OpenID Connect ir t.t.), tačiau pagrindiniai žingsniai išlieka panašūs.

Pavyzdys siuntimo duomenų į serverį (naudojant fetch API ir žetoną):

// Vartotojo duomenys
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Duomenų siuntimas į serverį
fetch('/api/login', { // autentifikacijos galinis taškas
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Login failed');
  }
  return response.json(); // tikimės, kad serveris grąžins JSON su žetonu
})
.then(data => {
  const authToken = data.token; // gauname žetoną iš atsakymo
  localStorage.setItem('authToken', authToken); // išsaugome žetoną
  console.log('Login successful, token saved.');
  // nukreipti vartotoją į apsaugotą puslapį
})
.catch(error => {
  console.error('Authentication error:', error);
  // rodyti klaidos pranešimą vartotojui
});

// Apsaugotas užklausimas su žetonu
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // pridėti žetoną į Authorization antraštę
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token expired or invalid. Redirecting to login.');
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Failed to fetch protected resource');
    }
    return response.json();
  })
  .then(data => {
    console.log('Protected data:', data);
  })
  .catch(error => {
    console.error('Error fetching protected resource:', error);
  });
} else {
  console.log('No auth token found. Redirecting to login.');
  // window.location.href = '/login';
}

Svarbiausi saugumo aspektai:

• Naudokite tik HTTPS
• Saugokite žymenis saugiai
• Naudokite trumpalaikius žetonus
• Serveriuose ir serverio API patikrinkite duomenis