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

Материал из SmartPlayer
(Новая страница: «== '''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....»)
Нет описания правки
 
(не показано 12 промежуточных версий 2 участников)
Строка 1: Строка 1:
== '''Description of the situation:''' ==
== '''Situation Description''' ==
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.
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 an authorization logic similar to Google.|warn}}
{{Note|The widget is compatible with portals that have a Google-like authentication logic|warn}}
== '''Widget Workflow Logic:''' ==
== '''Widget Operating Logic''' ==
{{Note|The widget is designed for panels that use Full HD resolution (1920X1080) and supports all image formats (JPEG, PNG).|warn}}
{{Note|The widget is designed for use in panels that utilize Full HD resolution (1920X1080) and supports all "image" formats (JPEG, PNG)|warn}}
* To Prepare the Broadcast
* Prepare the broadcast
* The user navigates to the authorization page and copies the URL of the page.
* Copy the URL link from the required web page for authentication
* On the same page, the user expands the "Login" window to full screen by pressing "F11".
* Expand the login input window using the "F11" key and take a screenshot
* The user does the same for the "Password" window.
* Similarly, expand the password input window using the "F11" key and take a screenshot
* Screenshots are saved on the user's device.
* Log into the SmartPlayer personal account and create a folder in the "Content" section for the screenshots
* The user accesses the SmartPlayer personal cabinet.
* Launch the widget following the instructions and enter the necessary data
* Inside the personal cabinet, the user creates a folder for the screenshots and transfers them there.
* Authenticate using the widget and use the content from the site in your broadcast within SmartPlayer
* The user launches the widget according to the instructions and inputs the required data.
[[File:Логика.png|thumb|center| Widget operating logic|800px]]
* The user logs in using the widget and can continue to showcase the content.
{{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 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.'''
== '''Widget Setup''' ==
<div lang="ru" dir="ltr" class="mw-content-ltr">
The authentication widget is set up by the user upon entry. The Google authentication page will be used as an example.
== '''Настройка виджета''' ==
=== '''Obtaining the Widget''' ===
{{Note|Виджет авторизации настраивается самим пользователем при входе |warn}}
The user receives the widget in the form of an archive. This archive is integrated into the personal account. <br>
{{Note|В качестве примера будет использоваться страница авторизации в Google. |warn}}
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>
=== '''Получение виджета''' ===
After this, the widget will be stored within the user's personal account.
Пользователь получает виджет в виде архива.<br>
[[File:IG.png|thumb|center|Example of dragging the widget into the personal account|800px]]
Этот архив интегрируется  в личный кабинет. Его добавление происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит с помощью перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
=== '''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.
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|150px]]
=== '''Adding the Widget''' ===
</div>
Once the user has set up the broadcast, they need to add the widget.<br>
<div lang="ru" dir="ltr" class="mw-content-ltr">
* 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.
# В разделе «Трансляции» выбрать пункт «Создать»<br>
[[File:Добавление виджета в трансляцию.png|thumb|center|Finding the widget in the "Content" section|800px]]
# В появившемся окне задаем параметры страницы. Для этого в верхней части экрана нажимаем "шестерёнку" и  в появившемся меню указываем параметры «Ширина» и «Высота». Нажимаем сохранить. По умолчанию используется горизонтальная ориентация 1920Х1080.
[[File:Перенос виджета.png|thumb|center|Dragging the widget into the workspace|800px]]
# Выбираем зону трансляции нажав на специальный иконку и растягиваем ее на все поле.
=== '''Preparing the Background''' ===
[[File:Разрешение.png|thumb|center|Настройка разрешения |150px]]
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>
[[File:Подготовка экрана.png|thumb|center|Подготовка трансляции |150px]]
The next step is to enter the login and go to the password entry page, similarly taking a screenshot of the screen.<br>
=== '''Добавление виджета''' ===
Create a separate folder in the "Content" tab and add the created screenshots.<br>
[[File:Время 10400.png|thumb|right|Установка продолжительности трансляции|150px]]
{{Note|Screenshots should be taken in full-screen mode, capturing the entire screen area; otherwise, the authentication fields may not align.|warn}}
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br>
{{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}}
* Кликаем на рабочее поле и обращаем внимание на появившееся меню под названием "контент", в правой части экрана. Там представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
[[File:Log_and_pass.png|thumb|center|Ready backgrounds for login and password on the example of Google|800px]]
* В этом списке находится виджет. Выбираем его и перетаскиваем его в рабочее поле.<br>
== '''Working with the Widget''' ==
* Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
=== '''Widget Configuration''' ===
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |150px]]
[[File:Настраиваем виджет.png|thumb|center|Example of accessing the settings section|800px]]
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |150px]]
{{Note|The widget configuration is performed only after all the steps mentioned above in the article have been completed.|warn}}
</div>
When the user opens the widget, they will see areas on the screen that can be moved.<br>
<div lang="ru" dir="ltr" class="mw-content-ltr">
In the top right corner, the user needs to click on the "gear/settings" icon to open the widget settings window.<br>
=== '''Подготовка подложки''' ===
In the opened settings list, it is necessary to specify the following (all values are given in pixels "px"):
В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.<br>
* The address of the authentication page.
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
* Fill in the "Login Field Value" and "Password Field Value" fields.  Alternatively, you can fill in the data on the background screen.
[[File:Подложка логин и пароль.png|thumb|center|Готовые подложки для логина и пароля на примере Google|150px]]
* Scroll down the settings page and select the folder where the screenshots of the authentication page with the login and password are stored. Be sure to click the "Save" button and then the "Apply Settings" button.
</div>
* After saving the settings, the screenshots and their fields will be displayed, with the data specified in the settings indicated in the fields.
<div lang="ru" dir="ltr" class="mw-content-ltr">
* A background screenshot toggle will appear in the bottom left.
== '''Работа с виджетом''' ==
[[File:Нужные поля.png|thumb|center|Fields that must be filled in|800px]]
=== '''Настройка виджета''' ===
[[File:Применить настройки.png|thumb|center|Fields for selecting content sources and applying settings|800px]]
[[File:Настраиваем виджет.png|thumb|right|Пример перехода в раздел настройки|150px]]
=== '''Interaction with Backgrounds''' ===
[[File:Нужные поля.png|thumb|right|Поля которые обязательно надо заполнить |150px]]
The user selects the screenshot with the login. This screenshot is usually labeled as "Screenshot 1". In this screenshot, align the outlines of the "login" window and place it in the "login" field on the screenshot.<br>
[[File:Применить настройки.png|thumb|right|Поля выбора источников с контентом и применения настроек |150px]]
The next step is to align the "Next" button with the "Next" field.<br>
После всех подготовительных мероприятий необходимо перейти в настройки виджета.
Switch to the next screenshot, "Screenshot 2". The user also aligns the "password" field with the "password" field on the screenshot.<br>
В открывшемся окне можно увидеть области виджета, которые можно перемещать. Справа сверху нужно нажать на "Шестерёнку" и открыть окно настройки параметров виджета.
Click the "Next" button on the password screenshot and place "Authorize".<br>
В них мы указываем :
Then click the "Save" button.<br>
* Указываем адрес страницы авторизации в графе "Адрес страницы сервиса авторизации".  
The final step is for the user to name the broadcast, save it, and launch it on the device.
* Заполняем строку "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки
[[File:Окно.png|thumb|center|Background where fields are aligned and backgrounds are switched|800px]]
* Далее скролим в самый низ страницы настроек и выбираем папку, где хранятся скриншоты. Нажимаем «Сохранить» и «Применить настройки»<br>
=== '''Widget Appearance''' ===
* После у нас отобразились наши скриншоты и поля, в которых указаны данные прописанные в настройках виджета.<br>
The widget uses the screenshot area as the workspace. It consists of four blocks:
* Слева внизу появляется переключатель скриншотов подложки.
* Login - a rectangular area with data. The email is inserted into this line. Align it with the "login" area on the screenshot.
=== '''Манипуляции с подложками''' ===
* Password - a rectangular area with data. The password is inserted into this line. Align it with the "password" area on the screenshot.
Выбираем скриншот с логином, он обычно идёт как "Scrennshot 1"в нём совмещаем контуры окна "логин" и подставляем его в поле "логин".<br>
* Authorize - a rectangular area that clicks the button (clicker). Align it with the "authorize" button on the screenshot.
Кнопку  «далее» совмещаем с прямоугольником «next». <br>
* Next - a rectangular area that clicks the button (clicker). Align it with the "next" button on the screenshot.
Переходим на следующий скриншот "Scrennshot 2". Поле «пароль» совмещаем по контуру с окном «пароль».<br>
* Click - a rectangular area that allows for an additional click action anywhere on the widget.
На кнопку «далее» на скриншоте с паролем подставляем «Authorize».<br>
[[File:Кнопки_скринов.png|thumb|center|Example of the authorization widget areas|800px]]
Нажимаем кнопку «Сохранить».<br>
== '''Video Instruction''' ==
Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
== '''Final Outcome''' ==
[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|300px]]
Users of this functionality will be able to automatically authenticate on their website and use the content they need from their site.
</div>
<div lang="ru" dir="ltr" class="mw-content-ltr">
=== '''Внешний вид виджета''' ===
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
# Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
# Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
# Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.  
# Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
[[File:Настраиваемы области.png|thumb|center|Пример отображения областей виджета авторизации|300px]]
</div>
<div lang="ru" dir="ltr" class="mw-content-ltr">
== '''Итоговый результат''' ==
Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.
</div>

Текущая версия от 10:42, 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
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

Working with the Widget

Widget Configuration

Example of accessing the settings section
The widget configuration is performed only after all the steps mentioned above in the article have been completed.

When the user opens the widget, they will see areas on the screen that can be moved.
In the top right corner, the user needs to click on the "gear/settings" icon to open the widget settings window.
In the opened settings list, it is necessary to specify the following (all values are given in pixels "px"):

  • The address of the authentication page.
  • Fill in the "Login Field Value" and "Password Field Value" fields. Alternatively, you can fill in the data on the background screen.
  • Scroll down the settings page and select the folder where the screenshots of the authentication page with the login and password are stored. Be sure to click the "Save" button and then the "Apply Settings" button.
  • After saving the settings, the screenshots and their fields will be displayed, with the data specified in the settings indicated in the fields.
  • A background screenshot toggle will appear in the bottom left.
Fields that must be filled in
Fields for selecting content sources and applying settings

Interaction with Backgrounds

The user selects the screenshot with the login. This screenshot is usually labeled as "Screenshot 1". In this screenshot, align the outlines of the "login" window and place it in the "login" field on the screenshot.
The next step is to align the "Next" button with the "Next" field.
Switch to the next screenshot, "Screenshot 2". The user also aligns the "password" field with the "password" field on the screenshot.
Click the "Next" button on the password screenshot and place "Authorize".
Then click the "Save" button.
The final step is for the user to name the broadcast, save it, and launch it on the device.

Background where fields are aligned and backgrounds are switched

Widget Appearance

The widget uses the screenshot area as the workspace. It consists of four blocks:

  • Login - a rectangular area with data. The email is inserted into this line. Align it with the "login" area on the screenshot.
  • Password - a rectangular area with data. The password is inserted into this line. Align it with the "password" area on the screenshot.
  • Authorize - a rectangular area that clicks the button (clicker). Align it with the "authorize" button on the screenshot.
  • Next - a rectangular area that clicks the button (clicker). Align it with the "next" button on the screenshot.
  • Click - a rectangular area that allows for an additional click action anywhere on the widget.
Example of the authorization widget areas

Video Instruction

Final Outcome

Users of this functionality will be able to automatically authenticate on their website and use the content they need from their site.