Каков типичный процесс получения токена аутентификации на клиенте (frontend)?

Процесс получения токена на клиенте (например, в браузере) обычно следует схеме "Credential Grant". Клиент отправляет учетные данные пользователя (логин/пароль) на сервер, а сервер в ответ возвращает токен доступа.

Основные шаги:

1. Отправка учетных данных: Клиент выполняет POST-запрос на специальный эндпоинт (например, /api/token) с логином и паролем в теле запроса.
2. Валидация на сервере: Сервер проверяет учетные данные.
3. Генерация и отправка токена: В случае успеха сервер генерирует токен (чаще всего JWT) и возвращает его клиенту в теле ответа.

Пример на JavaScript с использованием fetch:

async function login(username, password) {
    try {
        const response = await fetch('https://api.example.com/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });

        if (!response.ok) {
            throw new Error(`Authentication failed with status: ${response.status}`);
        }

        const data = await response.json();
        const accessToken = data.access_token;

        // Важно: Хранить токен безопасно!
        // localStorage не является безопасным местом из-за XSS-уязвимостей.
        // Лучшая практика — использовать HttpOnly cookie, устанавливаемые сервером.
        console.log('Received token:', accessToken);

        // Далее токен используется в заголовках для других запросов
        // headers: { 'Authorization': `Bearer ${accessToken}` }

    } catch (error) {
        console.error('Login error:', error);
    }
}

login('user@example.com', 'securepassword');

Ключевой аспект безопасности — хранение токена. Хранение в localStorage или sessionStorage делает его уязвимым для XSS-атак. Наиболее безопасным методом является использование HttpOnly cookie, которые недоступны для чтения из JavaScript.