Реализация авторизации через VK ID на сайте

Реализация авторизации через VK ID на сайте

VK ID — унифицированная система авторизации ВКонтакте, пришедшая на смену старому VK Connect. Актуальна для русскоязычной аудитории: VK остаётся крупнейшей социальной сетью в России и СНГ. Поддерживает OAuth2, а также новый VK ID SDK с улучшенным UX.

Создание приложения

1. vk.com/dev → Мои приложения → Создать приложение
2. Тип: Веб-сайт
3. Указать адрес сайта и базовый домен
4. Сохранить ID приложения и Защищённый ключ
5. В настройках → Авторизация добавить разрешённые redirect URI

Laravel Socialite

composer require laravel/socialite
# Дополнительный провайдер для актуального VK API v5.131+:
composer require socialiteproviders/vkontakte

// config/services.php
'vkontakte' => [
    'client_id'     => env('VK_CLIENT_ID'),
    'client_secret' => env('VK_CLIENT_SECRET'),
    'redirect'      => env('VK_REDIRECT_URI'),
],

class VkAuthController extends Controller
{
    public function redirect(): RedirectResponse
    {
        return Socialite::driver('vkontakte')
            ->scopes(['email'])
            ->redirect();
    }

    public function callback(): RedirectResponse
    {
        try {
            $vkUser = Socialite::driver('vkontakte')->user();
        } catch (\Exception $e) {
            return redirect('/login')->withErrors(['vk' => 'Ошибка авторизации через VK']);
        }

        $user = User::updateOrCreate(
            ['vk_id' => $vkUser->getId()],
            [
                'name'   => $vkUser->getName(),
                'email'  => $vkUser->getEmail() ?: null,
                'avatar' => $vkUser->getAvatar(),
            ]
        );

        if ($vkUser->getEmail() && !$user->email_verified_at) {
            $user->update(['email_verified_at' => now()]);
        }

        Auth::login($user, remember: true);
        return redirect()->intended('/dashboard');
    }
}

Особенности VK OAuth

Email доступен только с явным scope. Даже с запрошенным scope email VK передаёт его не через стандартный OAuth, а в параметрах callback-запроса. Socialite-провайдер обрабатывает это автоматически.

Email может не прийти — если пользователь не подтвердил email в VK или не предоставил разрешение приложению.

Аватар: URL возвращается напрямую, актуален. Необязательно кэшировать.

VK ID SDK (новый способ)

ВКонтакте выпустил официальный VK ID SDK для JavaScript с поддержкой One Tap-авторизации:

<script src="https://unpkg.com/@vkid/sdk@latest/dist-cdn/index.js"></script>
<div id="vkid-container"></div>

<script>
  const { VKID, OneTap, Auth } = window['@vkid/sdk'];

  VKID.Config.init({
    app: parseInt('{{ config("services.vkontakte.client_id") }}'),
    redirectUrl: '{{ config("services.vkontakte.redirect") }}',
    responseMode: VKID.ConfigResponseMode.Callback,
  });

  const oneTap = new OneTap();
  oneTap.render({ container: document.getElementById('vkid-container') })
    .on(Auth.AuthEventType.LOGIN_SUCCESS, (payload) => {
      fetch('/auth/vk/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
        body: JSON.stringify({
          silent_token: payload.token,
          uuid: payload.uuid,
        }),
      });
    });
</script>

// Обмен silent_token на access_token через VK API
public function handleToken(Request $request): JsonResponse
{
    $response = Http::get('https://api.vk.com/method/auth.exchangeSilentAuthToken', [
        'v'            => '5.199',
        'token'        => $request->silent_token,
        'access_token' => config('services.vkontakte.service_token'),
        'uuid'         => $request->uuid,
    ]);

    $data = $response->json('response');
    // $data содержит access_token, user_id, email
}

Сроки

OAuth2-флоу через Socialite — 1–1.5 рабочих дня. С VK ID SDK и обработкой отсутствующего email — 2–3 дня.