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

Материал из SmartPlayer
(Новая страница: «Authorization Widget»)
 
(Новая страница: «== '''Widget Workflow Logic:''' == {{Note|The widget is designed for panels that use Full HD resolution (1920X1080) and supports all image formats (JPEG, PNG).|warn}} * To Prepare the Broadcast * The user navigates to the authorization page and copies the URL of the page. * On the same page, the user expands the "Login" window to full screen by pressing "F11". * The user does the same for the "Password" window. * Screenshots are saved on the user's device....»)
Строка 2: Строка 2:
Users periodically need to upload content from their website. To access the content, they often need to go through the authorization process. To avoid manual authentication and fully automate the process, an authorization widget was created.
Users periodically need to upload content from their website. To access the content, they often need to go through the authorization process. To avoid manual authentication and fully automate the process, an authorization widget was created.
{{Note|The widget is compatible with portals that have an authorization logic similar to Google.|warn}}
{{Note|The widget is compatible with portals that have an authorization logic similar to Google.|warn}}
<div lang="ru" dir="ltr" class="mw-content-ltr">
== '''Widget Workflow Logic:''' ==
== '''Логика работы виджета''' ==
{{Note|The widget is designed for panels that use Full HD resolution (1920X1080) and supports all image formats (JPEG, PNG).|warn}}
{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы картинок (JPEG,PNG)|warn}}
* To Prepare the Broadcast
* Подготовить трансляцию
* The user navigates to the authorization page and copies the URL of the page.
* Пользователь заходит на страницу авторизации и копирует URL страницы
* On the same page, the user expands the "Login" window to full screen by pressing "F11".
* В этой же странице разворачивает окно "Логин" на полный экран, нажав "F11".
* The user does the same for the "Password" window.
* Тоже самое делает с окном "Пароль"
* Screenshots are saved on the user's device.
* Сохраняет скриншоты на своём устройстве
* The user accesses the SmartPlayer personal cabinet.
* Заходит в личный кабинет SmartPlayer
* Inside the personal cabinet, the user creates a folder for the screenshots and transfers them there.
* Создаёт папку для скриншотов внутри личного кабинета и переносит их в нее
* The user launches the widget according to the instructions and inputs the required data.
* Запускает виджет по инструкции и заносит в него нужные данные
* The user logs in using the widget and can continue to showcase the content.
* Авторизуется с помощью виджета и может продолжать демонстрировать контент
'''Note: If the user is using a laptop as their device, pressing "F11" may not result in any action. This is because, by default in their operating system, the "Function panel use" option might be enabled. In such a case, to expand the browser page, they will need to press the "Fn + F11" keys.'''
'''Важно: Если пользователь использует в качестве устройства ноутбук и после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".'''
</div>
<div lang="ru" dir="ltr" class="mw-content-ltr">
<div lang="ru" dir="ltr" class="mw-content-ltr">
== '''Настройка виджета''' ==
== '''Настройка виджета''' ==

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

Description of the situation:

Users periodically need to upload content from their website. To access the content, they often need to go through the authorization process. To avoid manual authentication and fully automate the process, an authorization widget was created.

The widget is compatible with portals that have an authorization logic similar to Google.

Widget Workflow Logic:

The widget is designed for panels that use Full HD resolution (1920X1080) and supports all image formats (JPEG, PNG).
  • To Prepare the Broadcast
  • The user navigates to the authorization page and copies the URL of the page.
  • On the same page, the user expands the "Login" window to full screen by pressing "F11".
  • The user does the same for the "Password" window.
  • Screenshots are saved on the user's device.
  • The user accesses the SmartPlayer personal cabinet.
  • Inside the personal cabinet, the user creates a folder for the screenshots and transfers them there.
  • The user launches the widget according to the instructions and inputs the required data.
  • The user logs in using the widget and can continue to showcase the content.

Note: If the user is using a laptop as their device, pressing "F11" may not result in any action. This is because, by default in their operating system, the "Function panel use" option might be enabled. In such a case, to expand the browser page, they will need to press the "Fn + F11" keys.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник — https://wiki.smartplayer.org/index.php?title=Виджет_авторизации/en&oldid=9934