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

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

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

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

Необходимость

Бывают такие ситуации что пользователь хочет транслировать контент с закрытого ресурса. Чаще всего этот "закрытый" ресурс потребует пройти авторизацию и потребует ввести персональные данные.

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

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

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

Принцип действия

Пользователь заходит на страницу где он хочет авторизоваться. Например он захотел использовать какой то из сервисов Google и ему требуется пройти аутентификацию. То есть ввести логин и пароль от учётной записи. Для этого ему понадобится зайти на страницу аутентификации. Скопировать ее URL-ссылку. Развернуть страницу в браузере на полный экран нажав клавишу "F 11". После развертывания на полный экран необходимо сделать скриншот сначала с "окном" логина. Обязательно надо растягивать скриншот на всю ширину экрана. Таким же образом поступаем и с "окном" пароля. Сохраняем оба скриншота на своё устройство. Далее

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

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

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

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

Архив для интеграции виджета в личный кабинет можно получить от специалистов команды SmartPlayer.
Интегрировать его надо в разделе "Контент" во вкладке "Виджеты". Сам интеграция происходит путём перетаскивания архива из окна где он хранится в окно личного кабинета.
После этого виджет будет хранится внутри вашего личного кабинета

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

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

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

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

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

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

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

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

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

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

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

Виджет состоит из четырёх блоков:

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

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

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

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