@vkid/sdk

VK ID SDK — это библиотека для безопасной и удобной авторизации пользователей в вашем сервисе через VK ID.

ℹ️ VK ID SDK поддерживает авторизацию по протоколу OAuth 2.1, а также способы входа через аккаунты Одноклассников и Mail.

Установка

NPM:

npm i @vkid/sdk@^2.0.0

YARN:

yarn add @vkid/sdk@^2.0.0

PNPM:

pnpm add @vkid/sdk@^2.0.0

CDN:

<script src="https://unpkg.com/@vkid/sdk@<3.0.0/dist-sdk/umd/index.js"></script>

Обратите внимание: Для работы авторизации нужен APP_ID. Вы получите его, когда создадите приложение в кабинете подключения VK ID.

Пример

Базовая авторизация

import * as VKID from '@vkid/sdk';

VKID.Config.init({
  app: APP_ID,
  redirectUrl: 'https://example.com',
  state: 'state',
  codeVerifier: 'codeVerifier',
  scope: 'phone email',
});


const authButton = document.getElementById('vk_auth_button');

authButton.onclick = () => {
  // После авторизации будет редирект на адрес, указанный в параметре redirectUrl
  VKID.Auth.login()
    .catch(console.error);
};

Подробнее - в документации по ссылке.

Кнопка OneTap

import * as VKID from '@vkid/sdk';

VKID.Config.init({
  app: APP_ID,
  redirectUrl: 'https://example.com',
  state: 'state',
  codeVerifier: 'codeVerifier',
  scope: 'phone email',
});

const oneTap = new VKID.OneTap();

const container = document.getElementById('VkIdSdkOneTap');

if (container) {
  oneTap
    .render({ container })
    .on(VKID.WidgetEvents.ERROR, console.error);
}

Подробнее - в документации по ссылке.

Шторка OneTap

import * as VKID from '@vkid/sdk';

VKID.Config.init({
  app: APP_ID,
  redirectUrl: 'https://example.com',
  state: 'state',
  codeVerifier: 'codeVerifier',
  scope: 'phone email',
});

const floatingOneTap = new VKID.FlotingOneTap();

floatingOneTap
  .render({ appName: APP_NAME })
  .on(VKID.WidgetEvents.ERROR, console.error);

Подробнее - в документации по ссылке.

Виджет 3 в 1

import * as VKID from '@vkid/sdk';

VKID.Config.init({
  app: APP_ID,
  redirectUrl: 'https://example.com',
  state: 'state',
  codeVerifier: 'codeVerifier',
  scope: 'phone email',
});

const oauthList = new VKID.OAuthList();

const container = document.getElementById('VkIdSdkOAuthList');

const oauthListNames = [
  VKID.OAuthName.VK,
  VKID.OAuthName.MAIL,
  VKID.OAuthName.OK,
];

if (container) {
  oauthList
    .render({ container, oauthList: oauthListNames })
    .on(VKID.WidgetEvents.ERROR, handleError);
}

Подробнее - в документации по ссылке.

Документация

• Что такое VK ID
• Создание приложения
• Требования к дизайну
• Спецификация

Contributing

Проект VK ID SDK имеет открытый исходный код на GitHub, и вы можете присоединиться к его доработке — мы будем благодарны за внесение улучшений и исправление возможных ошибок.

Code of Conduct

Если вы собираетесь вносить изменения в проект VK ID SDK, следуйте правилам разработки. Они помогут понять, какие действия возможны, а какие недопустимы.

Contributing Guide

В руководстве вы можете подробно ознакомиться с процессом разработки и узнать, как предлагать улучшения и исправления, а ещё — как добавлять и тестировать свои изменения в VK ID SDK. Также рекомендуем ознакомиться с общими правилами оформления кода в проекте.