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

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

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

npm i @xsolla/login-sdk

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

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

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

• projectId — ID варианта авторизации. Вы можете найти его в проекте в Личном кабинете в разделе Login > Дашборд.
• 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, который можно найти в проекте в Личном кабинете в разделе Login > проект авторизации > Безопасность > OAuth 2.0 аутентификация.
• redirectUri — URL-адрес, на который перенаправляется пользователь после подтверждения аккаунта, успешной аутентификации или подтверждения сброса пароля. Должен быть указан в Личном кабинете в настройках клиента OAuth 2.0.

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

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

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

1. Add a button with the on-click event and the xl.open() function to your HTML page:

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

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

1. Скачайте SDK с CDN или 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.

Разрешение Android-зависимостей

Для сборок под Android SDK использует функции из нативных Android-библиотек.

Чтобы разрешить зависимости и скачать необходимые библиотеки:

1. Укажите Android в качестве платформы для сборки:
   1. В главном меню редактора Unity выберите пункт File > Build Settings.
   2. В панели Platform выберите Android.
   3. Нажмите Switch Platform.

2. Запустите менеджер зависимостей:
   1. В главном меню редактора Unity выберите пункт Assets > External Dependency Manager > Android Resolver > Resolve.
   2. Дождитесь окончания работы менеджера зависимостей.

В результате все необходимые Android-библиотеки в виде JAR- или AAR-файлов будут загружены в папку Assets/Plugins/Android.

Настройка 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 варианта авторизации. Чтобы получить его, откройте проект в Личном кабинете, перейдите в раздел Login > Дашборд > проект авторизации и нажмите Скопировать ID рядом с названием варианта авторизации.
      3. В поле Callback URL укажите URL-адрес или путь в приложении, на который перенаправляются пользователи после успешной аутентификации, подтверждения электронной почты или сброса пароля. Значение должно совпадать с указанным в Личном кабинете в разделе Login > проект авторизации > Безопасность > OAuth 2.0 аутентификация.

1. 1. 4. В поле OAuth Client ID укажите ID клиента OAuth 2.0, который можно найти в Личном кабинете в разделе Login > проект авторизации > 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

Необходимые библиотеки доступны в Maven Central.

Для установки библиотек:

1. Запустите Android Studio.
2. Откройте файл build.gradle вашего приложения.
3. Добавьте следующие строки в раздел зависимостей, где <version_number> — необходимая версия библиотеки:

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

Инициализация SDK

Инициализируйте библиотеку Login, вызвав статичный метод на старте приложения. Для этого добавьте следующие строки в ваш исходный код проекта Android:

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

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

Чтобы открыть виджет:

1. Вызовите метод XLogin.startAuthWithXsollaWidget из библиотеки Login, передав в него следующие параметры:

1. • fragment или activity — текущий фрагмент или текущая активность.

1. • callback — обработчик статуса.

1. • 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).

2. Внутри метода onActivityResultвызовите метод XLogin.finishAuthWithXsollaWidget из библиотеки Login, передав в него следующие параметры:

1. • activity — текущая активность. Необходима для обработки контекста приложения.

1. • activityResultRequestCode — код запроса из метода onActivityResult. Используется для идентификации исходного запроса.

1. • activityResultCode — код результата из метода onActivityResult. Позволяет определить, была ли операция успешной.

1. • activityResultData — данные, возвращаемые из onActivityResult. Содержат результаты выполнения операции.

1. • callback — обработчик статуса. Используется для обработки результата аутентификации.

3. При обработке результата авторизации инициализируйте библиотеку Store.

Инициализация библиотеки Store:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

Установка 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 варианта авторизации. Чтобы получить его, откройте проект в Личном кабинете, перейдите в раздел Login > Дашборд > проект авторизации и нажмите Скопировать ID рядом с названием варианта авторизации. В поле Client ID укажите ID клиента OAuth 2.0, который можно найти в Личном кабинете в разделе Login > проект авторизации > 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.

Пример: