Виджет авторизации Ver.2.0
Описание ситуации
Виджет авторизации — это инструмент, который позволял пользователям проводить автоматическую авторизацию на платформах при отображении, путём наложения виртуальных элементов (полей и кнопок) на скриншоты страниц авторизации. Для работы виджет использует URL-адрес страницы авторизации и сопоставляет изображение на скриншоте с отображаемой по URL страницей. Таким образом, процесс авторизации автоматизируется.
Новая версия виджета предлагает дополнительные возможности к логике работы функционала, упрощает взаимодействие и делает пользовательский опыт более позитивным.
Ознакомиться с работой первой версии виджета можно по ссылке здесь
Добавление виджета в личный кабинет
Чтобы добавить виджет в личный кабинет, пользователю нужно запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.
После этого пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».
В разделе «Контент» перетаскиваем виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.
Главная страница виджета
После переноса виджета для первичной настройки пользователь должен дважды кликнуть по иконке. Данное действие перенесет его на главную страницу виджета.
На главной странице виджета отображается:
- инструкция по использованию виджета (главный экран, на котором после настройки будут отображены шаги с полями и кнопками самого виджета);
- кнопки управления виджетом;
- колонка учёта шагов.
Общие настройки виджета
Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:
- выбор языка — позволяет выбрать один из доступных для работы виджета языков. Доступные языки — русский, английский, испанский, португальский, казахский;
- адрес страницы — вставить URL-ссылку на нужную страницу авторизации;
- чекбокс (галочка) «Запустить десктопную версию» — активирует/деактивирует масштабирование элементов, отображаемых на экране по размерам экрана устройства вывода данных;
- интервал обновления страницы — указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
- чекбокс (галочка) «Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
- скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона, будут использоваться ближайшие пограничные к диапазону значения;
- задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в миллисекундах;
- выбрать изображение — позволяет выбрать загруженные изображения из папки, расположенной в личном кабинете SmartPlayer.
Загрузка и скачивание настроек
В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
Завершение общих настроек виджета
После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. Либо пользователь может не сохранять выставленные настройки по кнопке «Сбросить».
Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.
Добавление шага
После завершения общих настроек виджета в левой нижней части экрана для пользователя станет активна кнопка «Добавить шаг». По клику на нее изменится отображение страницы:
- будут отображены новые кнопки:
- выбрать скриншот;
- добавить действие.
- в колонке «Шаги авторизации» появится новый шаг и две кнопки:
- применить;
- блок схема.
- в левом верхнем углу появится обозначение текущего шага в виде кнопки (является кликабельной кнопкой)
Выбор скриншота
По нажатию на одноименную кнопку откроется модальное окно, в котором загружены все скриншоты из папки. В этом окне выбрать нужный для шага скриншот.
После выбора название скриншота будет отображено в колонке «Шаги авторизации» для первого шага.
Добавить действие
По нажатию на одноименную кнопку откроется выбор с двумя вариантами действий:
- добавить поле ввода — создаёт на экране поле для наложения и ввода данных накладываемое на поле авторизации;
- добавить кнопку — создаёт кнопку, которая выполняет клик и накладывается на кнопки, которые есть на страницах авторизации, для исоплнения действия;
После создания поля и кнопки пользователь размещает их на экране со скриншотом.
Добавленные действия также отобразятся в колонке «Шаги авторизации» внутри текущего шага.
При перемещении элементов откроется панель с параметрами для настройки выбранного элемента. О параметрах поля и кнопки будет описано ниже в разделе. Также при перемещении подсвечивается только выбранный пользователем элемент.
Колонка «Шаги авторизации»
В колонке «Шаги авторизации» отображается список всех шагов с действиями.
Эта колонка состоит из списка шагов, внутри которых описаны:
- название картинки;
- поле ввода(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика);
- кнопка действия(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика).
Каждый шаг можно удалить по отдельной кнопке «Удалить шаг». Также в каждом шаге можно удалить действия оставив его пустым (только с картинкой), при необходимости.
Чтобы применить все действия и настройки для шагов кликнуть на синюю кнопку «Применить», расположенную внизу колонки «Шаги авторизации». Виджет оповестит пользователя об успешном применении шагов модальным окном с подтверждением.
Настройка поля ввода и кнопки действия
Кликнув по иконке в виде шестеренки рядом с кнопкой или полем пользователь может перейти в настройки данного элемента.
Кнопка включает в себя следующие настройки:
- имя — ввести название кнопки;
- координата X — прописать числовое значение координаты в пикселях;
- координата Y — прописать числовое значение координаты в пикселях;
- ширина — прописать числовое значение в пикселях;
- высота — прописать числовое значение в пикселях;
- время задержки — прописать числовое значение, которое указывает задержку перед нажатием кнопки. Измеряется в миллисекундах.
Поле включает в себя настройки:
- имя — ввести название поля;
- значение — прописать значение, которое будет введено в поле при наложении на изображение;
- координата X — прописать числовое значение координаты в пикселях;
- координата Y — прописать числовое значение координаты в пикселях;
- ширина — прописать числовое значение в пикселях;
- высота — прописать числовое значение в пикселях;
- время задержки — прописать числовое значение, которое указывает задержку перед вводом значения в поле. Измеряется в миллисекундах.
В обоих случаях для применения изменённых настроек кнопки или поля нажать на синюю кнопку «Применить» внизу колонки.
Блок-схема
При клике на кнопку «Блок-схема» перед пользователем появится блок-схема с последовательностью шагов и действий внутри каждого шага. Это позволит более наглядно просмотреть и понять текущую логику авторизации построенную пользователем в виджете.
Добавление настроенного виджета в трансляцию
Чтобы полностью ознакомиться с работой данной функциональности, запустить трансляцию с расписанием и добавить в качестве контента виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
Видеоинструкция
Настройка виджета авторизации ver. 2.0
Дополнительная информация
Если данная статья не помогает использовать функционал по назначению, или после её прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.
Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"
