Как интегрировать Личный кабинет пользователя
Как это работает
Личный кабинет дает вашим пользователям возможность управлять следующими данными:
- аватар;
- номер телефона;
- email;
- ник;
- имя и фамилия;
- дата рождения;
- пол;
- список друзей (только через методы API).
Возможны два варианта интеграции Личного кабинета пользователя:
- С интерфейсной частью через URL. Интерфейс Личного кабинета пользователя локализуется на 20 языков и адаптируется под разрешение экрана.
- Без интерфейсной части через методы API. Вы можете использовать собственный интерфейс для управления данными пользователей.
Для кого подходит
Для партнеров, у которых уже подключен продукт Login.
Как настроить
Выберите способ интеграции Личного кабинета пользователя и следуйте инструкциям ниже.
Интеграция через URL
- Сгенерируйте URL для открытия Личного кабинета пользователя.
- Настройте переход к Личному кабинету пользователя по URL.
- Настройте обработку событий (опционально).
Генерация URL
Личный кабинет пользователя открывается по URLhttps://useraccount.xsolla.com/profile с параметрами, описанными в таблице.| Параметр | Тип | Описание |
|---|---|---|
locale | string | Query-параметр. Язык интерфейса Личного кабинета пользователя. Поддерживаемые языки: английский (en) (по умолчанию), арабский (ar), болгарский (bg), чешский (cs), немецкий (de), испанский (es), французский (fr), иврит (he), итальянский (it), японский (ja), корейский (ko), польский (pl), португальский (Бразилия) (pt), румынский (ro), русский (ru), тайский (th), турецкий (tr), вьетнамский (vi), китайский упрощенный (cn), китайский традиционный (tw). |
token | string | Hash-параметр. JWT пользователя. Параметр передается в URL после успешной аутентификации. Обязательный. |
- http
1https://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.| Название события | Описание |
|---|---|
| user-account-close | Пользователь нажал на крестик, чтобы закрыть Личный кабинет пользователя. |
| user-account-loaded | Личный кабинет пользователя загружен, не удалось получить данные. |
| user-account-page-fetched | Личный кабинет и данные пользователя загружены. |
Для обработки событий необходимо добавить на сайт метод addEventListener и функциональный скрипт.
Пример обработки события:
- javascript
1window.addEventListener('message', (event) => {
2 if (event.data.command === 'user-account-loaded') {
3 // your script
4 }
5})
Интеграция через методы API
Для управления данными пользователей через методы API вам необходимо реализовать интерфейс и вызов методов. Подробное описание методов API с примерами кода приведено в документации.Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
