Как протича процесът на удостоверяване?

Процесът на удостоверяване на потребителя във фронтенд приложението обикновено се състои от следните стъпки:

Заявка за данни за вход: Потребителят въвежда потребителското си име и парола във формата на сайта или приложението.
Изпращане на данните към сървъра: Фронтендът изпраща тези данни към сървъра (бекенд) чрез HTTP заявка (обикновено POST) към специален endpoint за удостоверяване. Данните могат да бъдат изпратени във тялото на заявката във формат JSON или FormData.
Проверка на данните на сървъра: Бекендът получава данните, проверява ги в своята база данни (например, дали потребителското име съществува и дали хешът на въведения парола съвпада с този в базата данни).
Генериране на токен/сесия: Ако данните са верни, сървърът генерира уникален маркер за удостоверяване. Това може да бъде:
- ID на сесия: Сървърът създава сесия и я свързва с потребителя, изпращайки идентификатор на сесията (например, в HttpOnly бисквитка).
- Токен (например JWT): Сървърът генерира токен, съдържащ информация за потребителя и правата му, подписвайки го със своя секретен ключ. Този токен се изпраща на клиента.
Изпращане на токена/сесията към клиента: Сървърът отговаря на фронтенда, изпращайки генерирания маркер за удостоверяване.
- Ако се използва ID на сесия, той обикновено се предава в Set-Cookie HTTP заглавка.
- Ако се използва токен, той може да бъде предаден в тялото на отговора (JSON) или в заглавката Authorization (Bearer <токен>).
Запазване на маркера на клиента: Фронтендът получава маркера и го запазва за последващи заявки.
- ID на сесия се съхранява автоматично в бисквитките на браузъра.
- Токенът може да се съхранява в localStorage, sessionStorage или бисквитки (с флаг HttpOnly за защита от XSS). Предпочита се използването на HttpOnly бисквитки за токените за достъп, тъй като това намалява риска от кражба на токена чрез XSS.
Използване на маркера за защитени заявки: При изпълнение на последващи заявки към защитени ресурси (изискващи удостоверяване), фронтендът изпраща запазения маркер във всяка заявка.
- За сесии браузърът автоматично изпраща съответните бисквитки с ID на сесията.
- За токени фронтендът трябва явно да добавя токена в заглавката Authorization (например, Authorization: Bearer <токен>).
Проверка на маркера на сървъра: При получаване на всяка заявка към защитен ресурс, сървърът извлича маркера от заявката и проверява неговата автентичност (например, валидност на токена, подпис на токена, наличие на сесия с такова ID).
Авторизация: Ако маркерът е валиден, сървърът определя потребителя, свързан с този маркер, и проверява правата му за достъп до искания ресурс (това е вече процес на авторизация, след удостоверяването).
Изпълнение на заявката: Ако потребителят е удостоверен и има права, сървърът изпълнява заявката и изпраща отговор. В противен случай, сървърът изпраща грешка (например 401 Unauthorized или 403 Forbidden).

Схемите за удостоверяване са различни (на базата на сесии, JWT токени, OAuth2, OpenID Connect и др.), но основните стъпки за получаване и използване на маркер за идентифициране на потребителя остават сходни.

Пример за изпращане на данни към сървъра (с използване на fetch API и токен):

// Пример за данни на потребителя
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Изпращане на данни към сървъра
fetch('/api/login', { // Endpoint за удостоверяване на сървъра
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Входът неуспешен');
  }
  return response.json(); // Очакваме, че сървърът ще върне JSON с токена
})
.then(data => {
  const authToken = data.token; // Получаване на токена от отговора
  localStorage.setItem('authToken', authToken); // Запазване на токена (например в localStorage)
  console.log('Успешен вход, токенът е запазен.');
  // Пренасочване към защитена страница
})
.catch(error => {
  console.error('Грешка при удостоверяване:', error);
  // Показване на съобщение за грешка на потребителя
});

// Пример за защитена заявка с използване на запазения токен
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Добавяне на токена в заглавката Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Токенът е изтекъл или невалиден. Пренасочване към вход.');
        // Токенът е невалиден, изчистване и пренасочване
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Неуспешно зареждане на защитения ресурс');
    }
    return response.json();
  })
  .then(data => {
    console.log('Защитени данни:', data);
  })
  .catch(error => {
    console.error('Грешка при зареждане на защитения ресурс:', error);
  });
} else {
  console.log('Не е намерен токен за удостоверяване. Пренасочване към вход.');
  // window.location.href = '/login';
}

Важни аспекти за сигурност:

Винаги използвайте HTTPS за изпращане на данни и токени, за да предотвратите прихващане.
Съхранявайте токените по безопасен начин (избягвайте съхраняването на чувствителна информация като пароли или токени за достъп в кода или публични полета).
За JWT токени: използвайте кратък срок на валидност за токените за достъп и ги обновявайте с помощта на токени за обновяване, които се съхраняват в HttpOnly бисквитки. Токените за достъп могат да се съхраняват в паметта или localStorage, но трябва да се вземат предвид рисковете от XSS.
Валидирайте всички данни на сървъра.