Как подключить VK ID OAuth 2.1 + PKCE за 10 минут

VK ID — самый популярный провайдер авторизации в России с 100+ млн пользователей. В этом гайде покажем, как подключить его через Синапсия Авторизация без погружения в особенности VK ID API.

Шаг 1: Создайте приложение VK ID

Перейдите на id.vk.com/about/business → «Подключить VK ID» → создайте Web-приложение.

На шаге настройки redirect URI укажите:

https://auth.synapsea.agency/callback/vk

Шаг 2: Настройте провайдер в Dashboard

В Dashboard → ваш проект → Провайдеры → VK ID:

PUT /api/v1/manage/tenants/:id/providers/vk
{
  "clientId": "54490829",        // ID приложения VK
  "clientSecret": "ваш_защищённый_ключ"  // Защищённый ключ (не сервисный!)
}

Шаг 3: Добавьте кнопку на фронтенд

const res = await fetch('https://auth.synapsea.agency/api/v1/auth/sign-in/social', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Synapsea-Key': 'sa_live_xxxxxxx',
  },
  body: JSON.stringify({
    provider: 'vk',
    callbackURL: 'https://yoursite.com/auth/callback',
  }),
});

const { url } = await res.json();
window.location.href = url;
// → Пользователь уходит на id.vk.com/authorize
// → После авторизации возвращается на ваш callbackURL

Что происходит под капотом

Синапсия автоматически:

1. Генерирует code_verifier и code_challenge (PKCE, обязательно для VK ID)

2. Сохраняет state в Redis (5 мин TTL, одноразовый)

3. Перенаправляет на id.vk.com/authorize

4. При возврате обменивает code на токены с device_id (обязательно для VK ID v2)

5. Получает профиль с /oauth2/user_info (требует client_id в body)

6. Создаёт/находит пользователя, генерирует сессию, перенаправляет к вам

Частые ошибки

redirect_uri_mismatch: URL в настройках VK-приложения должен точно совпадать с callback URL Синапсии.

Пустой профиль (undefined): VK ID v2 требует передавать client_id в запросе user_info — Синапсия делает это автоматически.

Invalid state: VK может обрезать padding из state — Синапсия использует URL-safe random state ID без спецсимволов.