Как работают разные способы аутентификации?

Способы аутентификации во фронтенде

Аутентификация — это процесс проверки личности пользователя. На фронтенде существует несколько основных подходов, каждый с собственными особенностями и применением.

1. Session-based аутентификация

Традиционный подход, где сервер хранит данные сеанса:

// Вход
fetch("/api/login", {
  method: "POST",
  credentials: "include",  // важно для cookies
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password })
});

// Сервер создаёт сессию и отправляет cookie
// При следующих запросах браузер автоматически отправляет cookie

Преимущества: безопасность (данные на сервере), простота, CSRF защита встроена

Недостатки: масштабируемость (нужно хранить сессии), требует sticky sessions для микросервисов

2. Token-based аутентификация (JWT)

Фронтенд хранит токен и отправляет его в каждом запросе:

// Вход
const response = await fetch("/api/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password })
});

const { token } = await response.json();
localStorage.setItem("authToken", token);

// Использование токена
fetch("/api/protected", {
  headers: { "Authorization": `Bearer ${token}` }
});

Преимущества: масштабируемость (stateless), работает с микросервисами, удобно для мобильных приложений

Недостатки: XSS уязвимость если токен в localStorage, нельзя отозвать токен без whitelist

3. Refresh Token Pattern

Комбинирует безопасность session и удобство JWT:

// Short-lived access token + long-lived refresh token
const { accessToken, refreshToken } = await login();
localStorage.setItem("refreshToken", refreshToken);
// accessToken в памяти (защита от XSS)

// Когда accessToken истекает
if (response.status === 401) {
  const newAccessToken = await fetch("/api/refresh", {
    method: "POST",
    body: JSON.stringify({ refreshToken })
  });
}

4. OAuth 2.0 / OpenID Connect

Делегированная аутентификация через третьи стороны:

// Вход через Google
function handleGoogleLogin(response) {
  const { credential } = response;
  
  fetch("/api/auth/google", {
    method: "POST",
    body: JSON.stringify({ token: credential })
  });
}

Фронтенд получает токен от провайдера, отправляет на бэк для проверки

5. Passwordless аутентификация

Magic links: сервер отправляет уникальную ссылку на email

WebAuthn (Passkeys): использует биометрию или аппаратные ключи

Лучшие практики

• Хранение токенов: httpOnly cookies > защищённая память > localStorage
• HTTPS только: не отправляй токены по HTTP
• CORS: правильная конфигурация для кроссдоменных запросов
• Refresh токены: храни в httpOnly cookie, access token в памяти
• Logout: очищай токены и делай запрос на сервер

Выбор подхода

• SPA с одним доменом: session-based или httpOnly cookies
• Микросервисная архитектура: JWT с refresh токенами
• Мобильное приложение: refresh token pattern
• Интеграция с внешними сервисами: OAuth 2.0

Нет универсального решения — всё зависит от требований безопасности, архитектуры и масштаба приложения.