Авторизация / Как подключить JSON с настройками виджета
 На главную

Авторизация

  • Руководство по интеграции

  • Возможности

  • Инструкции

  • Расширения

  • Справочники

  • Как подключить JSON с настройками виджета

    Настройки виджета хранятся в следующих JSON-файлах:

    Вы можете переиспользовать файлы настройки и отображать один и тот же виджет на разных страницах. URL-адреса настроек указываются в коде инициализации виджета:

    Copy
    Full screen
    Small screen
    <script>
    const xl = new XsollaLogin.Widget({
      // Other settings
      settingsJSON: "url_string",
      socialsJSON: "url_string",
      themeJSON: "url_string"
    });
    </script>

    Основные настройки

    К основным настройкам виджета относятся:

    Шаблон файла settingsJSON:

    Copy
    Full screen
    Small screen
    {
      "authorization_methods": {
        // Authorization methods
      },
      "registration_fields": {
        // Registration fields
      },
      "email_validation": {
        // Settings for email validation
      }
    
      // Other widget settings
    }

    Методы авторизации

    Объект authorization_methods содержит массив с доступными методами авторизации. В зависимости от переданных настроек виджет по-разному отображает страницу входа.

    Note
    В массив должен быть передан хотя бы один метод. Каждый метод должен встречаться в массиве только один раз.

    Доступные методы авторизации:

    • email — авторизация по электронной почте и паролю. Параметр передается по умолчанию, если в настройках нет объекта authorization_methods с конкретным списком методов.
    • social — авторизация через социальные сети. Параметр передается по умолчанию, если в настройках нет объекта authorization_methods с конкретным списком методов.
    • username — авторизация по имени пользователя и паролю.
    • phone — авторизация по номеру телефона и СМС-коду.
    • passwordless-email-code — авторизация по электронной почте и коду из письма.

    Пример:

    Copy
    Full screen
    Small screen
    {
      "authorization_methods": {
        ["email", "phone"]
      }
    
      // Other widget settings
    }

    Поля регистрации

    Объект registration_fields содержит массив полей, которые отображаются на странице регистрации виджета.

    ПараметрТипОписание
    email
    emailEmail-адрес пользователя.
    username
    stringАккаунт пользователя.
    password
    passПароль.
    password_confirm
    passПодтверждение пароля.
    given-name
    stringИмя пользователя.
    family-name
    stringФамилия пользователя.
    nickname
    stringНикнейм пользователя.
    bday
    dateДата рождения.
    gender
    stringВыбор пола.
    country-name
    selectВыбор страны.
    platform
    multi-selectВыбор платформы.
    promo_email_agreement
    booleanСогласие на рекламную рассылку.
    Note
    Массив должен содержать минимум одно поле. Поля отображаются в том порядке, в котором они были переданы в массиве.

    Для поля можно дополнительно указать следующие параметры:

    • required (boolean) — является ли поле обязательным для заполнения;
    • default_value (array) — массив значений, выбранных по умолчанию (например, для списка стран или платформ);
      • validation (object) — параметры валидации:
      • allowed_characters (string) — разрешенные символы для ввода в поле. Перечисляются через запятую как значения регулярного выражения.
      • max_length (number) — максимальное количество символов.
      • min_length (number) — минимальное количество символов.
      • regexps (array with strings) — регулярное выражение для проверки введенного значения.

    Пример:

    Copy
    Full screen
    Small screen
    {
      // 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.

    ПараметрТипОписание
    use_xsolla_email_validator
    booleanИспользовать ли дополнительную проверку данных, введенных в поле email. Если передано true — проверка выполняется на фронтенде и бэкенде с использованием SMTP, RFC и Greylisting. Если передано false — проверка выполняется только на фронтенде. Значение по умолчанию — false.

    Пример:

    Copy
    Full screen
    Small screen
    {
      // Other widget settings
    
      "email_validation": {
        "use_xsolla_email_validator": true
      }
    }

    Дополнительные настройки

    Дополнительные настройки передаются в корне JSON-объекта файла settingsJSON.

    ПараметрТипОписание
    can_register
    booleanВключить ли пользователю возможность регистрации. Значение по умолчанию — true.
    can_reset_password
    booleanВключить ли пользователю возможность сброса пароля. Значение по умолчанию — true.
    stringСсылка на политику согласия пользователей.
    stringСсылка на политику использования cookie.
    privacy_policy
    stringСсылка на политику конфиденциальности.
    tos_url
    stringСсылка на условия использования.
    game_name
    stringИмя проекта или игры. Отображается в некоторых методах авторизации.

    Пример:

    Copy
    Full screen
    Small screen
    {{
      // Other widget settings
    
      "can_register": true,
      "can_reset_password": true,
      "cookie_policy": "https://someurl.com"
    }

    Настройки социальных сетей

    Для авторизации через социальные сети в файле socialsJSON передаются следующие параметры:

    • список регионов;
    • параметры и типы социальных сетей для каждого региона.

    Шаблон файла socialsJSON:

    Copy
    Full screen
    Small screen
    {
      "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). Первичные социальные сети отображаются в виде большой кнопки и более заметны на странице виджета. Вторичные социальные сети отображаются в виде маленьких кнопок и менее заметны.

    Каждый тип социальной сети содержит массив объектов:

    ПараметрТипОписание
    name
    stringНазвание социальной сети. Доступные варианты: amazon, apple, baidu, battlenet, china_telecom, discord, email, epicgames, facebook, github, google, google-plus, instagram, kakao, linkedin, mailru, microsoft, msn, naver, ok, paradox, paypal, pinterest, qq, reddit, steam, slack, twitch, twitter, vimeo, vk, wechat, weibo, xbox, yahoo, yandex, youtube.
    jwt
    stringСсылка для открытия социальной сети, если используется авторизация через JWT.
    oauth2
    stringСсылка для открытия социальной сети, если используется авторизация по протоколу OAuth2.0.
    Note
    Каждая социальная сеть должна встречаться в массиве только один раз. Массив может быть пустым.

    Пример:

    Copy
    Full screen
    Small screen
    {
      "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
      Full screen
      Small screen
      {
        // 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.

      ПараметрТипОписание
      primary_color
      stringОсновной цвет виджета (цвет фона кнопок и границ у активных полей ввода) в формате RGB или HEX. Значение по умолчанию — #0073F7.
      secondary_color
      stringВторичный цвет виджета (цвет границ у неактивных полей ввода) в формате RGB или HEX. Значение по умолчанию — #DADADA.
      error_color
      stringЦвет текста ошибок в формате RGB или HEX. Значение по умолчанию — #EB002F.
      text_color
      stringЦвет основного текста в формате RGB или HEX. Значение по умолчанию — #000000.

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "primary_color": "#708090",
        "secondary_color": "#4682B4"
      }

      Скругление

      Объект rounding содержит параметры скругления для отдельных элементов виджета. Свойство применяется ко всем четырем углам одновременно.

      ПараметрТипОписание
      inputs
      stringСкругление в пикселях для активных полей ввода. Значение по умолчанию — 6px.
      buttons
      stringСкругление в пикселях для кнопок. Значение по умолчанию — 100px.
      widget
      stringСкругление в пикселях для виджета. Значение по умолчанию — 6px.

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "rounding": {
          "inputs": "8px",
          "widget": "8px"
      
        }
      }

      Фон

      Объект background содержит параметры фона виджета.

      ПараметрТипОписание
      color
      stringЦвет заливки фона в формате RGB или HEX. Значение по умолчанию — #FFFFFF.
      image
      objectФоновое изображение. Объект содержит ссылку на изображение и настройки прозрачности. Значение прозрачности по умолчанию — 1.

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "background": {
          "color": "#708090",
          "image": {
            "url": "https://someurl.com",
            "opacity": "3"
          }
        }
      }

      Заголовок

      Объект header содержит параметры заголовка виджета — области над всеми полями виджета.

      ПараметрТипОписание
      image
      objectФоновое изображение заголовка. Объект содержит ссылку на изображение, настройки прозрачности и размер фонового изображения. Значение прозрачности по умолчанию — 1.
      Доступные значения размера фонового изображения соответствуют значениям CSS-свойства background-size (по умолчанию — cover).

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "header": {
          "image": {
            "url": "https://someurl.com",
            "opacity": "3",
            "size": "cover"
          }
        }
      }

      Вкладки

      Объект tabs содержит параметр hide, который управляет отображением вкладок авторизации/регистрации на виджете.

      ПараметрТипОписание
      hide
      booleanСкрывать ли вкладки авторизации/регистрации на виджете. Используется со значением true, если, например, необходимо временно скрыть возможность регистрации или отображать регистрацию и авторизацию на отдельных страницах. Значение по умолчанию — false.

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "tabs": {
          "hide": true
        }
      }

      Отображение социальных сетей

      Объекты primary_socials и secondary_socials содержат параметр hide, который управляет отображением социальных сетей первичного и вторичного типа на виджете.

      ПараметрТипОписание
      hide
      booleanСкрывать ли социальные сети. Значение по умолчанию — false.

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "primary_socials": {
          "hide": true
        },
        "secondary_socials": {
          "hide": false
        }
      }

      Сцена

      Объект scene содержит параметры для сцены — области вокруг виджета.

      ПараметрТипОписание
      color
      stringЦвет заливки фона в формате RGB или HEX. Значение по умолчанию — #FFFFFF.
      image
      objectФоновое изображение. Объект содержит ссылку на изображение и размер фонового изображения. Доступные значения размера фонового изображения соответствуют значениям CSS-свойства background-size (по умолчанию — cover).

      Пример:

      Copy
      Full screen
      Small screen
      {
        // Other theme settings
      
        "scene": {
          "color": "#708090",
          "image": {
            "url": "https://someurl.com",
            "size": "cover"
          }
        }
      }

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

      В другой раз

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

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

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