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

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

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

Виджет совместим с порталами имеющих логику авторизации аналогичную Google

Логика работы виджета

Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы "рисунков"(JPEG,PNG)

• Подготовить трансляцию
• Скопировать URL ссылку с нужной интернет страницы авторизации
• Развернуть с помощью клавиши "F11" окно ввода логина и сделать скриншот
• Также развернуть с помощью клавиши "F11" окно ввода пароля и сделать скриншот
• Зайти в личный кабинет SmartPlayer и создать папку в разделе "Контент" для сделанных скриншотов
• Запустить виджет по инструкции и занести в него нужные данные
• Авторизироваться с помощью виджета и использовать контент с сайта в своей трансляции внутри SmartPlayer

Логика работы виджета

Если пользователь использует в качестве устройства ноутбук, то после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".

Настройка виджета

Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google.

Получение виджета

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

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

Создание трансляции

Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице Раздел "Трансляции"

Добавление виджета

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

• Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
• В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
• Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек

Поиск виджета и разделе "Контент"

Перенос виджета в рабочую зону

Подготовка подложки

В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать скриншот развернутого экрана.
Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.
Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.

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

Для корректного использования виджета авторизации на Google необходимо использовать [ссылку].

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

Готовые подложки для логина и пароля на примере Google

Работа с виджетом

Настройка виджета

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

Настройка виджета производится только после всех действий, указанных выше в статье.

Открыв виджет пользователь увидит области на экране, которые сможет перемещать.
Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.
В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):

• Адрес страницы авторизации.
• Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки.
• Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки".
• После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках.
• Внизу слева появится переключатель скриншотов подложки.

Поля которые обязательно надо заполнить

Поля выбора источников с контентом и применения настроек

Взаимодействие с подложками

Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.
Следующим шагом совмещаем кнопку "Далее" с полем "Next".
Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.
Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».
Далее нажимает на кнопку «Сохранить».
Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве.

Подложка где сопоставляют поля и переключают подложки

Внешний вид виджета

Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:

1. Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
2. Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
3. Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.
4. Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
5. Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.

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

Актуальное состояние виджета на 10.2024

Виджет получил ряд доработок, которые исправили некоторые сложные в управлении моменты и улучшили его работу в целом. К списку этих доработок можно отнести:

• Улучшено проигрывание нескольких виджетов в рамках одной трансляции. Данная доработка была связана с появлением ошибки, которая периодически появлялась при цикличном проигрывании нескольких виджетов. В данном случае было добавлена функциональность запоминания логина и пароля
• При изменении контента в процессе авторизации или после авторизации - виджет автоматически обновляет страницу
• Виджет теперь "регистрирует" ввод логина и пароля - единожды, при первом входе
• Виджет получил возможность работать на устройствах с разным разрешением и ориентацией
• Проработана возможность использовать виджет на 4К экранах и на экранах нестандартной формы. В данном случае если у пользователя контент Full HD, а на устройстве используется другое разрешение (например 4К), то пользователю нужно создать контент ссылки и запустить его на нужном устройстве. Далее на нужном устройстве снять с него скриншот и выкачать данный скриншот, впоследствии подложив его на стрницу виджета авторизации.
• Появилась возможность активировать десктопную вариант виджета с помощью чекбокса/галочка в настройках виджета. Если включить десктопную версию, то устройство под управлением Android OS(работает только на этой ОС) масштабирует отображение под десктопную версию.
• Добавлена возможность скейла (масштабирования) разрешения виджета в зависимости от параметров воспроизведения.
• Добавили функциональную кнопку "Далее/Next" в окне виджета, которая позволит пользователю сделать еще один "шаг" действия. Данное поле позволит пользователю нажимать на промежуточные кликабельные элементы на странице авторизации, которые содержат неучтенные шаги.

Пример отображения кнопки "Далее/Next"

Например при авторизации в Google mail может появиться дополнительное окно с действием подтверждение номера телефона. Выбрав кнопку "Далее/Next" и седлав ее нужного размера с кнопкой "Продолжить" можно пройти этот промежуточный шаг со стороны авторизации в Google.

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

Работа виджета авторизации

Итоговый результат

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