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

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

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

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

• Открытие страницы аутентификации Xsolla ID в модальном окне при нажатии кнопки Log in with Xsolla в виджете авторизации:

  1. Пользователь нажимает кнопку Log in with Xsolla в виджете авторизации.
  2. Пользователь перенаправляется на страницу аутентификации Xsolla ID, которая открывается в модальном окне.
  3. Пользователь завершает процесс аутентификации на странице Xsolla ID.
  4. Пользователь перенаправляется на URL, указанный в поле Callback URL в Личном кабинете.

• Перенаправление на страницу аутентификации Xsolla ID при нажатии кнопки Log in with Xsolla в виджете авторизации:

  1. Пользователь нажимает кнопку Log in with Xsolla в виджете авторизации.
  2. Пользователь перенаправляется на экран аутентификации Xsolla ID, который открывается в том же окне.
  3. Пользователь завершает процесс аутентификации на Xsolla ID.
  4. Пользователь перенаправляется на страницу, URL которой указан в поле Callback URL в Личном кабинете.

• Перенаправление на страницу аутентификации Xsolla ID во всплывающем окне при нажатии кнопки на вашем сайте:

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

Как получить

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

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

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

Добавьте виджет Xsolla Login в ваше приложение — он предоставляет готовый интерфейс для аутентификации пользователя.

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

1. В вашем проекте в Личном кабинете перейдите в раздел Players > Login.

2. Нажмите Configure в панели варианта авторизации.

3. Перейдите в блок Authentication и выберите Social login.

4. Выберите Xsolla из списка социальных сетей.

5. Нажмите на ⚙ и выберите Connect.

6. Настройте один из сценариев для пользователя:

   • Аутентификация в том же окне
   • Аутентификация во всплывающем окне
   • Аутентификация в модальном окне

Аутентификация в том же окне

Чтобы перенаправить пользователя на страницу аутентификации Xsolla ID после нажатия кнопки Log in with Xsolla в виджете авторизации:

1. Перейдите в раздел Authentication и нажмите Callback URLs.
2. В поле Callback URL введите URL, на который будет перенаправлен пользователь после аутентификации.
3. В параметре callbackUrl кода виджета авторизации укажите URL, на который будет перенаправлен пользователь после аутентификации.

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

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

Аутентификация во всплывающем окне

Чтобы перенаправить пользователя на страницу аутентификации Xsolla ID во всплывающем окне после нажатия кнопки на вашем сайте:

1. На странице навигации перейдите в раздел Authentication и нажмите Callback URLs.
2. Убедитесь, что в разделе Callback URL добавлен следующий URL: https://login.xsolla.com/api/social/oauth2/callback.
3. В коде виджета авторизации укажите значение true в параметре babkaLoginPopup, а также укажите URL, на который будет перенаправлен пользователь после аутентификации, в параметре callbackUrl.

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

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

4. Добавьте кнопку, открывающую страницу аутентификации Xsolla ID, на ваш сайт.

Пример кода кнопки Log in with Xsolla:

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

Аутентификация в модальном окне

Чтобы перенаправить пользователя на страницу аутентификации Xsolla ID в модальном окне после нажатия кнопки Log in with Xsolla в виджете авторизации:

1. Перейдите в раздел Authentication и нажмите Callback URLs.
2. В поле Callback URL введите URL, на который будет перенаправлен пользователь после аутентификации.
3. В коде виджета авторизации укажите значение popup в параметре babkaLoginFlow, а также укажите URL, на который будет перенаправлен пользователь после аутентификации, в параметре callbackUrl.

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

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

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

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

Чтобы встроить OAuth JWT токен Xsolla ID в JWT токен Xsolla Login:

1. В вашем проекте в Личном кабинете перейдите в раздел Players > Login.
2. Нажмите Configure в панели варианта авторизации.
3. Перейдите в блок Authentication и выберите Social login.
4. Включите переключатель Embed social network JWT token.
5. Нажмите Save changes.