Виджет авторизации Ver.2.0

Описание ситуации

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

Добавление виджета в личный кабинет

Чтобы добавить виджет в личный кабинет, пользователю нужно запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.

Пример виджета в формате .zip - архива

После этого пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».

Пример отображения раздела «Контент» в личном кабинете

В разделе «Контент» перетаскиваем виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.

Пример отображения переноса виджета с помощью drag-and-drop

Главная страница виджета

После переноса виджета для первичной настройки пользователь должен дважды кликнуть по иконке. Данное действие перенесет его на главную страницу виджета.

Пример отображения главной страницы виджета

На главной странице виджета отображается:

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

Пример отображения иконки для перехода в настройки виджета

При необходимости, можно открыть инструкцию снова, кликнув на иконку в виде знака «?».

Общие настройки виджета

Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:

• выбор языка — позволяет выбрать один из доступных для работы виджета языков. Доступные языки — русский, английский, испанский, португальский, казахский;
• адрес страницы — вставить URL-ссылку на нужную страницу авторизации;
• чекбокс (галочка) «Запустить десктопную версию» — активирует/деактивирует масштабирование элементов, отображаемых на экране по размерам экрана устройства вывода данных;
• интервал обновления страницы — указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
• чекбокс (галочка) «Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
• скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона, будут использоваться ближайшие пограничные к диапазону значения;
• задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в миллисекундах;
• выбрать изображение — позволяет выбрать загруженные изображения из папки, расположенной в личном кабинете SmartPlayer.

Пример отображения общих настроек виджета

Загрузка и скачивание настроек

В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.

Пример отображения иконок в настройках виджета

Завершение общих настроек виджета

После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. Либо пользователь может не сохранять выставленные настройки по кнопке «Сбросить».

Пример отображения кнопок «Применить настройки» и «Сбросить»

Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.

Пример отображения кнопки «Сохранить»

Добавление шага

После завершения общих настроек виджета в левой нижней части экрана для пользователя станет активна кнопка «Добавить шаг». По клику на нее изменится отображение страницы:

• будут отображены новые кнопки:
  • выбрать скриншот;
  • добавить действие.
• в колонке «Шаги авторизации» появится новый шаг и две кнопки:
  • применить;
  • блок схема.
• в левом верхнем углу появится обозначение текущего шага в виде кнопки (является кликабельной кнопкой)

Пример отображения изменений при добавлении шага

Выбор скриншота

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

Пример отображения модального окна с выбором скриншота

После выбора название скриншота будет отображено в колонке «Шаги авторизации» для первого шага.

Пример отображения изменений в колонке «Шаги авторизации»

Добавить действие

По нажатию на одноименную кнопку откроется выбор с двумя вариантами действий:

• добавить поле ввода — создаёт на экране поле для наложения и ввода данных накладываемое на поле авторизации;
• добавить кнопку — создаёт кнопку, которая выполняет клик и накладывается на кнопки, которые есть на страницах авторизации, для исоплнения действия;

Пример отображения функциональности кнопки

После создания поля и кнопки пользователь размещает их на экране со скриншотом.

Пример отображения поля ввода и кнопки

Добавленные действия также отобразятся в колонке «Шаги авторизации» внутри текущего шага.

Пример отображения в колонке «Шаги авторизации»

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

Колонка «Шаги авторизации»

В колонке «Шаги авторизации» отображается список всех шагов с действиями.

Пример отображения колонки «Шаги авторизации»

Эта колонка состоит из списка шагов, внутри которых описаны:

• название картинки;
• поле ввода(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика);
• кнопка действия(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика).

Пример отображения колонки «Шаги авторизации»

Каждый шаг можно удалить по отдельной кнопке «Удалить шаг». Также в каждом шаге можно удалить действия оставив его пустым (только с картинкой), при необходимости.
Чтобы применить все действия и настройки для шагов кликнуть на синюю кнопку «Применить», расположенную внизу колонки «Шаги авторизации». Виджет оповестит пользователя об успешном применении шагов модальным окном с подтверждением.

Пример отображения модального окна с подтверждением сохранения настроек

Настройка поля ввода и кнопки действия

Некоторые параметры, описанные в этом разделе автоматически изменяются если вы перетаскиваете поле или кнопку в рамках экрана виджета.

Кликнув по иконке в виде шестеренки рядом с кнопкой или полем пользователь может перейти в настройки данного элемента.
Кнопка включает в себя следующие настройки:

• имя — ввести название кнопки;
• координата X — прописать числовое значение координаты в пикселях;
• координата Y — прописать числовое значение координаты в пикселях;
• ширина — прописать числовое значение в пикселях;
• высота — прописать числовое значение в пикселях;
• время задержки — прописать числовое значение, которое указывает задержку перед нажатием кнопки. Измеряется в миллисекундах.

Пример отображения параметров для кнопки

Поле включает в себя настройки:

• имя — ввести название поля;
• значение — прописать значение, которое будет введено в поле при наложении на изображение;
• координата X — прописать числовое значение координаты в пикселях;
• координата Y — прописать числовое значение координаты в пикселях;
• ширина — прописать числовое значение в пикселях;
• высота — прописать числовое значение в пикселях;
• время задержки — прописать числовое значение, которое указывает задержку перед вводом значения в поле. Измеряется в миллисекундах.

Пример отображения для полей

В обоих случаях для применения изменённых настроек кнопки или поля нажать на синюю кнопку «Применить» внизу колонки.

Пример отображения кнопки «Применить»

Блок-схема

При клике на кнопку «Блок-схема» перед пользователем появится блок-схема с последовательностью шагов и действий внутри каждого шага. Это позволит более наглядно просмотреть и понять текущую логику авторизации построенную пользователем в виджете.

Пример отображения блок-схемы

Добавление настроенного виджета в трансляцию

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

• Раздел "Устройства"
• Раздел "Контент на устройства"
• Раздел "Трансляции"
• Раздел "Расписание"

Видеоинструкция

Настройка виджета авторизации ver. 2.0

Дополнительная информация

Если данная статья не помогает использовать функционал по назначению, или после её прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.

Пример отображения вкладки «Обсуждения» на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"