Виджет авторизации: различия между версиями
(Отметить эту версию для перевода) |
Нет описания правки |
||
Строка 1: | Строка 1: | ||
<languages/> | |||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> |
Версия от 16:01, 18 августа 2023
Описание ситуации
Пользователям периодически необходимо загрузить контент со своего сайта. Для получения контента им чаще всего нужно пройти процесс авторизацию. Чтобы не проходит аутентификации в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
Логика работы виджета
- Подготовить трансляцию
- Пользователь заходит на страницу авторизации и копирует URL страницы
- В этой же странице разворачивает окно "Логин" на полный экран, нажав "F11".
- Тоже самое делает с окном "Пароль"
- Сохраняет скриншоты на своём устройстве
- Заходит в личный кабинет SmartPlayer
- Создаёт папку для скриншотов внутри личного кабинета и переносит их в нее
- Запускает виджет по инструкции и заносит в него нужные данные
- Авторизуется с помощью виджета и может продолжать демонстрировать контент
Важно: Если пользователь использует в качестве устройства ноутбук и после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".
Настройка виджета
Получение виджета
Пользователь получает виджет в виде архива.
Этот архив интегрируется в личный кабинет. Его добавление происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит с помощью перетаскивания архива из репозитория где он хранится в окно личного кабинета.
После этого виджет будет хранится внутри вашего личного кабинета
![](/images/0/0c/IG.png)
Создание трансляции
- Первоначально нужно перейти в главную панель навигации
- В разделе «Трансляции» выбрать пункт «Создать»
- В появившемся окне задаем параметры страницы. Для этого в верхней части экрана нажимаем "шестерёнку" и в появившемся меню указываем параметры «Ширина» и «Высота». Нажимаем сохранить. По умолчанию используется горизонтальная ориентация 1920Х1080.
- Выбираем зону трансляции нажав на специальный иконку и растягиваем ее на все поле.
![](/images/8/81/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5.png)
![](/images/a/ad/%D0%9F%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0.png)
Добавление виджета
![](/images/c/c8/%D0%92%D1%80%D0%B5%D0%BC%D1%8F_10400.png)
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.
- Кликаем на рабочее поле и обращаем внимание на появившееся меню под названием "контент", в правой части экрана. Там представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
- В этом списке находится виджет. Выбираем его и перетаскиваем его в рабочее поле.
- Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
![](/images/0/06/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0_%D0%B2_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%8F%D1%86%D0%B8%D1%8E.png)
![](/images/2/2d/%D0%9F%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0.png)
Подготовка подложки
В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.
![](/images/d/db/%D0%9F%D0%BE%D0%B4%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0_%D0%BB%D0%BE%D0%B3%D0%B8%D0%BD_%D0%B8_%D0%BF%D0%B0%D1%80%D0%BE%D0%BB%D1%8C.png)
Работа с виджетом
Настройка виджета
![](/images/e/ea/%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82.png)
![](/images/d/d5/%D0%9D%D1%83%D0%B6%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F.png)
![](/images/9/97/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8%D1%82%D1%8C_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8.png)
После всех подготовительных мероприятий необходимо перейти в настройки виджета. В открывшемся окне можно увидеть области виджета, которые можно перемещать. Справа сверху нужно нажать на "Шестерёнку" и открыть окно настройки параметров виджета. В них мы указываем :
- Указываем адрес страницы авторизации в графе "Адрес страницы сервиса авторизации".
- Заполняем строку "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки
- Далее скролим в самый низ страницы настроек и выбираем папку, где хранятся скриншоты. Нажимаем «Сохранить» и «Применить настройки»
- После у нас отобразились наши скриншоты и поля, в которых указаны данные прописанные в настройках виджета.
- Слева внизу появляется переключатель скриншотов подложки.
Манипуляции с подложками
Выбираем скриншот с логином, он обычно идёт как "Scrennshot 1"в нём совмещаем контуры окна "логин" и подставляем его в поле "логин".
Кнопку «далее» совмещаем с прямоугольником «next».
Переходим на следующий скриншот "Scrennshot 2". Поле «пароль» совмещаем по контуру с окном «пароль».
На кнопку «далее» на скриншоте с паролем подставляем «Authorize».
Нажимаем кнопку «Сохранить».
Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
![](/images/8/8b/%D0%9E%D0%BA%D0%BD%D0%BE.png)
Внешний вид виджета
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
- Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
- Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
- Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.
- Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
![](/images/d/db/%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8.png)
Итоговый результат
Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.