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

Материал из SmartPlayer
(Новая страница: «== '''Final result''' == Using the widget will allow the user to keep his data confidential and at the same time he will be able to use the autologin system.»)
(Обновление для соответствия новой версии исходной страницы.)
Строка 1: Строка 1:
== '''Description of the situation:''' ==
<div lang="ru" dir="ltr" class="mw-content-ltr">
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}}
Пользователь может захотеть использовать контент со своего сайта в качестве контента для трансляции. Чтобы получить данный контент в трансляцию, ему скорее всего придется пройти процесс авторизации на своём сайте. Чтобы не проходит авторизацию в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
== '''Widget Workflow Logic:''' ==
{{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}}
{{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
{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы "рисунков"(JPEG,PNG)|warn}}
* 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".
* Скопировать URL ссылку с нужной интернет страницы авторизации
* The user does the same for the "Password" window.
* Развернуть с помощью клавиши "F11" окно ввода логина и сделать скриншот
* Screenshots are saved on the user's device.
* Также развернуть с помощью клавиши "F11" окно ввода пароля  и сделать скриншот
* 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.
* Авторизироваться с помощью виджета и использовать контент с сайта в своей трансляции внутри SmartPlayer
* The user logs in using the widget and can continue to showcase the content.
[[File:Логика.png|thumb|center | Логика работы виджета|800px]]
'''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.'''
{{Note| Если пользователь использует в качестве устройства ноутбук, то после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".|warn}}
== '''Widget Setup:''' ==
</div>
{{Note|The authorization widget is set up by the user upon login. |warn}}
<div lang="ru" dir="ltr" class="mw-content-ltr">
{{Note|For example, the Google authorization page will be used. |warn}}
== '''Настройка виджета''' ==
=== '''Widget Acquisition:''' ===
Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google.  
This archive is integrated into the personal cabinet. It can be added under the "Content" section, within the "Widgets" tab.
=== '''Получение виджета''' ===
Integration takes place by dragging and dropping the archive from the repository where it's stored into the personal cabinet window.
Пользователь получает виджет в виде архива. Данный архив интегрируется  в личный кабинет. <br>
<br>
Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
Following this, the widget will be stored inside your personal cabinet
После этого виджет будет хранится внутри личного кабинета пользователя.
[[File:IG.png|thumb|center|An example of displaying the transfer of a widget to a personal account|150px]]
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|800px]]
=== '''Creating a Broadcast''' ===
=== '''Создание трансляции''' ===
# Initially, navigate to the main panel.
Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице [[Раздел "Трансляции"]]
# In the "Broadcasts" section, select "Create".<br>
=== '''Добавление виджета''' ===
# In the newly opened window, go to the top of the screen and click on the "gear" icon. In the dropdown menu, set the parameters for "Width" and "Height". Click save. By default, the orientation is set to horizontal at 1920x1080.
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br>
# Click on a special icon to select the broadcasting zone.
* Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
[[File:Разрешение.png|thumb|center| Resolution setting |150px]]
* В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
[[File:Подготовка экрана.png|thumb|center| Broadcast preparation |150px]]
* Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
=== '''Adding a Widget:''' ===
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |800px]]
[[File:Время 10400.png|thumb|right|Setting the broadcast duration|150px]]
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |800px]]
After the user has set up the broadcast, they need to add a widget..<br>
=== '''Подготовка подложки''' ===
* Click on the working field and a menu named "content" appears on the right side of the screen. This menu displays several folders with sorted content and a main folder containing all content uploaded to the system.
В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать  скриншот развернутого экрана.<br>
* The widget can be found in this list.Drag and drop it into the working field.<br>
Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.<br>
* Under the "Content Settings" tab on the right side of the screen, set the duration to 10400 seconds.
Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.<br>
[[File:Добавление виджета в трансляцию.png|thumb|center|Widget search and "Content" sectio |150px]]
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
[[File:Перенос виджета.png|thumb|center| Moving a widget to the working area |150px]]
{{Note|При каждом добавлении виджета авторизации и его использовании необходимо сверять правильность расположения полей внутри Google. Так как страница авторизации Google достаточно часто обновляется и отображение полей для заполнения может меняться.|warn}}
=== '''Screenshot Creation''' ===
[[File:Log_and_pass.png|thumb|center|Готовые подложки для логина и пароля на примере Google|800px]]
 
</div>
In the browser, open the Google authorization page, turn on full-screen mode (F11 by default) and take a full screenshot. Next, enter the login and go to the page with the password, similarly take a screenshot of the screen. Create a separate folder in the "Content" tab and add the screenshots taken there <br>
<div lang="ru" dir="ltr" class="mw-content-ltr">
{{Note|take a screenshot in full screen mode, highlighting the entire screen area, otherwise the authorization fields will not match.|warn}}
== '''Работа с виджетом''' ==
[[File:Подложка логин и пароль.png|thumb|center|Ready-made substrates for login and password on the example of Google|150px]]
=== '''Настройка виджета''' ===
== '''Working with the Widget''' ==
[[File:Настраиваем виджет.png|thumb|center|Пример перехода в раздел настройки|800px]]
=== '''Widget Setup''' ===
{{Note|Настройка виджета производится только после всех действий, указанных выше в статье.|warn}}
[[File:Настраиваем виджет.png|thumb|right|Example of switching to the settings section|150px]]
Открыв виджет пользователь увидит области на экране, которые сможет перемещать.<br>
[[File:Нужные поля.png|thumb|right|Fields that must be filled|150px]]
Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.<br>
[[File:Применить настройки.png|thumb|right|
В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):
Fields for selecting sources with content and applying settings |150px]]
* Адрес страницы авторизации.
After completing all the preparatory steps, proceed to the widget settings.
* Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки.
In the newly opened window, you will see areas of the widget that can be moved around. Click on the "gear" icon in the upper right corner to open the widget parameters window.
* Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки".
Entering Details:
* После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках.
* Fill in the service's authorization page address in the "Authorization Service Page Address" section..
* Внизу слева появится переключатель скриншотов подложки.
* Fill in the "Login Field Value" and "Password Field Value" sections. An alternative option is to fill in the data on the backdrop window.
[[File:Нужные поля.png|thumb|center|Поля которые обязательно надо заполнить |800px]]
* Scroll to the bottom of the settings page and select the folder where the screenshots are stored. Click "Save" and then "Apply Settings".<br>
[[File:Применить настройки.png|thumb|center|Поля выбора источников с контентом и применения настроек |800px]]
* The screenshots and the fields with the data specified in the widget settings will be displayed <br>
</div>
* A switcher for the backdrop screenshots will appear in the bottom left.
<div lang="ru" dir="ltr" class="mw-content-ltr">
=== '''Manipulating the Backdrops:''' ===
=== '''Взаимодействие с подложками''' ===
We select a screenshot with a login, it usually goes like "Scrennshot 1" in it we combine the contours of the "login" window and substitute it in the "login" field.<br>
Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.<br>
The “next” button is combined with the “next” rectangle. <br>
Следующим шагом совмещаем кнопку "Далее" с полем "Next". <br>
Go to the next screenshot "Scrennshot 2". The "password" field is combined along the contour with the "password" window.<br>
Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.<br>
On the "next" button in the screenshot with the password, we substitute "Authorize".<br>
Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».<br>
Press the "Save" button.<br>
Далее нажимает на кнопку «Сохранить».<br>
Next, we give the name of our broadcast, save it and run it on the device.
Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве.
[[File:Окно.png|thumb|center|Window where fields are compared and substrates are switched|300px]]
[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|800px]]
=== '''Widget Appearance''' ===
=== '''Внешний вид виджета''' ===
The widget uses the screenshot area as the home screen. It consists of four blocks:
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
# Login - a rectangular area with data. Email is inserted into this line. Combine with the "login" area in the screenshot
# Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
# The password is a rectangular area with data. This line contains the password. Align with the "password" area in the screenshot.
# Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
# Authorize - a rectangular area that produces a button click (clicker). We combine with the "authorization" button in the screenshot.  
# Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.  
# Next - a rectangular area that produces a button click (clicker). Combine with the "next" button in the screenshot
# Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
[[File:Настраиваемы области.png|thumb|center|
# Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.
An example of displaying authorization widget areas|300px]]
[[File:Кнопки_скринов.png|thumb|center|Пример отображения областей виджета авторизации|800px]]
== '''Final result''' ==
== '''Видеоинструкция''' ==
Using the widget will allow the user to keep his data confidential and at the same time he will be able to use the autologin system.
== '''Итоговый результат''' ==
Пользователь данной функциональности сможет автоматически проходит авторизацию на своем сайте и использовать нужный ему контент со своего сайта.
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.
При каждом добавлении виджета авторизации и его использовании необходимо сверять правильность расположения полей внутри Google. Так как страница авторизации Google достаточно часто обновляется и отображение полей для заполнения может меняться.
Готовые подложки для логина и пароля на примере 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=12351