Как интегрировать Babka Login

Как это работает

Вы можете добавить на ваш сайт возможность аутентификации пользователя через Babka Login — с помощью аккаунта пользователя в Babka. Существуют следующие способы интеграции: 

• Кнопка Babka Accounts. В этом случае:
  • Не нужно создавать и настраивать проект Авторизации Иксолла в Личном кабинете.
  • Необходимо на серверной стороне вашего приложения реализовать обмен кода авторизации на авторизационный токен пользователя.

• Babka Login как социальная сеть в виджете Авторизации Иксолла. В этом случае:
  • Необходимо создать и настроить проект Авторизации Иксолла в Личном кабинете.
  • Вы сразу получаете авторизационный токен пользователя на вашем сайте.

Интеграция кнопки Babka Accounts

Чтобы интегрировать кнопку Babka Login:

1. Создайте клиент Babka Login OAuth 2.0.
2. Интегрируйте кнопку Babka Accounts на стороне вашего приложения.
3. Реализуйте получение авторизационный токена пользователя.

Создание клиента Babka Login OAuth 2.0

Чтобы создать клиент Babka OAuth 2.0:

1. Свяжитесь с аккаунт-менеджером проекта и предоставьте следующие данные:

2. Интеграционная команда Иксоллы создаст клиент Babka Login OAuth 2.0 для вас и предоставит его идентификатор и секретный ключ. Эти данные необходимы для получения авторизационного токена пользователя.

Интеграция кнопки Babka Accounts на стороне приложения

Интегрируйте кнопку Babka Accounts на стороне вашего приложения с помощью Babka Login SDK.

Получение авторизационного токена пользователя

После авторизации на стороне Babka Login, пользователь будет переадресован на URI-адрес, указанный в параметре redirect_uri. Чтобы получить авторизационный токен пользователя, воспользуйтесь инструкцией. Чтобы обновить авторизационный токен пользователя по истечении срока его действия, воспользуйтесь инструкцией.

Интеграция Babka Login как социальной сети

Чтобы интегрировать Babka Login как социальную сеть:

1. Создайте клиент Babka Login OAuth 2.0.
2. Интегрируйте виджет авторизации.
3. Подключите Babka Login как социальную сеть.
4. Реализуйте получение авторизационного токена пользователя.

Создание клиента Babka Login OAuth 2.0

Чтобы создать клиент Babka Login OAuth 2.0:

1. Создайте проект в Личном кабинете.
2. Настройте вариант авторизации в Личном кабинете.
3. Свяжитесь с аккаунт-менеджером проекта и предоставьте следующие данные:

4. Интеграционная команда Иксоллы создаст клиент Babka Login OAuth 2.0 для вас и предоставит его идентификатор и секретный ключ. Эти данные необходимы для получения авторизационного токена пользователя.

Интеграция виджета авторизации

Интегрируйте виджет Авторизации Иксолла с помощью SDK.

Подключение Babka Login как социальной сети

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
2. Нажмите Настроить в панели нужного варианта авторизации.
3. Перейдите к блоку Настройки аутентификации и выберите раздел Авторизация через социальные сети.
4. В списке социальных сетей найдите панель Babka.

5. Нажмите значок ⚙ и выберите пункт Настройки.
6. Заполните следующие поля:
   • ID приложения — идентификатор клиента Babka Login OAuth 2.0, который вы получили от Иксоллы.
   • Секретный ключ приложения — ключ Babka Login OAuth 2.0, который вы получили от Иксоллы.
   • Разрешенные ресурсы — сайт, с которого будут приходить запросы на обмен кода авторизации на авторизационный токен пользователя. Укажите тот же URL-адрес, который был указан в качестве параметра Audience при создании клиента Babka Login OAuth 2.0.

7. Нажмите Подключить.
8. Включите использование всплывающего окна Babka Login (опционально):
   1. Перейдите к блоку Настройки аутентификации и выберите раздел Настройки Callback URL.
   2. В поле Callback URL введите https://login-widget.xsolla.com/latest/babka-auth-succeed.
   3. В коде виджета передайте значение true в параметре babkaLoginPopup, в параметре callbackUrl передайте URL-адрес страницы, на которую необходимо перенаправить пользователя после аутентификации.

Пример кода виджета:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. 4. Добавьте кнопку Babka Account на сайт.

Пример кода для кнопки Babka Accounts:

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

Получение авторизационного токена пользователя

После авторизации на стороне Babka Login, пользователь будет переадресован на URL-адрес, указанный в параметре callback_url. В параметре token передается авторизационный токен пользователя.

Чтобы внутри авторизационного токена пользователя передавать токен Babka Login OAuth:

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
2. Нажмите Настроить в панели нужного варианта авторизации.
3. Перейдите к блоку Настройки аутентификации и выберите раздел Авторизация через социальные сети.

4. Установите переключатель Встраивать JWT токен социальной сети в положение Вкл.
5. Нажмите Сохранить изменения.

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

Спасибо за обратную связь!