https://github.com/vkcom/vkid-web-sdk
https://github.com/vkcom/vkid-web-sdk
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/vkcom/vkid-web-sdk
- Owner: VKCOM
- License: mit
- Created: 2023-09-25T13:28:13.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-14T09:23:36.000Z (about 1 year ago)
- Last Synced: 2025-05-07T04:08:02.768Z (about 1 year ago)
- Language: TypeScript
- Size: 652 KB
- Stars: 20
- Watchers: 11
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
VK ID SDK — это библиотека для безопасной и удобной авторизации пользователей в вашем сервисе через VK ID.
---
ℹ️ VK ID SDK поддерживает авторизацию по протоколу [OAuth 2.1](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-v2-1-10), а также способы входа через аккаунты Одноклассников и Mail.
---
## Установка
**NPM:**
```sh
npm i @vkid/sdk@^2.0.0
```
**YARN:**
```sh
yarn add @vkid/sdk@^2.0.0
```
**PNPM:**
```sh
pnpm add @vkid/sdk@^2.0.0
```
**CDN:**
```html
```
> Обратите внимание: Для работы авторизации нужен APP_ID. Вы получите его, когда [создадите](https://id.vk.com/business/go/docs/ru/vkid/latest/vk-id/connection/create-application) приложение в кабинете подключения VK ID.
## Пример
Базовая авторизация
```javascript
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);
};
```
Подробнее - в документации по [ссылке](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/elements/custom-button/custom-button-web).
Кнопка OneTap
```javascript
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);
}
```
Подробнее - в документации по [ссылке](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/elements/onetap-button/onetap-web).
Шторка OneTap
```javascript
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);
```
Подробнее - в документации по [ссылке](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/elements/onetap-drawer/floating-onetap-web).
Виджет 3 в 1
```javascript
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);
}
```
Подробнее - в документации по [ссылке](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/elements/widget-3-1/three-in-one-web).
## Документация
- [Что такое VK ID](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/intro/start-page)
- [Создание приложения](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/create-application)
- [Требования к дизайну](https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/guidelines/design-rules-oauth)
- [Спецификация](https://vkcom.github.io/vkid-web-sdk/docs)
## Contributing
Проект VK ID SDK имеет открытый исходный код на GitHub, и вы можете присоединиться к его доработке — мы будем благодарны за внесение улучшений и исправление возможных ошибок.
### Code of Conduct
Если вы собираетесь вносить изменения в проект VK ID SDK, следуйте правилам [разработки](CODE_OF_CONDUCT.md). Они помогут понять, какие действия возможны, а какие недопустимы.
### Contributing Guide
В [руководстве](CONTRIBUTING.md) вы можете подробно ознакомиться с процессом разработки и узнать, как предлагать улучшения и исправления, а ещё — как добавлять и тестировать свои изменения в VK ID SDK.
Также рекомендуем ознакомиться с общими [правилами оформления кода](CODE_STYLE.md) в проекте.