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 SDK имеет открытый исходный код на GitHub, и вы можете присоединиться к его доработке — мы будем благодарны за внесение улучшений и исправление возможных ошибок.
Если вы собираетесь вносить изменения в проект VK ID SDK, следуйте правилам разработки. Они помогут понять, какие действия возможны, а какие недопустимы.
В руководстве вы можете подробно ознакомиться с процессом разработки и узнать, как предлагать улучшения и исправления, а ещё — как добавлять и тестировать свои изменения в VK ID SDK. Также рекомендуем ознакомиться с общими правилами оформления кода в проекте.