Виджет авторизации: различия между версиями
(Отметить эту версию для перевода) |
|||
(не показано 29 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
<languages/> | |||
<translate> | <translate> | ||
<!--T: | <!--T:9--> | ||
== '''Описание ситуации''' == | == '''Описание ситуации''' == | ||
Пользователь может захотеть использовать контент со своего сайта в качестве контента для трансляции. Чтобы получить данный контент в трансляцию, ему скорее всего придется пройти процесс авторизации на своём сайте. Чтобы не проходит авторизацию в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации. | |||
{{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}} | {{Note|Виджет совместим с порталами имеющих логику авторизации аналогичную Google|warn}} | ||
== '''Логика работы виджета''' == | == '''Логика работы виджета''' == | ||
{{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы | {{Note|Виджет разработан для работы в панелях использующих разрешение Full HD (1920X1080) и поддерживает все форматы "рисунков"(JPEG,PNG)|warn}} | ||
* Подготовить трансляцию | * Подготовить трансляцию | ||
* | * Скопировать URL ссылку с нужной интернет страницы авторизации | ||
* | * Развернуть с помощью клавиши "F11" окно ввода логина и сделать скриншот | ||
* | * Также развернуть с помощью клавиши "F11" окно ввода пароля и сделать скриншот | ||
* | * Зайти в личный кабинет SmartPlayer и создать папку в разделе "Контент" для сделанных скриншотов | ||
* Запустить виджет по инструкции и занести в него нужные данные | |||
* Авторизироваться с помощью виджета и использовать контент с сайта в своей трансляции внутри SmartPlayer | |||
* | [[File:Логика.png|thumb|center | Логика работы виджета|800px]] | ||
* | {{Note| Если пользователь использует в качестве устройства ноутбук, то после нажатия "F 11" может не произойти никаких действий. Это связано с тем что в операционной системе у него "по умолчанию" стоит включено - "использование панели Function". В таком случае, чтобы развернуть страницу браузера необходимо нажать клавиши "Fn + F 11".|warn}} | ||
</translate> | </translate> | ||
<translate> | <translate> | ||
<!--T: | <!--T:10--> | ||
== '''Настройка виджета''' == | == '''Настройка виджета''' == | ||
Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google. | |||
=== '''Получение виджета''' === | === '''Получение виджета''' === | ||
Пользователь получает виджет в виде архива. | Пользователь получает виджет в виде архива. Данный архив интегрируется в личный кабинет. <br> | ||
Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.<br> | |||
После этого виджет будет хранится внутри | После этого виджет будет хранится внутри личного кабинета пользователя. | ||
[[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет| | [[File:IG.png|thumb|center|Пример отображения переноса виджета в личный кабинет|800px]] | ||
=== '''Создание трансляции''' === | === '''Создание трансляции''' === | ||
Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице [[Раздел "Трансляции"]] | |||
[[ | |||
=== '''Добавление виджета''' === | === '''Добавление виджета''' === | ||
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br> | После того как пользователь настроил трансляцию, ему необходимо добавить виджет.<br> | ||
* | * Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом. | ||
* В | * В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону. | ||
* Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек | * Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек | ||
[[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" | | [[File:Добавление виджета в трансляцию.png|thumb|center|Поиск виджета и разделе "Контент" |800px]] | ||
[[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону | | [[File:Перенос виджета.png|thumb|center|Перенос виджета в рабочую зону |800px]] | ||
=== '''Подготовка подложки''' === | === '''Подготовка подложки''' === | ||
В браузере | В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать скриншот развернутого экрана.<br> | ||
Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.<br> | |||
Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.<br> | |||
{{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}} | {{Note|Необходимо делать скриншот в полноэкранном режиме выделяя всю область экрана, иначе поля авторизации не совпадут.|warn}} | ||
[[File: | {{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> | ||
<translate> | <translate> | ||
== '''Работа с виджетом''' == | == '''Работа с виджетом''' == | ||
=== '''Настройка виджета''' === | === '''Настройка виджета''' === | ||
[[File:Настраиваем виджет.png|thumb| | [[File:Настраиваем виджет.png|thumb|center|Пример перехода в раздел настройки|800px]] | ||
{{Note|Настройка виджета производится только после всех действий, указанных выше в статье.|warn}} | |||
Открыв виджет пользователь увидит области на экране, которые сможет перемещать.<br> | |||
Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.<br> | |||
В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"): | |||
В | * Адрес страницы авторизации. | ||
* | * Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки. | ||
* | * Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки". | ||
* | * После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках. | ||
* После | * Внизу слева появится переключатель скриншотов подложки. | ||
* | [[File:Нужные поля.png|thumb|center|Поля которые обязательно надо заполнить |800px]] | ||
[[File:Применить настройки.png|thumb|center|Поля выбора источников с контентом и применения настроек |800px]] | |||
[[File: | |||
</translate> | </translate> | ||
<translate> | <translate> | ||
<!--T: | <!--T:12--> | ||
=== '''Взаимодействие с подложками''' === | |||
Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.<br> | |||
Следующим шагом совмещаем кнопку "Далее" с полем "Next". <br> | |||
Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.<br> | |||
Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».<br> | |||
Далее нажимает на кнопку «Сохранить».<br> | |||
Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве. | |||
[[File:Окно.png|thumb|center|Подложка где сопоставляют поля и переключают подложки|800px]] | |||
=== '''Внешний вид виджета''' === | === '''Внешний вид виджета''' === | ||
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков: | Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков: | ||
Строка 88: | Строка 78: | ||
# Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте. | # Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте. | ||
# Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте | # Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте | ||
[[File: | # Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета. | ||
[[File:Кнопки_скринов.png|thumb|center|Пример отображения областей виджета авторизации|800px]] | |||
== '''Видеоинструкция''' == | |||
[https://www.youtube.com/watch?v=c68dt49t6bQ Работа виджета авторизации] | |||
== '''Итоговый результат''' == | == '''Итоговый результат''' == | ||
Пользователь данной функциональности сможет автоматически проходит авторизацию на своем сайте и использовать нужный ему контент со своего сайта. | |||
</translate> | </translate> |
Текущая версия от 11:27, 28 августа 2024
Описание ситуации
Пользователь может захотеть использовать контент со своего сайта в качестве контента для трансляции. Чтобы получить данный контент в трансляцию, ему скорее всего придется пройти процесс авторизации на своём сайте. Чтобы не проходит авторизацию в ручном режиме и полностью автоматизировать процесс был создан виджет авторизации.
Логика работы виджета
- Подготовить трансляцию
- Скопировать URL ссылку с нужной интернет страницы авторизации
- Развернуть с помощью клавиши "F11" окно ввода логина и сделать скриншот
- Также развернуть с помощью клавиши "F11" окно ввода пароля и сделать скриншот
- Зайти в личный кабинет SmartPlayer и создать папку в разделе "Контент" для сделанных скриншотов
- Запустить виджет по инструкции и занести в него нужные данные
- Авторизироваться с помощью виджета и использовать контент с сайта в своей трансляции внутри SmartPlayer
![](/images/5/52/%D0%9B%D0%BE%D0%B3%D0%B8%D0%BA%D0%B0.png)
Настройка виджета
Виджет авторизации настраивается самим пользователем при входе. В качестве примера будет использоваться страница авторизации в Google.
Получение виджета
Пользователь получает виджет в виде архива. Данный архив интегрируется в личный кабинет.
Добавление архива с виджетом происходит в разделе "Контент" во вкладке "Виджеты". Встраивание происходит при помощи перетаскивания архива из репозитория где он хранится в окно личного кабинета.
После этого виджет будет хранится внутри личного кабинета пользователя.
![](/images/0/0c/IG.png)
Создание трансляции
Перед использованием виджета пользователю необходимо создать трансляцию, в которую он поместит виджет. Подробную информацию о создании трансляции можно найти на странице Раздел "Трансляции"
Добавление виджета
После того как пользователь настроил трансляцию, ему необходимо добавить виджет.
- Пользователь кликает на рабочее поле и находит строку "контент", в правой части экрана. В этой строке представлены несколько папок с отсортированным контентом и главная папка со всем загруженным в систему контентом.
- В списке необходимо выбрать нужный виджет. С помощью drag-n-drop (перетягивания) переносим его в рабочую зону.
- Во вкладке «Настройка контента» в правой части экрана, указываем продолжительность 10400сек
![](/images/0/06/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0_%D0%B2_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%8F%D1%86%D0%B8%D1%8E.png)
![](/images/2/2d/%D0%9F%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0.png)
Подготовка подложки
В браузере необходимо открыть страницу авторизации "Google" и включить полноэкранный режим (по умолчанию F11). Далее необходимо сделать скриншот развернутого экрана.
Следующим шагом вводится логин и переходим на страницу с вводом пароля, аналогично делаем скриншот экрана.
Создается отдельная папка во вкладке «Контент» и добавляются созданные скриншоты.
![](/images/f/f1/Log_and_pass.png)
Работа с виджетом
Настройка виджета
![](/images/e/ea/%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82.png)
Открыв виджет пользователь увидит области на экране, которые сможет перемещать.
Справа вверху пользователю нужно нажать на иконку "шестеренка/настройки" и открыть окно настройки параметров виджета.
В открывшемся списке настроек необходимо обязательно указать (все значения указаны в пикселях "px"):
- Адрес страницы авторизации.
- Заполнить строки "Значение поля логина" и "Значение поля пароль". Также можно воспользоваться альтернативным вариантом и заполнить данные на окне подложки.
- Проскроллив вниз страницу настроек и пользователь выбирает папку, где хранятся скриншоты страницы авторизации с логином и пароелм. Обязательно нажимает кнопку "Сохранить" и кнопку "Применить настройки".
- После сохранения настроек отобразятся сделанные скриншоты и их поля, в которых будут указаны данные прописанные в настройках.
- Внизу слева появится переключатель скриншотов подложки.
![](/images/d/d5/%D0%9D%D1%83%D0%B6%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F.png)
![](/images/9/97/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8%D1%82%D1%8C_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8.png)
Взаимодействие с подложками
Пользователь выбирает скриншот с логином. Данный скриншот обычно идёт как "Scrennshot 1". В этом скриншоте совмещаем контуры окна "логин" и подставляем его в поле "логин" на скриншоте.
Следующим шагом совмещаем кнопку "Далее" с полем "Next".
Перейди на следующий скриншот "Scrennshot 2", пользователь также совмещает по контурам поле «пароль» с полем «пароль» на скриншоте.
Нажимаем на кнопку «далее» на скриншоте с паролем и подставляем «Authorize».
Далее нажимает на кнопку «Сохранить».
Финальным шагом пользователь дает название трансляции, сохраняет ее и запускает на устройстве.
![](/images/8/8b/%D0%9E%D0%BA%D0%BD%D0%BE.png)
Внешний вид виджета
Виджет использует в качестве рабочего экрана область скриншота. Он состоит из четырёх блоков:
- Логин - прямоугольная область с данными. В эту строку вставляется электронная почта. Совмещаем с областью "логина" на скриншоте
- Пароль - прямоугольная область с данными. В данную строку прописывают пароль. Совмещаем с областью "пароля" на скриншоте.
- Authorize - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "авторизация" на скриншоте.
- Next - прямоугольная область, которая производит нажатие кнопки (кликер). Совмещаем с кнопкой "далее" на скриншоте
- Click - прямоугольная область, которая позволяет производить дополнительное действие клика на любой области виджета.
![](/images/0/01/%D0%9A%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8_%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D0%BE%D0%B2.png)
Видеоинструкция
Итоговый результат
Пользователь данной функциональности сможет автоматически проходит авторизацию на своем сайте и использовать нужный ему контент со своего сайта.