Как работает процесс авторизации?

Как работает процесс авторизации

Авторизация - это процесс проверки прав доступа пользователя к ресурсам после того, как его личность установлена. Рассмотрим современный подход с JWT и OAuth 2.0.

JWT (JSON Web Tokens) авторизация

1. Структура JWT JWT состоит из трёх частей: header.payload.signature

// Пример JWT: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ...

// Header - алгоритм и тип токена
{"alg": "HS256", "typ": "JWT"}

// Payload - данные пользователя
{"sub": "1234567890", "name": "John Doe", "iat": 1516239022, "exp": 1516242622}

// Signature - проверка подлинности
HMACSHA256(base64Url(header) + "." + base64Url(payload), secret)

2. Процесс авторизации с JWT

// 1. Фронтенд отправляет учётные данные
async function login(email, password) {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({email, password})
  });
  const {access_token, refresh_token} = await response.json();
  localStorage.setItem('access_token', access_token);
  localStorage.setItem('refresh_token', refresh_token);
}

// 2. Фронтенд отправляет токен с каждым запросом
async function fetchProtectedResource() {
  const token = localStorage.getItem('access_token');
  const response = await fetch('/api/users/me', {
    headers: {'Authorization': `Bearer ${token}`}
  });
  return response.json();
}

// 3. Бэкенд проверяет токен (FastAPI)
@app.get('/users/me')
async def get_current_user(token: str = Depends(get_token)):
  try:
    payload = decode_jwt(token, SECRET_KEY)
    user_id = payload['sub']
    return await get_user(user_id)
  except JWTError:
    raise HTTPException(status_code=401)

3. Обновление токена (Refresh Token)

// Access token на 15 минут, refresh на 7 дней
async function refreshAccessToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  const response = await fetch('/api/auth/refresh', {
    method: 'POST',
    headers: {'Authorization': `Bearer ${refreshToken}`}
  });
  const {access_token} = await response.json();
  localStorage.setItem('access_token', access_token);
}

Session-based авторизация

// Браузер автоматически отправляет cookies
async function loginWithSession(email, password) {
  await fetch('/api/auth/login', {
    method: 'POST',
    credentials: 'include', // отправляем cookies
    body: JSON.stringify({email, password})
  });
}

// Все запросы с cookies
async function fetchUserData() {
  const response = await fetch('/api/users/me', {
    credentials: 'include'
  });
  return response.json();
}

OAuth 2.0 (через Google, GitHub)

// 1. Перенаправляем на OAuth провайдер
function loginWithGoogle() {
  const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
  const redirectUri = `${window.location.origin}/auth/callback`;
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
    `client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
  window.location.href = authUrl;
}

// 2. Бэкенд обменивает код на токены
@app.get('/auth/callback')
async def oauth_callback(code: str):
  token_response = requests.post('https://oauth2.googleapis.com/token',
    data={'code': code, 'client_id': GOOGLE_CLIENT_ID, 'client_secret': SECRET})
  access_token = token_response.json()['access_token']
  user_info = requests.get('https://www.googleapis.com/oauth2/v1/userinfo',
    headers={'Authorization': f'Bearer {access_token}'}).json()
  user = await create_or_update_user(user_info)
  jwt_token = create_access_token(data={'sub': user.id})
  return {'access_token': jwt_token}

React контекст для авторизации

import {createContext, useState, useEffect} from 'react';

export const AuthContext = createContext();

export function AuthProvider({children}) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('access_token');
    if (token) fetchCurrentUser(token);
    else setIsLoading(false);
  }, []);

  async function fetchCurrentUser(token) {
    try {
      const response = await fetch('/api/users/me',
        {headers: {'Authorization': `Bearer ${token}`}});
      if (response.ok) {
        const userData = await response.json();
        setUser(userData);
        setIsAuthenticated(true);
      }
    } finally {
      setIsLoading(false);
    }
  }

  async function login(email, password) {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email, password})
    });
    const {access_token} = await response.json();
    localStorage.setItem('access_token', access_token);
    await fetchCurrentUser(access_token);
  }

  return <AuthContext.Provider value={{user, isAuthenticated, login}}>{children}</AuthContext.Provider>;
}

Безопасность

1. Хранение токенов - используй httpOnly cookies, не localStorage
2. HTTPS - все запросы должны быть защищены
3. Валидация - проверяй подпись и время истечения
4. CSRF защита - используй CSRF токены при изменении
5. Короткоживущие токены - access на 15 минут, refresh на 7 дней

Используй проверенные стандарты (JWT, OAuth 2.0) и не пытайся реализовать свой механизм авторизации.