Авторизация / Кастомизация виджета
 На главную

Авторизация

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

  • Хранилище данных пользователей

  • Кастомизация

  • Провайдеры коммуникационных услуг

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

  • Инструкции

  • Расширения

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

  • Кастомизация виджета

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

    Виджет авторизации — это графический интерфейс для регистрации и авторизации пользователей в вашем приложении. Виджет может содержать поля для ввода данных учетной записи пользователя приложения и кнопки для входа в приложение через социальные сети. Также на виджете могут быть поясняющие тексты и дополнительные кнопки, например, для восстановления пароля или запроса кода подтверждения.

    Иксолла предоставляет стандартные шаблоны виджетов. Их внешний вид и наполнение определяется способом авторизации, выбранным для вашего проекта. Ниже приведен стандартный вид виджета для классической авторизации.

    Продукт Авторизация позволяет изменять параметры виджета, чтобы сделать его узнаваемым и органичным в интерфейсе вашего приложения или веб-сайта. Для этой цели вы можете:

    • добавить на виджет свой логотип;
    • изменить цветовую гамму виджета;
    • загрузить изображение и использовать его как фон для области вокруг виджета;
    • изменить форму контура кнопок и полей ввода;
    • изменить порядок расположения кнопок социальных сетей на виджете (порядок определяется выбором страны локализации);
    • задать язык отображения виджета.

    Настроить внешний вид и наполнение виджета вы можете с помощью:

    Кастомизация виджета в Личном кабинете

    Редактирование виджета в Личном кабинете — это рекомендованный способ кастомизации, который позволяет:

    • увидеть изменения в реальном времени;
    • проверить работу кнопок виджета непосредственно в редакторе или в окне Предварительный просмотр на странице Кастомизация виджета.

    Note
    При кастомизации через Личный кабинет внесенные в виджет изменения будут применены везде, где он используется.
    Notice
    Кастомизация виджета в Личном кабинете доступна только после подписания Лицензионного договора с Иксоллой. Для подписания договора перейдите в раздел Договоры в Личном кабинете.

    Для кастомизации виджета:

    1. Откройте ваш проект в Личном кабинете и перейдите в раздел Авторизация.
    2. Нажмите Настроить в панели нужного варианта авторизации.
    3. На странице навигации перейдите к блоку Кастомизация и выберите раздел Кастомизация виджета.

    1. Выберите язык и страну локализации виджета, если необходимо.
    2. Настройте стиль виджета с помощью редактора.
    3. После выполнения всех настроек переключитесь в режим HTML с помощью кнопки над областью просмотра виджета.

    1. Нажмите Copy code, чтобы скопировать сгенерированный код инициализации виджета. Используйте этот код для интеграции виджета в ваше приложение или веб-сайт.

    Как использовать редактор виджета

    1. Чтобы открыть редактор виджета, на странице Кастомизация виджета нажмите Кастомизировать.
    2. В окне редактора внесите необходимые изменения в стиль виджета:Все изменения отображаются в области просмотра виджета в режиме реального времени.

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

    1. Чтобы проконтролировать, как виджет будет отображаться на разных языках, измените язык в выпадающем списке над областью просмотра.

    Note
    Изменение языка в редакторе не влияет на язык отображения виджета пользователям.

    1. После внесения всех необходимых изменений в редакторе виджета нажмите Опубликовать.

    Notice
    После публикации виджет изменится во всех приложениях и веб-сайтах, к которым он подключен.
    Note
    После публикации на странице Кастомизация виджета может отображаться предыдущая версия виджета, подгруженная браузером из кэша. В таком случае обновите страницу, нажав Control+F5.

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

    1. Нажмите кнопку загрузки под переключателем.
    2. В окне поиска файла выберите файл с рисунком логотипа и нажмите Открыть.

      В боковой панели редактора отобразится панель Медиа. Загруженный логотип появится как на этой панели, так и на виджете в области просмотра.

    1. Если вы хотите протестировать другой вариант логотипа, используйте кнопку Загрузить в панели Медиа.

    1. Чтобы отобразить вариант логотипа на виджете, нажмите его изображение в панели Медиа.
    2. По завершении настройки логотипа закройте панель Медиа. Ваш последний выбор будет автоматически сохранен.

    Как изменить цветовую гамму виджета

    Цветовая гамма виджета задается тремя базовыми цветами:

    • Текст — используется для поясняющих текстов, содержимого полей ввода и логотипов социальных сетей на кнопках внизу виджета.
    • Кнопка — используется для кнопок Вход и Принять и создать, для контуров выделенных полей и кнопок, а также для ссылок и заголовка активной вкладки виджета.
    • Оттенок фона — определяет цвет фона виджета.
    Цвет страницы, на которой отображается виджет в полноэкранном режиме, является комбинацией цветов Кнопка и Оттенок фона и задается автоматически.

    Note
    Кнопки наиболее часто используемых социальных сетей в верхней части виджета окрашены всегда одинаково, независимо от выбранной цветовой гаммы.

    Чтобы изменить базовые цвета виджета:

    1. Откройте редактор виджета.
    2. В боковой панели редактора нажмите Тема, а затем кнопку базового цвета, который вы хотите изменить.
    3. Выберите желаемый цвет одним из следующих способов:
      • Укажите цвет на открывшейся цветовой палитре. Для изменения цветов в палитре используйте расположенный под ней ползунок.
      • С помощью кнопки под ползунком переключитесь в один из режимов: HEX, RGB или HSL, и введите код цвета в выбранном формате.
      Изменения цветовой гаммы отображаются в области просмотра виджета в режиме реального времени.

    1. Если требуется, измените другие базовые цвета аналогичным образом.

    Как поместить фоновое изображение в область вокруг виджета

    1. Откройте редактор виджета.
    2. В боковой панели редактора нажмите Виджет авторизации.
    3. В открывшейся панели Редактор виджета авторизации в разделе Фон страницы нажмите значок +, а затем кнопку загрузки.

    1. В окне поиска файла выберите файл для фонового рисунка и нажмите Открыть.

      В боковой панели редактора отобразится панель Медиа. Загруженный рисунок появится как на этой панели, так и в области вокруг виджета.

    1. Если вы хотите протестировать другой вариант фонового изображения, используйте кнопку Загрузить в панели Медиа.
    2. Чтобы отобразить фоновое изображение вокруг виджета, нажмите соответствующий рисунок в панели Медиа.
    3. По завершении настройки фонового изображения закройте панель Медиа. Ваш последний выбор будет автоматически сохранен.

    Как изменить форму кнопок

    Кнопки и поля ввода виджета имеют форму прямоугольника или квадрата с закругленными углами. Степень закругления может меняться от 0 (прямые углы) до 100%.

    Чтобы изменить степень закругления углов:

    1. Откройте редактор виджета.
    2. Выберите желаемую форму кнопок виджета с помощью ползунка Скругление.

    Как изменить порядок расположения кнопок социальных сетей

    Чтобы на виджете отображались кнопки социальных сетей, эти сети необходимо подключить в настройках вашего варианта авторизации. Порядок расположения кнопок определяется страной локализации. Для каждой страны на виджете отображаются кнопки сетей, наиболее популярных в этой стране. Кнопки упорядочены слева направо по убыванию популярности социальных сетей. В верхней строке виджета каждому пользователю отображается последняя социальная сеть, через которую он вошел в приложение.

    По умолчанию для Страны установлено значение Определять автоматически. Чтобы изменить данную настройку, используйте выпадающий список Страна на странице Кастомизация виджета.

    Note
    Если вы хотите задать свой собственный порядок отображения кнопок социальных сетей на виджете, обратитесь к аккаунт-менеджеру проекта.

    Как задать язык отображения виджета

    Стандартные виджеты авторизации Иксоллы локализованы на 20 языков. Язык локализации интерфейса кодируется в первых двух буквах параметра preferredLocale, который может быть передан виджету при его инициализации.

    Пример: Для отображения виджета на английском языке задайте preferredLocale: "en_XX".

    Если значение переменной preferredLocale не задано, то язык определяется автоматически по IP-адресу или языку браузера.

    Чтобы задать язык, на котором виджет отображается пользователю:

    1. На странице Кастомизация виджета выберите язык из выпадающего списка Поддерживаемые языки.

      Переменная preferredLocale в сгенерированном Иксоллой коде инициализации виджета изменит значение в соответствии с вашим выбором.

    1. Чтобы просмотреть код инициализации, переключитесь в режим HTML (с помощью кнопки над областью просмотра).
    2. Чтобы проконтролировать отображение виджета на выбранном языке, переключитесь в режим Предварительный просмотр.

    Note
    Также вы можете настраивать язык отображения виджета, изменяя значение переменной preferredLocale непосредственно в коде инициализации виджета, интегрированном в ваше приложение или веб-сайт.

    Кастомизация виджета с помощью JSON-файлов

    Если у вас уже подключен Xsolla Login Widget SDK, вы можете изменять внешний вид и наполнение виджета и без использования Личного кабинета. В текстовом редакторе внесите необходимые изменения в следующие JSON-файлы:

    • socialsJSON, чтобы задать собственный порядок отображения кнопок социальных сетей на виджете;
    • themeJSON, чтобы настроить внешний вид виджета:
      • выбрать цветовую гамму виджета и окружающей его области;
      • задать степень скругления углов для отдельных элементов: кнопок, полей ввода, самого виджета;
      • использовать фоновые изображения для различных элементов: заголовка виджета, самого виджета, области вокруг виджета;
      • при необходимости скрыть на виджете вкладку авторизации или регистрации, а также кнопки социальных сетей.

    Доступные для редактирования настройки виджета описаны в разделе JSON-файлы с настройками виджета.

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

    В другой раз

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

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

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