JSON-файлы с настройками виджета
Настройки виджета хранятся в следующих JSON-файлах:
settingsJSON— основные настройки;socialsJSON— настройки авторизации через социальные сети;themeJSON— настройки темы.
Вы можете переиспользовать файлы настройки и отображать один и тот же виджет на разных страницах. URL-адреса настроек указываются в коде инициализации виджета:
Copy
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
Основные настройки
К основным настройкам виджета относятся:
- методы авторизации (объект
authorization_methods); - поля регистрации (объект
registration_fields); - проверка email-адреса (объект
email_validation); - дополнительные настройки.
Шаблон файла settingsJSON:
Copy
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
Методы авторизации
Объектauthorization_methods содержит массив с доступными методами авторизации. В зависимости от переданных настроек виджет по-разному отображает страницу входа.Примечание
В массив должен быть передан хотя бы один метод. Каждый метод должен встречаться в массиве только один раз.
Доступные методы авторизации:
email— авторизация по электронной почте и паролю. Параметр передается по умолчанию, если в настройках нет объектаauthorization_methodsс конкретным списком методов.social— авторизация через социальные сети. Параметр передается по умолчанию, если в настройках нет объектаauthorization_methodsс конкретным списком методов.username— авторизация по имени пользователя и паролю.phone— авторизация по номеру телефона и SMS-коду.passwordless-email-code— авторизация по электронной почте и коду из письма.
Пример:
Copy
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
Поля регистрации
Объектregistration_fields содержит массив полей, которые отображаются на странице регистрации виджета.Примечание
Массив должен содержать минимум одно поле. Поля отображаются в том порядке, в котором они были переданы в массиве.
Для поля можно дополнительно указать следующие параметры:
required(boolean) — является ли поле обязательным для заполнения;default_value(array) — массив значений, выбранных по умолчанию (например, для списка стран или платформ);validation(object) — параметры валидации:allowed_characters(string) — разрешенные символы для ввода в поле. Перечисляются через запятую как значения регулярного выражения.max_length(number) — максимальное количество символов.min_length(number) — минимальное количество символов.regexps(array with strings) — регулярное выражение для проверки введенного значения.
Пример:
Copy
- json
{
// Other widget settings
"registration_fields": [
{
"name": "username",
"required": false,
"type": "str",
"validation": {
"allowed_characters": "A-Z, a-z, 0-9",
"max_length": 16,
"min_length": 5,
"regexps": ["^.{5,16}$"]
}
},
{ "name": "email", "required": true, "type": "email", "validation": {} },
{ "name": "bday", "required": true, "type": "date", "validation": {} },
{
"name": "platform",
"default_value": ["MacOS", "Nintendo Switch", "Steam"],
"required": false,
"type": "multi-select",
"validation": {}
},
{
"name": "country-name",
"default_value": ["US", "GB", "DE"],
"required": false,
"type": "select",
"validation": {}
},
{ "name": "password", "required": true, "type": "pass", "validation": {} },
{
"name": "password_confirm",
"required": false,
"type": "pass",
"validation": {}
},
{
"name": "promo_email_agreement",
"required": false,
"type": "bool",
"validation": {}
}
]
}
Проверка email-адреса
Объектemail_validation содержит параметр se_xsolla_email_validator, который проверяет данные, введенные в поле email.Пример:
Copy
- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
Дополнительные настройки
Дополнительные настройки передаются в корне JSON-объекта файлаsettingsJSON.Пример:
Copy
- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
Настройки социальных сетей
Для авторизации через социальные сети в файле socialsJSON передаются следующие параметры:
- список регионов;
- параметры и типы социальных сетей для каждого региона.
Шаблон файла socialsJSON:
Copy
- json
{
"1": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"2": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"3": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"4": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"5": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"6": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
}
}
Каждому региону соответствует номер:
- 1 — Европа;
- 2 — Китай;
- 3 — Северная и Южная Корея;
- 4 — СНГ;
- 5 — Северная и Южная Америка;
- 6 — остальные страны.
Для каждого региона определяется тип социальной сети — первичный (primary) или вторичный (secondary). Первичные социальные сети отображаются в виде большой кнопки и более заметны на странице виджета. Вторичные социальные сети отображаются в виде маленьких кнопок и менее заметны.
Каждый тип социальной сети содержит массив объектов:
Примечание
Каждая социальная сеть должна встречаться в массиве только один раз. Массив может быть пустым.
Copy
- json
{
"1": {
"primary": [{
"name": "google",
"jwt": "https://login.xsolla.com/api/social/google/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
}
]
},
"2": {
"primary": [{
"name": "wechat",
"jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
},
{
"name": "steam",
"jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
}
]
}
// More regions
}
Настройки темы
К настройкам темы виджета относятся:
- настройки цвета и размера виджета;
- настройки скругления (объект
rounding); - настройки фона виджета (объект
background); - настройки заголовка (объект
header); - настройки вкладок виджета (объект
tabs); - настройки отображения социальных сетей (объекты
primary_socialsиsecondary_socials); - настройки сцены (объект
scene).
Шаблон файла themeJSON:
Copy
- json
{
// Color and size settings
"header": {
// Header settings
},
"background": {
// Widget background settings
},
"rounding": {
// Rounding settings
},
"tabs": {
// Tab settings
},
"primary_socials": {
// Display settings for the primary social networks
},
"secondary_socials": {
// Display settings for the secondary social networks
},
"scene": {
// Scene settings
}
}
Цвет и размер виджета
Цвет и размер виджета передаются в корне JSON-объекта файлаthemeJSON.Пример:
Copy
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
Скругление
Объект rounding содержит параметры скругления для отдельных элементов виджета. Свойство применяется ко всем четырем углам одновременно.
Пример:
Copy
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
Фон
Объектbackground содержит параметры фона виджета.Пример:
Copy
- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
Заголовок
Объектheader содержит параметры заголовка виджета — области над всеми полями виджета.Пример:
Copy
- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
Вкладки
Объектtabs содержит параметр hide, который управляет отображением вкладок авторизации/регистрации на виджете.Пример:
Copy
- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
Отображение социальных сетей
Объектыprimary_socials и secondary_socials содержат параметр hide, который управляет отображением социальных сетей первичного и вторичного типа на виджете.Пример:Copy
- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
Сцена
Объектscene содержит параметры для сцены — области вокруг виджета.Пример:
Copy
- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
Была ли статья полезна?
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
