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

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

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

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

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

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

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

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

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

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

Виджет авторизации настраивается самим пользователем при входе

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

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

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

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

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

1. Первоначально нужно перейти в главную панель навигации
2. В разделе «Трансляции» выбрать пункт «Создать»
   
3. В появившемся окне задаем параметры страницы. Для этого в верхней части экрана нажимаем "шестерёнку" и в появившемся меню указываем параметры «Ширина» и «Высота». Нажимаем сохранить. По умолчанию используется горизонтальная ориентация 1920Х1080.
4. Выбираем зону трансляции нажав на специальный иконку и растягиваем ее на все поле.

Настройка разрешения

Подготовка трансляции

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

Установка продолжительности трансляции

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

• Кликаем на рабочее поле и обращаем внимание на появившееся меню под названием "контент", в правой части экрана. Там представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
• В этом списке находится виджет. Выбираем его и перетаскиваем его в рабочее поле.
  
• Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек

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

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

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

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

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

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

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

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

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

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

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

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

После всех подготовительных мероприятий необходимо перейти в настройки виджета. В открывшемся окне можно увидеть области виджета, которые можно перемещать. Справа сверху нужно нажать на "Шестерёнку" и открыть окно настройки параметров виджета. В них мы указываем :

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

Манипуляции с подложками

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

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

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

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

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

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

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

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