Если вы используете собственную систему авторизации, на этом этапе достаточно убедиться, что она хранит и может передавать данные, необходимые Xsolla для работы подписок, а именно:

• уникальный ID пользователя;
• email-адрес пользователя.

В этом случае мы рекомендуем создать сайт по шаблону Web Shop и настроить авторизацию пользователя по ID или с помощью диплинков.

Для этого:

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. Нажмите Создать сайт.
3. Выберите шаблон Web Shop.
4. Добавьте URL-адрес внешней платформы, где доступна ваша игра. Это позволит быстро создать страницу в стиле вашей игры: для страницы автоматически добавляются изображения и название игры, сведения о разработчике, а также цветовая гамма. Если вы не хотите использовать данные игры, установите переключатель Копировать данные игры из App Store или Google Play через URL в неактивное положение.

5. Нажмите Создать Web Shop.

6. Настройте один из следующих способов аутентификации пользователя:

   • Аутентификация через ID пользователя.
   • Аутентификация через ID пользователя и диплинк.
   • Аутентификация через диплинк.
   • Аутентификация с привязкой ID пользователя.

Настройка варианта авторизации в Личном кабинете

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

Позже вы сможете изменить способ аутентификации пользователя или использовать другой способ интеграции.

Xsolla предоставляет стандартные шаблоны для виджета авторизации. Их внешний вид и наполнение определяются способом авторизации, выбранным для проекта, и настройками кастомизации виджета в Личном кабинете.

Стандартный вид виджета для аутентификации по одноразовому коду или через социальные сети:

Чтобы настроить вариант авторизации в Личном кабинете:

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Игроки > Авторизация.
2. В разделе Дашборд нажмите Создать вариант авторизации.
3. Выберите Стандартный вариант авторизации и нажмите Создать и настроить. Подождите, пока вариант авторизации не будет создан. Затем вы увидите страницу настроек варианта авторизации.
4. В блоке Способы авторизации выберите Авторизация без пароля.
5. Нажмите Настроить.
6. Настройте авторизацию по одноразовому коду:
   1. В блоке Авторизация без пароля выберите раздел Настройки callback URL.
   2. В поле Callback URL добавьте URL-адрес, на который перенаправляются пользователи после их успешной аутентификации.
   3. Нажмите Сохранить изменения.
7. Настройте аутентификацию через социальные сети (опционально):
   1. Нажмите название вашего варианта авторизации в цепочке навигации, чтобы вернуться на страницу варианта авторизации.
   2. Перейдите к блоку Аутентификация и выберите раздел Авторизация через социальные сети.
   Подключите социальные сети, через которые пользователи смогут регистрироваться и входить в приложение. Это можно сделать одним из следующих способов:

1. 1. • Чтобы подключить нужную социальную сеть, нажмите значок ⚙ и выберите пункт Подключить.

1. 1. • Чтобы подключить сразу несколько социальных сетей, выберите нужные панели (рамки панелей станут зелеными). Затем в раскрывающемся меню Управление выберите пункт Подключить.

1. 1. • Чтобы подключить сразу все доступные социальные сети, нажмите Выбрать все. Затем в раскрывающемся меню Управление выберите пункт Подключить.

1. 4. Нажмите Сохранить изменения.

Чтобы протестировать настройки виджета, нажмите Проверить виджет в левой части экрана и авторизуйтесь

В процессе интеграции вам понадобится ID варианта авторизации, который можно найти в проекте в Личном кабинете, в разделе Игроки > Авторизация > Дашборд.

Настройка авторизации в приложении

Ниже приведены инструкции по наиболее быстрому способу интеграции Xsolla Login — интеграция в приложение готового веб-виджета.

Если вы хотите использовать собственный интерфейс для входа пользователей в ваше приложение, реализуйте логику аутентификации пользователей c помощью Login API или методов SDK.

Подключение SDK виджета Xsolla Login

Виджет Xsolla Login доступен для установки с помощью менеджера пакетов NPM или тега <script> на HTML-странице.

Подключите SDK виджета Xsolla Login одним из следующих способов:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

Инициализация SDK виджета Xsolla Login

Инициализируйте виджет одним из способов, приведенных ниже. Укажите следующие параметры:

• projectId — ID варианта авторизации. Вы можете найти его в проекте в Личном кабинете в разделе Игроки > Авторизация > Дашборд.
• preferredLocale — язык интерфейса. Поддерживаются следующие языки: арабский (ar_AE), болгарский (bg_BG), чешский (cz_CZ), английский (en_US), немецкий (de_DE), испанский (es_ES), французский (fr_FR), иврит (he_IL), итальянский (it_IT), японский (ja_JP), корейский (ko_KR), польский (pl_PL), португальский (pt_BR), румынский (ro_RO), русский (ru_RU), тайский (th_TH), турецкий (ttr_TR), вьетнамский (vi_VN), китайский упрощенный (zh_CN), китайский традиционный (zh_TW).
• clientId — ID клиента OAuth 2.0, который можно найти в проекте в Личном кабинете в разделе Игроки > Авторизация > проект авторизации > Безопасность > OAuth 2.0 аутентификация.
• redirectUri — URL-адрес, на который перенаправляется пользователь после подтверждения аккаунта, успешной аутентификации или подтверждения сброса пароля. Должен быть указан в Личном кабинете в настройках клиента OAuth 2.0.

Остальные параметры оставьте без изменений.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

Открытие виджета Xsolla Login

1. Добавьте на HTML-страницу кнопку с событием on-click и функцию xl.open():

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. Добавьте код для открытия виджета в блок <div> HTML-страницы.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Настройка варианта авторизации в Личном кабинете

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

Позже вы сможете изменить способ аутентификации пользователя.

Чтобы настроить вариант авторизации в Личном кабинете:

1. Откройте ваш проект в Личном кабинете и перейдите в раздел Игроки > Авторизация.
2. В разделе Дашборд нажмите Создать вариант авторизации.
3. Выберите Стандартный вариант авторизации и нажмите Создать и настроить. Подождите, пока вариант авторизации не будет создан. Затем вы увидите страницу настроек варианта авторизации.
4. В блоке Способы авторизации выберите Авторизация без пароля.
5. Нажмите Настроить.
6. Настройте авторизацию по одноразовому коду:
   1. В блоке Авторизация без пароля выберите раздел Настройки callback URL.
   2. В поле Callback URL добавьте URL-адрес, на который перенаправляются пользователи после их успешной аутентификации.
   3. Нажмите Сохранить изменения.
7. Настройте аутентификацию через социальные сети (опционально):
   1. Нажмите название вашего варианта авторизации в цепочке навигации, чтобы вернуться на страницу варианта авторизации.
   2. Перейдите к блоку Аутентификация и выберите раздел Авторизация через социальные сети.
   Подключите социальные сети, через которые пользователи смогут регистрироваться и входить в приложение. Это можно сделать одним из следующих способов:

1. 1. • Чтобы подключить нужную социальную сеть, нажмите значок ⚙ и выберите пункт Подключить.

1. 1. • Чтобы подключить сразу несколько социальных сетей, выберите нужные панели (рамки панелей станут зелеными). Затем в раскрывающемся меню Управление выберите пункт Подключить.

1. 1. • Чтобы подключить сразу все доступные социальные сети, нажмите Выбрать все. Затем в раскрывающемся меню Управление выберите пункт Подключить.

1. 4. Нажмите Сохранить изменения.

Настройка авторизации в конструкторе сайтов

Чтобы создать сайт и настроить аутентификацию пользователей:

1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
2. Нажмите Создать сайт.
3. Выберите любой шаблон сайта и перейдите к созданию сайта.

4. В конструкторе перейдите в раздел Настройки входа > Xsolla Login и в раскрывающемся списке выберите ранее настроенный вариант авторизации.
5. Чтобы модальное окно авторизации соответствовало цветовой схеме сайта, установите переключатель Использовать тему сайта в активное положение (рекомендуется).
6. В разделе Настройки блока при необходимости настройте логотип и пользовательский фон.