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

Материал из SmartPlayer
(Новая страница: «== '''Situation Description''' == A user may want to use content from their own website as broadcast content. To incorporate this content into the broadcast, they will likely need to go through an authentication process on their site. To avoid manual authentication and fully automate the process, an authentication widget was created. {{Note|The widget is compatible with portals that have a Google-like authentication logic|warn}} == '''Widget Operating Logic'...»)
(Новая страница: «== '''Widget Setup''' == The authentication widget is set up by the user upon entry. The Google authentication page will be used as an example. === '''Obtaining the Widget''' === The user receives the widget in the form of an archive. This archive is integrated into the personal account. <br> To add the widget archive, go to the "Content" section and the "Widgets" tab. Embedding is done by dragging and dropping the archive from the repository where it is sto...»)
Строка 13: Строка 13:
[[File:Логика.png.png|thumb|center| Widget operating logic|800px]]
[[File:Логика.png.png|thumb|center| Widget operating logic|800px]]
{{Note| If the user is using a laptop, pressing "F11" might not result in any action. This is because the operating system may have "Function key lock" enabled by default. In such cases, to expand the browser window, press "Fn + F11".|warn}}
{{Note| If the user is using a laptop, pressing "F11" might not result in any action. This is because the operating system may have "Function key lock" enabled by default. In such cases, to expand the browser window, press "Fn + F11".|warn}}
<div lang="ru" dir="ltr" class="mw-content-ltr">
== '''Widget Setup''' ==
== '''Настройка виджета''' ==
The authentication widget is set up by the user upon entry. The Google authentication page will be used as an example.
Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google.  
=== '''Obtaining the Widget''' ===
=== '''Получение виджета''' ===
The user receives the widget in the form of an archive. This archive is integrated into the personal account. <br>
Пользователь получает виджет в виде архива. Данный архив интегрируется  в личный кабинет. <br>
To add the widget archive, go to the "Content" section and the "Widgets" tab. Embedding is done by dragging and dropping the archive from the repository where it is stored into the personal account window.<br>
Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
After this, the widget will be stored within the user's personal account.
После этого виджет будет хранится внутри личного кабинета пользователя.
[[File:IG.png|thumb|center|Example of dragging the widget into the personal account|800px]]
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|800px]]
=== '''Creating a Broadcast''' ===
=== '''Создание трансляции''' ===
Before using the widget, the user needs to create a broadcast into which the widget will be placed. Detailed information on creating a broadcast can be found on the [[Раздел "Трансляции"]] page.
Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице [[Раздел "Трансляции"]]
=== '''Adding the Widget''' ===
=== '''Добавление виджета''' ===
Once the user has set up the broadcast, they need to add the widget.<br>
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br>
* The user clicks on the workspace and finds the "content" line on the right side of the screen. This line features several folders with sorted content and the main folder with all content uploaded to the system.
* Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
* In the list, select the required widget. Using drag-and-drop, move it to the workspace.
* В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
* In the "Content Settings" tab on the right side of the screen, set the duration to 10400 seconds.
* Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
[[File:Добавление виджета в трансляцию.png|thumb|center|Finding the widget in the "Content" section|800px]]
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |800px]]
[[File:Перенос виджета.png|thumb|center|Dragging the widget into the workspace|800px]]
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |800px]]
=== '''Preparing the Background''' ===
=== '''Подготовка подложки''' ===
Open the Google authentication page in the browser and enable full-screen mode (default is F11). Then take a screenshot of the expanded screen.<br>
В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать  скриншот развернутого экрана.<br>
The next step is to enter the login and go to the password entry page, similarly taking a screenshot of the screen.<br>
Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.<br>
Create a separate folder in the "Content" tab and add the created screenshots.<br>
Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.<br>
{{Note|Screenshots should be taken in full-screen mode, capturing the entire screen area; otherwise, the authentication fields may not align.|warn}}
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
{{Note|Each time the authentication widget is added and used, the correctness of the field positioning within Google should be checked. Since the Google authentication page is frequently updated, the display of the fields may change.|warn}}
{{Note|При каждом добавлении виджета авторизации и его использовании необходимо сверять правильность расположения полей внутри Google. Так как страница авторизации Google достаточно часто обновляется и отображение полей для заполнения может меняться.|warn}}
[[File:Log_and_pass.png|thumb|center|Ready backgrounds for login and password on the example of Google|800px]]
[[File:Log_and_pass.png|thumb|center|Готовые подложки для логина и пароля на примере Google|800px]]
</div>
<div lang="ru" dir="ltr" class="mw-content-ltr">
<div lang="ru" dir="ltr" class="mw-content-ltr">
== '''Работа с виджетом''' ==
== '''Работа с виджетом''' ==

Версия от 10:35, 14 мая 2024

Situation Description

A user may want to use content from their own website as broadcast content. To incorporate this content into the broadcast, they will likely need to go through an authentication process on their site. To avoid manual authentication and fully automate the process, an authentication widget was created.

The widget is compatible with portals that have a Google-like authentication logic

Widget Operating Logic

The widget is designed for use in panels that utilize Full HD resolution (1920X1080) and supports all "image" formats (JPEG, PNG)
  • Prepare the broadcast
  • Copy the URL link from the required web page for authentication
  • Expand the login input window using the "F11" key and take a screenshot
  • Similarly, expand the password input window using the "F11" key and take a screenshot
  • Log into the SmartPlayer personal account and create a folder in the "Content" section for the screenshots
  • Launch the widget following the instructions and enter the necessary data
  • Authenticate using the widget and use the content from the site in your broadcast within SmartPlayer
Файл:Логика.png.png
Widget operating logic
If the user is using a laptop, pressing "F11" might not result in any action. This is because the operating system may have "Function key lock" enabled by default. In such cases, to expand the browser window, press "Fn + F11".

Widget Setup

The authentication widget is set up by the user upon entry. The Google authentication page will be used as an example.

Obtaining the Widget

The user receives the widget in the form of an archive. This archive is integrated into the personal account.
To add the widget archive, go to the "Content" section and the "Widgets" tab. Embedding is done by dragging and dropping the archive from the repository where it is stored into the personal account window.
After this, the widget will be stored within the user's personal account.

Example of dragging the widget into the personal account

Creating a Broadcast

Before using the widget, the user needs to create a broadcast into which the widget will be placed. Detailed information on creating a broadcast can be found on the Раздел "Трансляции" page.

Adding the Widget

Once the user has set up the broadcast, they need to add the widget.

  • The user clicks on the workspace and finds the "content" line on the right side of the screen. This line features several folders with sorted content and the main folder with all content uploaded to the system.
  • In the list, select the required widget. Using drag-and-drop, move it to the workspace.
  • In the "Content Settings" tab on the right side of the screen, set the duration to 10400 seconds.
Finding the widget in the "Content" section
Dragging the widget into the workspace

Preparing the Background

Open the Google authentication page in the browser and enable full-screen mode (default is F11). Then take a screenshot of the expanded screen.
The next step is to enter the login and go to the password entry page, similarly taking a screenshot of the screen.
Create a separate folder in the "Content" tab and add the created screenshots.

Screenshots should be taken in full-screen mode, capturing the entire screen area; otherwise, the authentication fields may not align.
Each time the authentication widget is added and used, the correctness of the field positioning within Google should be checked. Since the Google authentication page is frequently updated, the display of the fields may change.
Ready backgrounds for login and password on the example of Google

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

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

Пример перехода в раздел настройки
Настройка виджета производится только после всех действий, указанных выше в статье.

Открыв виджет пользователь увидит области на экране, которые сможет перемещать.
Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.
В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):

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

Взаимодействие с подложками

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

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

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

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

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

Видеоинструкция

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

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

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