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

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

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

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

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

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

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

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

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

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

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

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

Генерация URL

Личный кабинет пользователя открывается по URL https://useraccount.xsolla.com/profile с параметрами, описанными в таблице.

Пример URL:

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">Your account</a>, где src — сгенерированный URL.

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

Если Личный кабинет пользователя открывается в iframe, в зависимости от действий пользователя в родительское окно отправляются события. Для отправки используется механизм postMessage.

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

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

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

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

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

Оценить страницу

Что может сделать страницу еще лучше? Отправить

В другой раз

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