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

Текущая версия от 11:27, 28 августа 2024

Другие языки:

English
русский

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

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

Виджет совместим с порталами имеющих логику авторизации аналогичную 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 достаточно часто обновляется и отображение полей для заполнения может меняться.

Готовые подложки для логина и пароля на примере Google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа виджета авторизации

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

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

@@ Строка 1: / Строка 1: @@
+<languages/>
+<translate>
+<!--T:9-->
 == '''Описание ситуации''' ==
-Пользователям периодически необходимо загрузить контент со своего сайта. Для получения контента им чаще всего нужно пройти процесс авторизацию. Чтобы не проходит аутентификации в ручном режиме и полностью автоматизировать процесс был создан виджета авторизации.
+Пользователь может захотеть использовать контент со своего сайта в качестве контента для трансляции. Чтобы получить данный контент в трансляцию, ему скорее всего придется пройти процесс авторизации на своём сайте. Чтобы не проходит авторизацию в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
 {{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}}
 == '''Логика работы виджета''' ==
-{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы картинок (JPEG,PNG)|warn}}
+{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы "рисунков"(JPEG,PNG)|warn}}
 * Подготовить трансляцию
-* Пользователь заходит на страницу авторизации и копирует URL страницы
+* Скопировать URL ссылку с нужной интернет страницы авторизации
-* В этой же странице разворачивает окно "Логин" на полный экран, нажав "F11".
+* Развернуть с помощью клавиши "F11" окно ввода логина и сделать скриншот
-* Тоже самое делает с окном "Пароль"
+* Также развернуть с помощью клавиши "F11" окно ввода пароля  и сделать скриншот
-* Сохраняет скриншоты на своём устройстве
+* Зайти в личный кабинет SmartPlayer и создать папку в разделе "Контент" для сделанных скриншотов
-* Заходит в личный кабинет SmartPlayer
+* Запустить виджет по инструкции и занести в него нужные данные
-* Создаёт папку для скриншотов внутри личного кабинета и переносит их в нее
+* Авторизироваться с помощью виджета и использовать контент с сайта в своей трансляции внутри SmartPlayer
-* Запускает виджет по инструкции и заносит в него нужные данные
+[[File:Логика.png|thumb|center | Логика работы виджета|800px]]
-* Авторизуется с помощью виджета и может продолжать демонстрировать контент
+{{Note| Если пользователь использует в качестве устройства ноутбук, то после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".|warn}}
-'''Важно: Если пользователь использует в качестве устройства ноутбук и после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".'''
+</translate>
+<translate>
+<!--T:10-->
 == '''Настройка виджета''' ==
-{{Note|Виджет авторизации настраивается самим пользователем при входе |warn}}
+Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google.
 === '''Получение виджета''' ===
-Виджет можно получить в виде архива. Этот архив интегрируется  в личный кабинет.<br>
+Пользователь получает виджет в виде архива. Данный архив интегрируется  в личный кабинет. <br>
-Его добавление происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит с помощью перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
+Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
-После этого виджет будет хранится внутри вашего личного кабинета
+После этого виджет будет хранится внутри личного кабинета пользователя.
+[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|800px]]
 === '''Создание трансляции''' ===
-# Первоначально нужно перейти в главную панель навигации
+Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице [[Раздел "Трансляции"]]
-# В разделе «Трансляции» выбрать пункт «Создать»<br>
-# В появившемся окне задаем параметры страницы. Для этого в верхней части экрана нажимаем  , в появившемся меню указываем параметры «Ширина» и «Высота». Нажимаем сохранить. По умолчанию используется горизонтальная ориентация 1920Х1080.
-# Выбираем зону трансляции и растягиваем ее на все поле.
 === '''Добавление виджета''' ===
-Кликаем на рабочем поле обращаем внимание на появившееся меню под названием "контент", в правой части экрана  нам представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.<br>
+После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br>
-Выбираем нужный виджет и перетаскиваем его в рабочее поле. Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
+* Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
+* В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
+* Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
+[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |800px]]
+[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |800px]]
 === '''Подготовка подложки''' ===
-В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.<br>
+В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать  скриншот развернутого экрана.<br>
-{{Note|Необходимо делать скриншот в полноэкранном режиме, иначе поля авторизации не совпадут.|warn}}
+Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.<br>
+Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.<br>
+{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
+{{Note|Для корректного использования виджета авторизации на Google необходимо использовать
+[[https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fdrive.google.com%2Fdrive%2Fmy-drive%3Fhl%3Dru&followup=https%3A%2F%2Fdrive.google.com%2Fdrive%2Fmy-drive%3Fhl%3Dru&hl=ru&ifkv=Ab5oB3q8uZ_jhyDfBKTE6cyyfrkPNqC8kuGcWpoZX_VMkVPIg2m3xl6i4HgGEOWV_0ldeXGlsBcqeQ&osid=1&passive=1209600&service=wise&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S1631218956%3A1724829858479642&ddm=0 ссылку]].|warn}}
+{{Note|При каждом добавлении виджета авторизации и его использовании необходимо сверять правильность расположения полей внутри Google. Так как страница авторизации Google достаточно часто обновляется и отображение полей для заполнения может меняться.|warn}}
+[[File:Log_and_pass.png|thumb|center|Готовые подложки для логина и пароля на примере Google|800px]]
+</translate>
+<translate>
 == '''Работа с виджетом''' ==
 === '''Настройка виджета''' ===
-В качестве примера будет использоваться страница авторизации в Google.<br>
+[[File:Настраиваем виджет.png|thumb|center|Пример перехода в раздел настройки|800px]]
-Указываем адрес страницы (URL) сервиса авторизации Google. Скролим в самый низ страницы настроек и выбираем папку, где хранятся скриншоты. Нажимаем «Сохранить» и «Применить настройки»<br>
+{{Note|Настройка виджета производится только после всех действий, указанных выше в статье.|warn}}
-После у нас отобразились наши скриншоты и поля, которые необходимо подставить.<br>
+Открыв виджет пользователь увидит области на экране, которые сможет перемещать.<br>
-Первым делом заполняем данные на полях логина и пароля. По умолчанию поля находятся в верхнем левом углу<br>
+Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.<br>
-В дальнейшем эти данные будут подставлены в соответствующие поля.<br>
+В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):
-Выбираем скриншот с логином и в нём совмещаем контуры окна логин подставляем поле логин. Очень важно правильно совместить контуры окна логина скриншота с окном "логина" виджета. Кнопку  «далее» совмещаем с прямоугольником «next». <br>
+* Адрес страницы авторизации.
-Переходим на следующий скриншот. В поле «пароль», подставляем поле «пароль».<br>
+* Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки.
-На кнопку «далее» на скриншоте с паролем подставляем «Authorize».<br>
+* Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки".
-Нажимаем кнопку «Сохранить».<br>
+* После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках.
-Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
+* Внизу слева появится переключатель скриншотов подложки.
+[[File:Нужные поля.png|thumb|center|Поля которые обязательно надо заполнить |800px]]
+[[File:Применить настройки.png|thumb|center|Поля выбора источников с контентом и применения настроек |800px]]
+</translate>
+<translate>
+<!--T:12-->
+=== '''Взаимодействие с подложками''' ===
+Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.<br>
+Следующим шагом совмещаем кнопку "Далее" с полем "Next". <br>
+Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.<br>
+Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».<br>
+Далее нажимает на кнопку «Сохранить».<br>
+Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве.
+[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|800px]]
 === '''Внешний вид виджета''' ===
-Виджет состоит из четырёх блоков:
+Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
-[[File:Настраиваемы области.png|thumb|Пример отображения областей виджета авторизации|300px]]
 # Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
 # Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
 # Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.
 # Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
+# Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.
+[[File:Кнопки_скринов.png|thumb|center|Пример отображения областей виджета авторизации|800px]]
+== '''Видеоинструкция''' ==
+[https://www.youtube.com/watch?v=c68dt49t6bQ Работа виджета авторизации]
 == '''Итоговый результат''' ==
-Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.
+Пользователь данной функциональности сможет автоматически проходит авторизацию на своем сайте и использовать нужный ему контент со своего сайта.
+</translate>

Аноним

Поиск

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

Пространства имён

Ещё

Действия на странице

Текущая версия от 11:27, 28 августа 2024

Содержание

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

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