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

Текущая версия от 10:15, 6 декабря 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 - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.

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

Актуальное состояние виджета на 10.2024

Виджет получил ряд доработок, которые исправили некоторые сложные в управлении моменты и улучшили его работу в целом. К списку этих доработок можно отнести:

Улучшено проигрывание нескольких виджетов в рамках одной трансляции. Данная доработка была связана с появлением ошибки, которая периодически появлялась при цикличном проигрывании нескольких виджетов. В данном случае было добавлена функциональность запоминания логина и пароля
При изменении контента в процессе авторизации или после авторизации - виджет автоматически обновляет страницу
Виджет теперь "регистрирует" ввод логина и пароля - единожды, при первом входе
Виджет получил возможность работать на устройствах с разным разрешением и ориентацией
Проработана возможность использовать виджет на 4К экранах и на экранах нестандартной формы. В данном случае если у пользователя контент Full HD, а на устройстве используется другое разрешение (например 4К), то пользователю нужно создать контент ссылки и запустить его на нужном устройстве. Далее на нужном устройстве снять с него скриншот и выкачать данный скриншот, впоследствии подложив его на стрницу виджета авторизации.
Появилась возможность активировать десктопную вариант виджета с помощью чекбокса/галочка в настройках виджета. Если включить десктопную версию, то устройство под управлением Android OS(работает только на этой ОС) масштабирует отображение под десктопную версию.
Добавлена возможность скейла (масштабирования) разрешения виджета в зависимости от параметров воспроизведения.
Добавили функциональную кнопку "Далее/Next" в окне виджета, которая позволит пользователю сделать еще один "шаг" действия. Данное поле позволит пользователю нажимать на промежуточные кликабельные элементы на странице авторизации, которые содержат неучтенные шаги.

Например при авторизации в Google mail может появиться дополнительное окно с действием подтверждение номера телефона. Выбрав кнопку "Далее/Next" и седлав ее нужного размера с кнопкой "Продолжить" можно пройти этот промежуточный шаг со стороны авторизации в Google.

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

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

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

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

@@ Строка 1: / Строка 1: @@
 <languages/>
 <translate>
-<!--T:1-->
+<!--T:9-->
 == '''Описание ситуации''' ==
-Пользователям периодически необходимо загрузить контент со своего сайта. Для получения контента им чаще всего нужно пройти процесс авторизацию. Чтобы не проходит аутентификации в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
+Пользователь может захотеть использовать контент со своего сайта в качестве контента для трансляции. Чтобы получить данный контент в трансляцию, ему скорее всего придется пройти процесс авторизации на своём сайте. Чтобы не проходит авторизацию в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
 {{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}}
-</translate>
-<translate>
-<!--T:2-->
 == '''Логика работы виджета''' ==
-[[File:Логика.png|thumb|right | Логика работы виджета|150px]]
+{{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.
-{{Note|В качестве примера будет использоваться страница авторизации в Google. |warn}}
 === '''Получение виджета''' ===
-Пользователь получает виджет в виде архива.<br>
+Пользователь получает виджет в виде архива. Данный архив интегрируется  в личный кабинет. <br>
-Этот архив интегрируется  в личный кабинет. Его добавление происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит с помощью перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
+Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br>
-После этого виджет будет хранится внутри вашего личного кабинета
+После этого виджет будет хранится внутри личного кабинета пользователя.
-[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|150px]]
+[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|800px]]
-</translate>
-<translate>
-<!--T:4-->
 === '''Создание трансляции''' ===
-# Первоначально нужно перейти в главную панель навигации
+Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице [[Раздел "Трансляции"]]
-# В разделе «Трансляции» выбрать пункт «Создать»<br>
-# В появившемся окне задаем параметры страницы. Для этого в верхней части экрана нажимаем "шестерёнку" и  в появившемся меню указываем параметры «Ширина» и «Высота». Нажимаем сохранить. По умолчанию используется горизонтальная ориентация 1920Х1080.
-# Выбираем зону трансляции нажав на специальный иконку и растягиваем ее на все поле.
-[[File:Разрешение.png|thumb|center|Настройка разрешения |150px]]
-[[File:Подготовка экрана.png|thumb|center|Подготовка трансляции |150px]]
 === '''Добавление виджета''' ===
-[[File:Время 10400.png|thumb|right|Установка продолжительности трансляции|150px]]
 После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br>
-* Кликаем на рабочее поле и обращаем внимание на появившееся меню под названием "контент", в правой части экрана. Там представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
+* Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
-* В этом списке находится виджет. Выбираем его и перетаскиваем его в рабочее поле.<br>
+* В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
 * Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
-[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |150px]]
+[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |800px]]
-[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |150px]]
+[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |800px]]
-</translate>
-<translate>
-<!--T:5-->
 === '''Подготовка подложки''' ===
-В браузере открываем страницу авторизации Google, включаем полноэкранный режим (по умолчанию F11) и делаем полный скриншот. Далее вводим логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана. Создаем отдельную папку во вкладке «Контент» и добавляем туда сделанные скриншоты.<br>
+В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать  скриншот развернутого экрана.<br>
+Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.<br>
+Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.<br>
 {{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}}
-[[File:Подложка логин и пароль.png|thumb|center|Готовые подложки для логина и пароля на примере Google|150px]]
+{{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>
-<!--T:6-->
 == '''Работа с виджетом''' ==
 === '''Настройка виджета''' ===
-[[File:Настраиваем виджет.png|thumb|right|Пример перехода в раздел настройки|150px]]
+[[File:Настраиваем виджет.png|thumb|center|Пример перехода в раздел настройки|800px]]
-[[File:Нужные поля.png|thumb|right|Поля которые обязательно надо заполнить |150px]]
+{{Note|Настройка виджета производится только после всех действий, указанных выше в статье.|warn}}
-[[File:Применить настройки.png|thumb|right|Поля выбора источников с контентом и применения настроек |150px]]
+Открыв виджет пользователь увидит области на экране, которые сможет перемещать.<br>
-После всех подготовительных мероприятий необходимо перейти в настройки виджета.
+Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.<br>
-В открывшемся окне можно увидеть области виджета, которые можно перемещать. Справа сверху нужно нажать на "Шестерёнку" и открыть окно настройки параметров виджета.
+В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):
-В них мы указываем :
+* Адрес страницы авторизации.
-* Указываем адрес страницы авторизации в графе "Адрес страницы сервиса авторизации".
+* Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки.
-* Заполняем строку "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки
+* Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки".
-* Далее скролим в самый низ страницы настроек и выбираем папку, где хранятся скриншоты. Нажимаем «Сохранить» и «Применить настройки»<br>
+* После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках.
-* После у нас отобразились наши скриншоты и поля, в которых указаны данные прописанные в настройках виджета.<br>
+* Внизу слева появится переключатель скриншотов подложки.
-* Слева внизу появляется переключатель скриншотов подложки.
+[[File:Нужные поля.png|thumb|center|Поля которые обязательно надо заполнить |800px]]
-=== '''Манипуляции с подложками''' ===
+[[File:Применить настройки.png|thumb|center|Поля выбора источников с контентом и применения настроек |800px]]
-Выбираем скриншот с логином, он обычно идёт как "Scrennshot 1"в нём совмещаем контуры окна "логин" и подставляем его в поле "логин".<br>
-Кнопку  «далее» совмещаем с прямоугольником «next». <br>
-Переходим на следующий скриншот "Scrennshot 2". Поле «пароль» совмещаем по контуру с окном «пароль».<br>
-На кнопку «далее» на скриншоте с паролем подставляем «Authorize».<br>
-Нажимаем кнопку «Сохранить».<br>
-Далее даем название нашей трансляции, сохраняем ее и запускаем на устройстве.
-[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|300px]]
 </translate>
 <translate>
-<!--T:7-->
+<!--T:12-->
+=== '''Взаимодействие с подложками''' ===
+Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.<br>
+Следующим шагом совмещаем кнопку "Далее" с полем "Next". <br>
+Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.<br>
+Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».<br>
+Далее нажимает на кнопку «Сохранить».<br>
+Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве.
+[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|800px]]
 === '''Внешний вид виджета''' ===
 Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
@@ Строка 90: / Строка 78: @@
 # Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.
 # Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
-[[File:Настраиваемы области.png|thumb|center|Пример отображения областей виджета авторизации|300px]]
+# Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.
-</translate>
+[[File:Кнопки_скринов.png|thumb|center|Пример отображения областей виджета авторизации|800px]]
-<translate>
+== '''Актуальное состояние виджета на 10.2024''' ==
-<!--T:8-->
+Виджет получил ряд доработок, которые исправили некоторые сложные в управлении моменты и улучшили его работу в целом. К списку этих доработок можно отнести:
+* Улучшено проигрывание нескольких виджетов в рамках одной трансляции. Данная доработка была связана с появлением ошибки, которая периодически появлялась при цикличном проигрывании нескольких виджетов. В данном случае было добавлена функциональность запоминания логина и пароля
+* При изменении контента в процессе авторизации или после авторизации - виджет автоматически обновляет страницу
+* Виджет теперь "регистрирует" ввод логина и пароля - единожды, при первом входе
+* Виджет получил возможность работать на устройствах с разным разрешением и ориентацией
+* Проработана возможность использовать виджет на 4К экранах и на экранах нестандартной формы. В данном случае если у пользователя контент Full HD, а на устройстве используется другое разрешение (например 4К), то пользователю нужно создать контент ссылки и запустить его на нужном устройстве. Далее на нужном устройстве снять с него скриншот и выкачать данный скриншот, впоследствии подложив его на стрницу виджета авторизации.
+* Появилась возможность активировать десктопную вариант виджета с помощью чекбокса/галочка в настройках виджета. Если включить десктопную версию, то устройство под управлением Android OS(работает только на этой ОС) масштабирует отображение под десктопную версию.
+* Добавлена возможность скейла (масштабирования) разрешения виджета в зависимости от параметров воспроизведения.
+* Добавили функциональную кнопку "Далее/Next" в окне виджета, которая позволит пользователю сделать еще один "шаг" действия. Данное поле позволит пользователю нажимать на промежуточные кликабельные элементы на странице авторизации, которые содержат неучтенные шаги.
+[[File:Кнопки_скринов.png|thumb|center|Пример отображения кнопки "Далее/Next"|800px]]
+Например при авторизации в Google mail может появиться дополнительное окно с действием подтверждение номера телефона. Выбрав кнопку "Далее/Next" и седлав ее нужного размера с кнопкой "Продолжить" можно пройти этот промежуточный шаг со стороны авторизации в Google.
+== '''Видеоинструкция''' ==
+[https://www.youtube.com/watch?v=c68dt49t6bQ Работа виджета авторизации]
 == '''Итоговый результат''' ==
-Использование виджета позволит сохранить пользователю конфиденциальность своих данных и при этом он сможет использовать систему автологинизации.
+Пользователь данной функциональности сможет автоматически проходит авторизацию на своем сайте и использовать нужный ему контент со своего сайта.
 </translate>

Аноним

Поиск

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

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

Ещё

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

Текущая версия от 10:15, 6 декабря 2024

Содержание

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

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