Виджет авторизации/en

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.

Widget Setup:

The authorization widget is set up by the user upon login.

For example, the Google authorization page will be used.

Widget Acquisition:

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.
Following this, the widget will be stored inside your personal cabinet

An example of displaying the transfer of a widget to a personal account

Creating a Broadcast

1. Initially, navigate to the main panel.
2. In the "Broadcasts" section, select "Create".
   
3. 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.
4. Click on a special icon to select the broadcasting zone.

Resolution setting

Broadcast preparation

Adding a Widget:

Setting the broadcast duration

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

• 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.
• The widget can be found in this list.Drag and drop it into the working field.
  
• Under the "Content Settings" tab on the right side of the screen, set the duration to 10400 seconds.

Widget search and "Content" sectio

Moving a widget to the working area

Screenshot Creation

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

take a screenshot in full screen mode, highlighting the entire screen area, otherwise the authorization fields will not match.

Ready-made substrates for login and password on the example of Google

Working with the Widget

Widget Setup

Example of switching to the settings section

Fields that must be filled

Fields for selecting sources with content and applying settings

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.
• Scroll to the bottom of the settings page and select the folder where the screenshots are stored. Click "Save" and then "Apply Settings".
  
• The screenshots and the fields with the data specified in the widget settings will be displayed
  
• A switcher for the backdrop screenshots will appear in the bottom left.

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.
The “next” button is combined with the “next” rectangle.
Go to the next screenshot "Scrennshot 2". The "password" field is combined along the contour with the "password" window.
On the "next" button in the screenshot with the password, we substitute "Authorize".
Press the "Save" button.
Next, we give the name of our broadcast, save it and run it on the device.

Window where fields are compared and substrates are switched

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

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

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

Пример отображения областей виджета авторизации

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

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