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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
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 по нажатию на кнопку Аккаунт 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 во всплывающем окне по нажатию на кнопку на вашем сайте:
     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. Добавьте на ваш сайт кнопку, вызывающую страницу авторизации Аккаунта Xsolla.

Пример кода для кнопки Аккаунт Xsolla:

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

1. • С открытием страницы авторизации Аккаунт Xsolla в модальном окне по нажатию на кнопку Аккаунт 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. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
2. Нажмите Настроить в панели нужного варианта авторизации.
3. Перейдите к блоку Настройки аутентификации и выберите раздел Авторизация через социальные сети.

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

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

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

В другой раз

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