Аутентификация пользователей в приложении

Для обеспечения безопасности и корректной работы платежных операций Xsolla API использует JSON Web Token (JWT) пользователя, полученный при авторизации с помощью Xsolla Login.

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

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

Выберите наиболее подходящий для вашего проекта SDK:

Общие инструкции по импорту виджета и работе с ним приведены в README-файле.

Используйте в качестве примера реализации тестовые веб-приложения:

Java;
TypeScript.

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

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

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

Запустите консоль и выполните команду:

Copy

Full screen

Small screen

npm i @xsolla/login-sdk

Добавьте в тег <head> HTML-страницы, на которой будет размещен виджет, следующий код:

Copy

Full screen

Small screen

<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.

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

Добавьте код инициализации в JS-файл:

Copy

Full screen

Small screen

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'
});

Добавьте код инициализации виджета в тег <body>:

Copy

Full screen

Small screen

<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

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

Copy

Full screen

Small screen

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

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

Добавьте следующий код в JS-файл:

Copy

Full screen

Small screen

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

Добавьте код открытия виджета в тег <body>:

Copy

Full screen

Small screen

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

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

    xl.open();
  }
</script>

Общие инструкции по установке и использованию SDK приведены в разделе SDK для Unity (ПК, веб).

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

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

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

Рекомендуется использовать компилятор Mono для настольных платформ, так как он совместим с предоставляемым внутриигровым браузером. Если вы используете другой браузер, вы можете применить компилятор IL2CPP вместо Mono.

Убедитесь, что для создания сборки игры используется компилятор Mono (только для standalone-сборок):

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

Настройка SDK

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

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

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

Если вы зарегистрировались в Личном кабинете с помощью аккаунта социальной сети, добавьте пароль к учетной записи одним из следующих способов, чтобы импортировать настройки из Личного кабинета:

На странице входа/регистрации в Личном кабинете перейдите по ссылке Забыли пароль? и следуйте инструкциям.
Укажите новый пароль в Личном кабинете в разделе Настройки профиля > Смена пароля (в поле Текущий пароль укажите произвольное значение).

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

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

Задайте другие настройки, если необходимо (например, параметры отображения платежного интерфейса в разделе 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 приведены в разделе SDK enterprise-уровня для Unreal Engine.

Установка SDK

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

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

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

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

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

Настройка SDK

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

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

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

Перейдите в 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.

Пример:

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

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

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

Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.

Последнее обновление: 20 декабря 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Содержание

Подключение SDK виджета Xsolla Login
Инициализация SDK виджета Xsolla Login
Открытие виджета Xsolla Login
Импорт пакета из архива
Настройка компилятора
Настройка SDK
Открытие виджета Xsolla Login
Установка SDK
Настройка SDK
Открытие виджета Xsolla Login

Your browser is not supported. Please try a different browser

Аутентификация пользователей в приложении

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

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

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

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

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

Настройка SDK

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

Установка SDK

Настройка SDK

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

Как мы используем файлы cookie