Встречается на собеседованиях • сегодня

Как реализовать OAuth 2.0

Для реализации OAuth 2.0 во фронтенде:

  1. Redirect Flow - самый распространенный вариант:
js
// Инициируем авторизацию
const authUrl = `https://auth-server.com/authorize?
  client_id=YOUR_CLIENT_ID&
  redirect_uri=${encodeURIComponent('https://your-app.com/callback')}&
  response_type=code&
  scope=read_profile`;

window.location.href = authUrl;

text

2. **Обработка callback** (после редиректа):
```js
// Извлекаем код из URL
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

// Обмениваем код на токен
fetch('/api/token', {
  method: 'POST',
  body: JSON.stringify({ code }),
  headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(data => {
  localStorage.setItem('access_token', data.access_token);
});

Важные моменты:

  • Используйте PKCE для веб-приложений
  • Храните токен в памяти или HttpOnly куках
  • Никогда не передавайте client_secret во фронтенде
  • Для SPA лучше использовать Implicit Flow с response_type=token

Библиотеки для упрощения:

  • oauth-js
  • angular-oauth2-oidc
  • react-oauth2
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы