Подключение 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. Add a button with the on-click event and the xl.open() function to your HTML page:

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>

Импорт пакета из архива

1. Скачайте последнюю версию SDK (рекомендуется)  или выберите требуемую версию SDK на GitHub и скачайте ее.
2. Распакуйте архив.
3. Откройте свой проект Unity или создайте новый.
4. В главном меню редактора Unity выберите пункт Assets > Import Package > Custom Package и выберите SDK.

Настройка компилятора

1. В главном меню выберите пункт Edit > Project Settings.
2. Перейдите в раздел Player > Other Settings > Configuration.
3. Убедитесь, что в поле Scripting Backend выбрано значение Mono.

Настройка SDK

1. Откройте проект Unity.
2. В главном меню выберите пункт Window > Xsolla > Edit Settings.
3. Укажите основные параметры проекта в панели Inspector одним из следующих способов:

1. 1. Импортируйте настройки из Личного кабинета:
      1. Нажмите Fill settings by PA.
      2. Укажите авторизационные данные Личного кабинета в полях Login и Password.
      3. Нажмите Log In.
      4. Заполните поля в разделе Publisher Account.

1. 1. 5. Нажмите Apply Settings.

1. 2. Укажите параметры вручную:
      1. В поле Project ID укажите ID проекта, который можно найти в Личном кабинете рядом с названием проекта.
      2. В поле Login ID укажите ID варианта авторизации. Чтобы получить его, откройте проект в Личном кабинете, перейдите в раздел Игроки > Авторизация > Дашборд > проект авторизации и нажмите Скопировать ID рядом с названием варианта авторизации.
      3. В поле Callback URL укажите URL-адрес или путь в приложении, на который перенаправляются пользователи после успешной аутентификации, подтверждения электронной почты или сброса пароля. Значение должно совпадать с указанным в Личном кабинете в разделе Login > проект авторизации > Безопасность > OAuth 2.0 аутентификация.

1. 1. 4. В поле OAuth Client ID укажите ID клиента OAuth 2.0, который можно найти в Личном кабинете в разделе Игроки > Авторизация > проект авторизации > OAuth 2.0 аутентификация.

4. Задайте другие настройки, если необходимо (например, параметры отображения платежного интерфейса в разделе Pay Station UI).

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

Чтобы открыть виджет, вызовите метод SDK XsollaAuth.AuthWithXsollaWidget и передайте в него:

• onSuccess — обработчик, вызываемый после успешной аутентификации пользователя.
• onError — обработчик, вызываемый в случае ошибки запроса.
• onCancel — обработчик отмены аутентификации, срабатывающий при закрытии виджета пользователем без прохождения аутентификации.
• locale — язык интерфейса (опционально). Поддерживаются следующие языки: арабский (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).

В standalone-сборках виджет открывается во встроенном браузере, который входит в состав SDK. Вы можете использовать любой другой встроенный браузер, позволяющий отслеживать изменения URL-адресов.

Установка SDK

1. Скачайте Epic Games Launcher.
2. Создайте новый проект Unreal Engine.

3. Загрузите и установите SDK одним из способов:
   1. Чтобы загрузить и установить SDK через Unreal Engine Marketplace:
      1. Откройте страницу SDK на Unreal Engine Marketplace.
      2. Нажмите Open in Launcher.

1. 1. 3. Перейдите в Epic Games Launcher.

1. 1. 4. Нажмите Install to Engine.
      5. Откройте проект Unreal Engine в Unreal Editor.
      6. Перейдите в раздел Settings > Plugins > Installed > Xsolla SDK, установите флажок Enabled и нажмите кнопку Restart Now, чтобы сохранить настройки и перезапустить Unreal Editor.

1. 2. Чтобы загрузить и установить SDK через GitHub:
      1. Скачайте архив с SDK для вашей версии движка.
      2. Распакуйте архив.
      3. Переместите папку с SDK в директорию plugins в корне вашего проекта Unreal Engine.

Настройка SDK

1. Откройте проект Unreal Engine в Unreal Editor.
2. Перейдите в Settings > Project Settings > Plugins > Xsolla Settings > General и укажите параметры проекта:

1. 1. В поле Project ID укажите ID проекта, который можно найти в Личном кабинете рядом с названием проекта.
   2. В поле Login ID укажите ID варианта авторизации. Чтобы получить его, откройте проект в Личном кабинете, перейдите в раздел Игроки > Авторизация > Дашборд > проект авторизации и нажмите Скопировать ID рядом с названием варианта авторизации. В поле Client ID укажите ID клиента OAuth 2.0, который можно найти в Личном кабинете в разделе Игроки > Авторизация > проект авторизации > OAuth 2.0 аутентификация.
   3. В поле Redirect URI укажите URL-адрес или путь в приложении, на который перенаправляются пользователи после успешной аутентификации, подтверждения электронной почты или сброса пароля. Значение должно совпадать с указанным в Личном кабинете в разделе Login > проект авторизации > OAuth 2.0 аутентификация.
   4. Задайте другие настройки, если необходимо (например, параметры отображения платежного интерфейса в разделе Pay Station UI).

1. В результате проект в Личном кабинете будет подключен к демокартам.

3. Перейдите в Content Browser > View Options и установите флажки Show Engine Content и Show Plugin Content.

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

Вызовите метод SDK AuthWithXsollaWidget, передав следующие параметры:

• WorldContextObject — объект, который предоставляет контекст игрового мира (для вызова C++).
• SuccessCallback — обработчик успешной аутентификации пользователя и получения токена (опционально).
• CancelCallback — обработчик отмены аутентификации, срабатывающий при закрытии виджета пользователем без прохождения аутентификации (опционально).
• ErrorCallback — обработчик ошибок, возникающих при процессе аутентификации (опционально).
• bRememberMe — указывает, необходимо ли сохранять данные аутентификации (опционально). По умолчанию установлено значение false.
• Locale — язык интерфейса (опционально). По умолчанию значение определяется по IP-адресу пользователя.
• State — строка, используемая для дополнительной верификации пользователя на сервере приложения. По умолчанию установлено значение xsollatest.

Пример: