Виджет авторизации: различия между версиями

Материал из SmartPlayer
Нет описания правки
Строка 1: Строка 1:
<translate>
== '''Описание ситуации''' ==
== '''Описание ситуации''' ==
Пользователям периодически необходимо загрузить контент со своего сайта. Для получения контента им чаще всего нужно пройти процесс авторизацию. Чтобы не проходит аутентификации в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
Пользователям периодически необходимо загрузить контент со своего сайта. Для получения контента им чаще всего нужно пройти процесс авторизацию. Чтобы не проходит аутентификации в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
{{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}}
{{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}}
 
</translate>
<translate>
== '''Логика работы виджета''' ==
== '''Логика работы виджета''' ==
{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы картинок (JPEG,PNG)|warn}}
{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы картинок (JPEG,PNG)|warn}}
Строка 15: Строка 17:
* Авторизуется с помощью виджета и может продолжать демонстрировать контент  
* Авторизуется с помощью виджета и может продолжать демонстрировать контент  
'''Важно: Если пользователь использует в качестве устройства ноутбук и после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".'''
'''Важно: Если пользователь использует в качестве устройства ноутбук и после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".'''
 
</translate>
<translate>
== '''Настройка виджета''' ==
== '''Настройка виджета''' ==
{{Note|Виджет авторизации настраивается самим пользователем при входе |warn}}
{{Note|Виджет авторизации настраивается самим пользователем при входе |warn}}
{{Note|В качестве примера будет использоваться страница авторизации в Google. |warn}}
{{Note|В качестве примера будет использоваться страница авторизации в Google. |warn}}
Строка 25: Строка 27:
После этого виджет будет хранится внутри вашего личного кабинета
После этого виджет будет хранится внутри вашего личного кабинета
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|150px]]
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|150px]]
</translate>
<translate>
=== '''Создание трансляции''' ===
=== '''Создание трансляции''' ===
# Первоначально нужно перейти в главную панель навигации  
# Первоначально нужно перейти в главную панель навигации  
Строка 40: Строка 44:
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |150px]]
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |150px]]
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |150px]]
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |150px]]
 
</translate>
 
<translate>
=== '''Подготовка подложки''' ===
=== '''Подготовка подложки''' ===
В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.<br>
В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.<br>
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
[[File:Подложка логин и пароль.png|thumb|center|Готовые подложки для логина и пароля на примере Google|150px]]
[[File:Подложка логин и пароль.png|thumb|center|Готовые подложки для логина и пароля на примере Google|150px]]
 
</translate>
<translate>
== '''Работа с виджетом''' ==
== '''Работа с виджетом''' ==
=== '''Настройка виджета''' ===
=== '''Настройка виджета''' ===
Строка 68: Строка 73:
Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|300px]]
[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|300px]]
 
</translate>
<translate>
=== '''Внешний вид виджета''' ===
=== '''Внешний вид виджета''' ===
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
Строка 76: Строка 82:
# Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
# Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
[[File:Настраиваемы области.png|thumb|center|Пример отображения областей виджета авторизации|300px]]
[[File:Настраиваемы области.png|thumb|center|Пример отображения областей виджета авторизации|300px]]
 
</translate>
<translate>
== '''Итоговый результат''' ==
== '''Итоговый результат''' ==
Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.
Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.
</translate>

Версия от 14:55, 18 августа 2023

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

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

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

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

Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы картинок (JPEG,PNG)
  • Подготовить трансляцию
  • Пользователь заходит на страницу авторизации и копирует URL страницы
  • В этой же странице разворачивает окно "Логин" на полный экран, нажав "F11".
  • Тоже самое делает с окном "Пароль"
  • Сохраняет скриншоты на своём устройстве
  • Заходит в личный кабинет SmartPlayer
  • Создаёт папку для скриншотов внутри личного кабинета и переносит их в нее
  • Запускает виджет по инструкции и заносит в него нужные данные
  • Авторизуется с помощью виджета и может продолжать демонстрировать контент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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