Login / Как интегрировать Личный кабинет пользователя
  На главную

Login

Как интегрировать Личный кабинет пользователя

Как это работает

Личный кабинет дает вашим пользователям возможность управлять следующими данными:

  • аватар;
  • номер телефона;
  • email;
  • ник;
  • имя и фамилия;
  • дата рождения;
  • пол;
  • список друзей (только через методы API).

Возможны два варианта интеграции Личного кабинета пользователя:

  • С интерфейсной частью через URL. Интерфейс Личного кабинета пользователя локализуется на 20 языков и адаптируется под разрешение экрана.
  • Без интерфейсной части через методы API. Вы можете использовать собственный интерфейс для управления данными пользователей.

Для кого подходит

Для партнеров, у которых уже подключен продукт Login.

Как настроить

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

Интеграция через URL

  1. Сгенерируйте URL для открытия Личного кабинета пользователя.
  2. Настройте переход к Личному кабинету пользователя по URL.
  3. Настройте обработку событий (опционально).

Генерация URL

Личный кабинет пользователя открывается по URL https://useraccount.xsolla.com/profile с параметрами, описанными в таблице.
ПараметрТипОписание
locale
stringQuery-параметр. Язык интерфейса Личного кабинета пользователя.
Поддерживаемые языки: английский (en) (по умолчанию), арабский (ar), болгарский (bg), чешский (cs), немецкий (de), испанский (es), французский (fr), иврит (he), итальянский (it), японский (ja), корейский (ko), польский (pl), португальский (Бразилия) (pt), румынский (ro), русский (ru), тайский (th), турецкий (tr), вьетнамский (vi), китайский упрощенный (cn), китайский традиционный (tw).
token
stringHash-параметр. JWT пользователя. Параметр передается в URL после успешной аутентификации. Обязательный.
Пример URL:
Copy
Full screen
Small screen
https://useraccount.xsolla.com/profile?locale=de#token=XXXX

Настройка перехода по URL

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

  • в iframe на вашем сайте,
  • в новой вкладке браузера.

IFRAME

Добавьте на страницу сайта, где открывается Личный кабинет пользователя, следующий скрипт: <iframe src=“https://useraccount.xsolla.com/profile?locale=ru#token=XXXX">, где srcсгенерированный URL.

Новая вкладка браузера

Разместите URL в объекте вашего интерфейса, при нажатии на который открывается Личный кабинет пользователя.

Например, добавьте на сайт следующий скрипт: <a href=“https://useraccount.xsolla.com/profile?locale=ru#token=XXXX&quot;&gt;Your account</a>, где srcсгенерированный URL.

Настройка обработки событий (опционально)

Если Личный кабинет пользователя открывается в iframe, в зависимости от действий пользователя в родительское окно отправляются события. Для отправки используется механизм postMessage.
Название событияОписание
user-account-closeПользователь нажал на крестик, чтобы закрыть Личный кабинет пользователя.
user-account-loadedЛичный кабинет пользователя загружен, не удалось получить данные.
user-account-page-fetchedЛичный кабинет и данные пользователя загружены.

Для обработки событий необходимо добавить на сайт метод addEventListener и функциональный скрипт.

Пример обработки события:

Copy
Full screen
Small screen
window.addEventListener('message', (event) => {
  if (event.data.command === 'user-account-loaded') {
    // your script
  }
})

Интеграция через методы API

Для управления данными пользователей через методы API вам необходимо реализовать интерфейс и вызов методов. Подробное описание методов API с примерами кода приведено в документации.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!
Последнее обновление: 22 января 2024

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

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!