Настройка аутентификации через диплинк
Диплинки позволяют пользователю авторизоваться в Web Shop через игру в один клик, вместо того чтобы проходить процесс авторизации через ID пользователя или через Xsolla Login.
Если у пользователя на мобильном устройстве установлена игра, с помощью диплинка он будет перенаправлен в игру для получения авторизационного токена.
Сценарий пользователя
В мобильном приложении
- Неавторизованный пользователь в Web Shop нажимает кнопку входа или кнопку покупки. Открывается модальное окно ввода ID пользователя или входа через мобильную игру.
- Пользователь нажимает кнопку входа через игру.
- Пользователь перенаправляется в игру, после чего автоматически перенаправляется в Web Shop как авторизованный пользователь.
В настольной версии
- Неавторизованный пользователь в Web Shop нажимает кнопку входа или кнопку покупки. Открывается модальное окно ввода ID пользователя или входа в мобильную версию игры с помощью QR-кода.
- Пользователь сканирует QR-код с помощью мобильного устройства, после чего на мобильном устройстве пользователя открывается Web Shop.
- На мобильном устройстве пользователя открывается игра.
- Пользователь автоматически перенаправляется в Web Shop на мобильном устройстве как авторизованный пользователь.
Сценарий взаимодействия сервисов
Как настроить
На стороне игры
- В настройках вашей игры зарегистрируйте URL-схему для открытия игры через диплинк:
- в приложениях под Android — в файле
AndroidManifest.xml
; - в приложениях под iOS — в файле
Info.plist
.
- в приложениях под Android — в файле
gamename://authorize
, где:gamename
— название вашей игры, которая должна открываться на мобильном устройстве для авторизации пользователя;authorize
— пример названия действия, которое должно быть выполнено после открытия игры gamename. Используйте название действия, которое соответствует действиям в операционной системе вашего приложения.
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>gamename</string>
</array>
</dict>
</array>
Пример регистрации URL-схемы в приложениях под Android:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="gamename" android:host="authorize" />
</intent-filter>
- Реализуйте генерацию авторизационного токена в формате JWT, используя ID пользователя из игры.
Параметр | Тип | Описание |
---|---|---|
loginId | string | ID варианта авторизации из Личного кабинета. Обязательный. |
webhookUrl | string | URL-адрес для получения вебхука Проверка пользователя в Web Shop. URL-адрес должен совпадать с адресом, указанным при настройке аутентификации через ID пользователя. Xsolla ожидает в ответ на вебхук 200 HTTP-код, чтобы авторизовать пользователя в Web Shop. Если Xsolla получит ответ с 404 HTTP-кодом или не получит ответ, пользователь авторизован не будет.Вы можете указать значение "webhookUrl": "https://nowebhook.com" , чтобы отправка вебхука при аутентификации через диплинк была отключена. В этом случае проверка существования пользователя на стороне Xsolla не выполняется, поэтому убедитесь, что в параметре user.id вы передаете ID пользователя, который существует в игре.Обязательный. |
settings.projectId | string | ID проекта в Личном кабинете, который указан рядом с названием вашего проекта или в адресной строке браузера. URL-адрес имеет вид https://publisher.xsolla.com/merchant ID/Publisher Account section . Обязательный. |
user.id | string | ID пользователя в игре. Обязательный. |
user.name | string | Имя пользователя. Обязательный. |
Пример вызова метода API генерации токена пользователя с использованием библиотеки curl:
- curl
curl --location 'https://sb-user-id-service.xsolla.com/api/v1/user-id' \
--header 'Content-Type: application/json' \
--data '{
"loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
"webhookUrl": "https://nowebhook.com",
"settings": {
"projectId": 123456,
"merchantId": 123456
},
"user": {
"id": "123",
"name": "a-user-name"
}
}'
Вы получите ответ вида {token=“JWT_TOKEN”}
.
- Добавьте всплывающее окно с уведомлением об успешной авторизации (опционально).
- Реализуйте открытие Web Shop в браузере, используя полученный токен пользователя.
Пример создания URL-адреса для открытия Web Shop в браузере для авторизованного пользователя:
https://example.com/?token={token}
, если вы используете кастомный домен.https://example.xsollasitebuilder.com/?token={token}
, если вы используете домен Xsolla.
{token}
— авторизационный токен пользователя.На стороне Конструктора сайтов
Вы можете выполнить настройки на стороне Конструктора сайта самостоятельно, используя примеры кода, приведенные ниже.За помощью в настройке обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com.
- Откройте проект в Личном кабинете.
- В боковом меню нажмите Конструктор сайтов.
- Нажмите Настроить в карточке вашего сайта Web Shop с аутентификацией через ID пользователя.
- Добавьте аутентификацию через диплинк с помощью блока Ваш код.
- В блок Ваш код на вкладку JavaScript добавьте приведенный ниже кастомный код, который реализует авторизацию через диплинк для мобильной и настольной версии.
- В коде замените значения констант на ваши значения, где:
DEEPLINK_URL
— URL-схема для открытия игры через диплинк.QR_CODE
— QR-код для открытия игры в формате SVG. QR-код должен содержать ссылку на вебшоп с параметромsource = pc
.deeplink__description
— описание, которое отображается под кнопкой авторизации через игру в мобильном приложении.qr-code-auth__description
— описание, которое отображается под QR-кодом в настольной версии игры.
- js
{
const DEEPLINK_URL = 'gamename://authorize';
const QR_CODE = `YOUR_SVG_WITH_QR_CODE`;
handleQRCodeRedirect();
// Event handlers are set up for opening the authentication modal or for successful authentication.
// If the event of opening the authentication modal occurs, the handler is triggered and a button or QR code is added to this window.
// If the event of successful authentication occurs, the handler is triggered and the successful authentication modal is opened.
window.addEventListener('custom-event:modal:render', updateLoginModal);
window.addEventListener('custom-event:authorization:login', showLoginSuccessPopup);
let getToken;
const searchParams = new URLSearchParams(window.location.search);
const tokenParam = searchParams.get('token');
if (tokenParam) {
showLoginSuccessPopup(tokenParam);
}
window.SB.subscribe(api => {
getToken = api.getToken;
});
// Customization of the authentication modal window (adding a QR code for the desktop version of the game or a login button for the mobile version of the game).
function updateLoginModal({detail}) {
const {name, element} = detail;
if (name !== 'user-id' || element.dataset.isQrAdded === 'true') return;
const isMobile = checkMobileDevice();
const ModalBody = element.querySelector('.ui-site-modal-window__body');
const ModulInput = ModalBody.querySelector('.user-id-modal__input');
element.classList.toggle('mobile-layout', isMobile);
ModalBody.append(getTemplate(isMobile));
element.dataset.isQrAdded = true;
}
// Function to display the successful authentication modal window.
function showLoginSuccessPopup(t) {
let username = 'Gamer';
try {
const token = getToken?.() || t;
if (token) {
const jwtData = parseJwt(token);
const payload = JSON.parse(jwtData.payload);
if (payload.userInfo.name) {
username = payload.userInfo.name;
} else if (jwtData.username) {
username = jwtData.username;
} else if (jwtData.server_custom_id) {
username = jwtData.server_custom_id;
}
}
} catch (e) {
console.log('error', e);
}
const Modal = document.querySelector('.deeplink-auth');
const ModalTitle = Modal.querySelector('.deeplink-auth__title');
ModalTitle.textContent = ModalTitle.textContent.replace(/\{username}/g, username);
Modal.classList.add('_visible');
Modal.querySelector('.deeplink-auth__button').addEventListener('click', closeModal);
function closeModal() {
Modal.classList.remove('_visible');
}
}
// Function that displays a QR code for the desktop version of the game or a login button for the mobile version of the game. Your_game should be replaced with the actual name of your game. To continue with the authentication, the game has to be installed on the user's phone.
function getTemplate(isMobile) {
const Deeplink = document.createElement('div');
if (isMobile) {
Deeplink.innerHTML = `
<div class="deeplink__title"><span class="deeplink__title-text">or login via game</span></div>
<a href="${DEEPLINK_URL}" class="deeplink__button" rel="noopener">Login via Mobile Game</a>
<div class="deeplink__description">
You need to have the Your_game installed on your phone in order to proceed with authorization and purchase
</div>
`;
return Deeplink;
}
Deeplink.innerHTML = `
<div class="separator">
<span class="separator__text">or login via game</span>
</div>
<div class="qr-code-auth">
<div class="qr-code-auth__image">${QR_CODE}</div>
<span class="qr-code-auth__description">
Scan the QR code with your phone and you will continue purchasing on your mobile device
</span>
</div>
`;
return Deeplink;
}
function checkMobileDevice() {
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}
// Function that decodes the JWT token and returns its payload as a JavaScript object.
function parseJwt(token) {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
// Function to verify the vent occurred when the user scanned the QR code.
function handleQRCodeRedirect() {
const url = new URL(window.location.href);
const source = url.searchParams.get('source');
if (source === 'pc') {
if (checkMobileDevice()) {
const button = document.getElementById("deeplink-redirect");
button.click();
}
setTimeout(function () {
url.searchParams.delete('source');
window.history.pushState({}, '', url);
}, 2000);
}
}
}
- В блок Ваш код на вкладку HTML добавьте код для модального окна успешной авторизации в Web Shop. Вы можете задать свои текстовые значения.
- html
<div class="ui-site-modal-window deeplink-auth">
<div class="deeplink-auth__body">
<div class="deeplink-auth__image"></div>
<div class="deeplink-auth__title">Hi, {username}!</div>
<div class="deeplink-auth__description">You’ve successfully logged in to the Web Shop</div>
<button class="deeplink-auth__button">Continue</button>
</div>
</div>
<a href="gamename://authorize" id="deeplink-redirect" style="display: none;"></a>
- В блок Ваш код на вкладку CSS добавьте стили для новых компонентов интерфейса. Рекомендуемые стили предложены ниже. Укажите URL-адрес собственного изображения, отображаемого при успешной авторизации.
- css
--deeplink-success-image-url: url("Successful_authorization_image_url");
.html-v2:has(.deeplink-auth._visible) {
z-index: var(--modalsZIndex);
}
.user-id-modal__content {
padding: 0 16px !important;
}
@media (min-width: 768px) {
.user-id-modal__content {
max-width: 460px !important;
padding: 0 3.8rem 4rem !important;
overflow: auto;
justify-content: center;
}
}
.mobile-layout .user-id-modal__close {
right: 8px;
top: 16px;
}
.user-id-modal__logo {
width: 109px;
height: 38px;
margin: 4rem auto 2rem;
}
.user-id-modal.mobile-layout .user-id-modal__logo {
margin: 3rem auto 2.5rem;
}
.user-id-modal__wrapper {
margin-top: 0;
}
.user-id-modal__title {
margin-bottom: 3rem;
}
.user-id-modal__input-wrapper .ui-site-input {
height: 41px;
}
.user-id-modal__input {
margin-top: 0;
border-radius: var(--border-radius-16);
}
.user-id-modal__button {
height: auto;
margin: 12px auto 0;
padding: 1.25rem;
border-radius: var(--border-radius-16);
}
.user-id-modal__button .simple-button__text {
font-size: 1.8rem;
font-weight: 500;
line-height: 2.5rem;
letter-spacing: 0.5px;
}
.user-id-modal .ui-site-instruction-cut__title .ui-site-description {
margin-bottom: 3rem;
font-size: 1.2em;
}
.user-id-modal .ui-site-instruction-cut__steps {
overflow-y: visible;
}
.user-id-modal .ui-site-instruction-card:first-child {
margin-top: 0;
}
.user-id-modal .ui-site-instruction-card:last-child {
padding-bottom: 4rem;
}
.user-id-modal .separator {
display: flex;
margin-bottom: 3.8rem;
align-items: center;
}
.user-id-modal .separator__text {
padding: 0 1.5rem;
font-family: var(--main-font);
font-size: 1.8rem;
font-weight: 500;
line-height: 2.5rem;
letter-spacing: 0.8px;
}
.user-id-modal .separator::before,
.user-id-modal .separator::after {
content: "";
background-color: #797979;
height: 1px;
flex-grow: 1;
}
.user-id-modal .qr-code-auth__image {
display: block;
width: 160px;
height: 160px;
margin: 0 auto 20px;
}
.user-id-modal .qr-code-auth__image svg {
display: block;
width: 100%;
height: 100%;
}
.user-id-modal .qr-code-auth__description {
display: inline-block;
font-family: var(--main-font);
font-size: 1.5rem;
font-weight: 400;
line-height: 2.5rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.deeplink__title {
display: flex;
margin-bottom: 3.8rem;
align-items: center;
}
.deeplink__title-text {
padding: 0 1.5rem;
font-family: var(--main-font);
font-size: 1.8rem;
font-weight: 500;
line-height: 2.5rem;
letter-spacing: 0.8px;
}
.user-id-modal .deeplink__title::before,
.user-id-modal .deeplink__title::after {
content: "";
background-color: #797979;
height: 1px;
flex-grow: 1;
}
.deeplink__button {
display: block;
margin-bottom: 2.2rem;
padding: 1.3rem;
font-family: var(--main-font);
font-size: 1.8rem;
font-weight: 500;
line-height: 2.5rem;
letter-spacing: 0.5px;
text-align: center;
color: var(--button-text-color);
background: var(--accent-color);
border-radius: var(--border-radius-16);
text-decoration: none;
transition: transform .2s cubic-bezier(.509, .001, .25, 1);
}
.deeplink__button:hover {
transform: scale(.95);
}
.deeplink__description {
margin-bottom: 2rem;
font-family: var(--main-font);
font-size: 1.6rem;
line-height: 2.3rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.5px;
}
.deeplink__cta-wrapper {
display: flex;
flex-direction: row;
gap: 1.8rem;
padding: 0 1.2rem;
}
.deeplink__cta-wrapper .ui-site-calltoaction__item {
margin: 0;
flex-grow: 2;
}
.deeplink__cta-wrapper .ui-site-calltoaction {
width: 100%;
min-width: auto;
height: auto;
min-height: auto;
padding-bottom: 36%;
background-size: contain;
border-radius: 0;
}
.deeplink-auth {
display: none;
}
.deeplink-auth._visible {
display: flex;
}
.deeplink-auth__body {
position: relative;
width: 100%;
max-width: 336px;
padding: 16px;
border-radius: 12px;
background-color: var(--colors-core-background-secondary-rgb);
border: var(--border-size) solid var(--border-color);
font-family: var(--main-font);
color: var(--colors-core-text-primary);
}
@media (min-width: 768px) {
.deeplink-auth__body {
max-width: 460px;
padding: 24px 30px;
}
}
.deeplink-auth__image {
margin-bottom: 20px;
padding-bottom: 49%;
border-radius: 12px;
background-image: var(--deeplink-success-image-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (min-width: 768px) {
.deeplink-auth__image {
padding-bottom: 37%;
}
}
.deeplink-auth__title {
margin-bottom: 10px;
font-size: 20px;
font-weight: 500;
line-height: 24px;
text-align: center;
letter-spacing: 0.7px;
}
@media (min-width: 768px) {
.deeplink-auth__title {
margin-bottom: 20px;
font-size: 24px;
line-height: 30px;
}
}
.deeplink-auth__description {
margin-bottom: 20px;
font-size: 13px;
font-weight: 400;
line-height: 18px;
text-align: center;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.7);
}
.deeplink-auth__button {
display: block;
width: 100%;
padding: 1.3rem;
font-family: var(--main-font);
font-size: 1.8rem;
font-weight: 500;
line-height: 2.5rem;
letter-spacing: 0.5px;
text-align: center;
color: var(--button-text-color);
background: var(--accent-color);
border-radius: var(--border-radius-16);
text-decoration: none;
transition: transform .2s cubic-bezier(.509, .001, .25, 1);
}
@media (min-width: 768px) {
.deeplink-auth__button {
padding: 12px;
font-size: 16px;
line-height: 24px;
}
}
.deeplink-auth__button:hover {
transform: scale(.95);
}
Была ли статья полезна?
Оценить страницу
В другой раз
Спасибо за обратную связь!
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.