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

Материал из SmartPlayer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок схема

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

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

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

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

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

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

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

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

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

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

Источник — https://wiki.smartplayer.org/index.php?title=Виджет_авторизации_Ver.2.0&oldid=18856