Как сторонние сервисы позволяют организовать авторизацию?

Внешние сервисы авторизации

В современной веб-разработке организация авторизации часто полагается на сторонние сервисы. Это упрощает разработку и повышает безопасность приложения.

OAuth 2.0 — стандартный протокол авторизации

OAuth 2.0 — самый популярный стандарт для делегированной авторизации. Он позволяет пользователям авторизоваться через учётные записи социальных сетей:

const handleGoogleLogin = (response) => {
  const { credential } = response
  
  fetch('/api/auth/google', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: credential })
  })
  .then(res => res.json())
  .then(data => {
    localStorage.setItem('authToken', data.accessToken)
    window.location.href = '/dashboard'
  })
}

OpenID Connect (OIDC)

OpenID Connect — слой идентификации поверх OAuth 2.0:

const oidcConfig = {
  authority: 'https://accounts.google.com',
  client_id: 'YOUR_CLIENT_ID',
  redirect_uri: 'http://localhost:3000/callback',
  response_type: 'code',
  scope: 'openid profile email'
}

const parseIdToken = (token) => {
  const base64Url = token.split(\".\")[1]
  const base64 = base64Url.replace(/-/g, \"+\").replace(/_/g, \"/\")
  const jsonPayload = decodeURIComponent(
    atob(base64).split(\"\").map((c) => \"%\" + (\"00\" + c.charCodeAt(0).toString(16)).slice(-2)).join(\"\")
  )
  return JSON.parse(jsonPayload)
}

Популярные платформы

Google Sign-In:

• Простая интеграция через Google API
• Большая база пользователей
• Встроенная двухфакторная аутентификация

GitHub Authentication:

const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=user`
window.location.href = githubAuthUrl

Facebook Login, Яндекс ID:

• Социальная информация пользователя
• Широкое распространение

JWT токены и управление сессией

После успешной авторизации сервис выдаёт токены:

const token = localStorage.getItem('authToken')

fetch('/api/user/profile', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
.then(res => {
  if (res.status === 401) {
    redirectToLogin()
  }
  return res.json()
})

const refreshAccessToken = async () => {
  const refreshToken = localStorage.getItem('refreshToken')
  const response = await fetch('/api/auth/refresh', {
    method: 'POST',
    body: JSON.stringify({ refreshToken })
  })
  const { accessToken } = await response.json()
  localStorage.setItem('authToken', accessToken)
}

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

Ключевые моменты:

• HTTPS только — все коммуникации должны быть зашифрованы
• Защита от CSRF — использование CSRF токенов
• Валидация токенов — проверка подписи JWT на бэкенде
• Secure cookies — флаги HttpOnly и Secure
• Ограничение области доступа — правильные scope в OAuth

Сторонние сервисы авторизации значительно упрощают управление пользователями и повышают надёжность системы аутентификации.