Как интегрировать аутентификацию пользователя через аккаунт Xsolla

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

Вы можете добавить аутентификацию пользователя с помощью учетной записи Xsolla в Xsolla Wallet.

Сценарии пользователя

Вы можете реализовать один из следующих сценариев пользователя:

1. С открытием страницы авторизации Xsolla Wallet в модальном окне по нажатию на кнопку Аккаунт Xsolla в виджете авторизации:
   1. Пользователь нажимает на кнопку Войти с Xsolla в виджете авторизации.
   2. Происходит переадресация на экран авторизации Xsolla Wallet. Экран авторизации открывается в модальном окне.
   3. Пользователь проходит авторизацию на стороне Xsolla Wallet.
   4. Происходит переадресация на страницу, URL-адрес которой указан в Личном кабинете в поле Callback URL.

2. С переадресацией на страницу авторизации Xsolla Wallet по нажатию на кнопку Войти с Xsolla в виджете авторизации:
   1. Пользователь нажимает на кнопку Войти с Xsolla в виджете авторизации.
   2. Происходит переадресация на экран авторизации Xsolla Wallet. Экран авторизации открывается в том же окне.
   3. Пользователь проходит авторизацию на стороне Xsolla Wallet.
   4. Происходит переадресация на страницу, URL-адрес которой указан в Личном кабинете в поле Callback URL.

3. Переадресацией на страницу авторизации Xsolla Wallet во всплывающем окне по нажатию на кнопки на вашем сайте:
   1. Пользователь нажимает на кнопку на вашем сайте.
   2. Происходит переадресация на экран авторизации Xsolla Wallet. Экран авторизации открывается во всплывающем окне.
   3. Пользователь проходит авторизацию на стороне Xsolla Wallet.
   4. Происходит переадресация на страницу, URL-адрес которой указан в Личном кабинете в поле Callback URL.

Как настроить

Чтобы интегрировать аутентификацию через Xsolla как социальную сеть:

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

Создание клиента OAuth 2.0 аккаунта Xsolla

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

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

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

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

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

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

7. Нажмите Connect.

8. Настройте один из сценариев пользователя:
   • С переадресацией на страницу авторизации Xsolla Wallet по нажатию на кнопку Войти с Xsolla в виджете авторизации (по умолчанию):
     1. Перейдите к блоку Аутентификация и выберите раздел Настройки Callback URL.
     2. В поле Callback URL введите URL-адрес страницы, на которую необходимо перенаправить пользователя после аутентификации.
     3. В коде виджета в параметре callbackUrl передайте URL-адрес страницы, на которую необходимо перенаправить пользователя после аутентификации.

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

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

1. • С переадресацией на страницу авторизации Xsolla Wallet во всплывающем окне по нажатию на кнопку на вашем сайте:
     1. Перейдите к блоку Аутентификация и выберите раздел Настройки Callback URL.
     2. Убедитесь, что в области Callback URL добавлены следующие значения:
        • https://login-widget.xsolla.com/latest/babka-auth-succeed;
        • https://login.xsolla.com/api/social/oauth2/callback.
     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. Добавьте на ваш сайт кнопку, вызывающую страницу авторизации Xsolla Wallet.

Пример кода для кнопки Войти с Xsolla:

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

1. • С открытием страницы авторизации Xsolla Wallet в модальном окне по нажатию на кнопку Войти с Xsolla в виджете авторизации:
     1. Перейдите к блоку Аутентификация и выберите раздел Настройки Callback URL.
     2. В поле Callback URL введите URL-адрес страницы, на которую необходимо перенаправить пользователя после аутентификации.
     3. В коде виджета передайте значение popup в параметре babkaLoginFlow, в параметре callbackUrl передайте URL-адрес страницы, на которую необходимо перенаправить пользователя после аутентификации.

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

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

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

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

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

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

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