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

Текущая версия от 13:42, 20 февраля 2026

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

Виджет авторизации — это инструмент, который позволял пользователям проводить автоматическую авторизацию на платформах при отображении, путём наложения виртуальных элементов (полей и кнопок) на скриншоты страниц авторизации. Для работы виджет использует URL-адрес страницы авторизации и сопоставляет изображение на скриншоте с отображаемой по URL страницей. Таким образом, процесс авторизации автоматизируется.
Новая версия виджета предлагает дополнительные возможности к логике работы функционала, упрощает взаимодействие и делает пользовательский опыт более позитивным.
Ознакомиться с работой первой версии виджета можно по ссылке здесь

Добавление виджета в личный кабинет

Чтобы добавить виджет в личный кабинет, пользователю нужно запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.

После этого пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».

Пример отображения раздела «Контент» в личном кабинете

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

Главная страница виджета

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

На главной странице виджета отображается:

инструкция по использованию виджета (главный экран, на котором после настройки будут отображены шаги с полями и кнопками самого виджета);
кнопки управления виджетом;
колонка учёта шагов.

При необходимости, можно открыть инструкцию снова, кликнув на иконку в виде знака «?».

Общие настройки виджета

Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:

выбор языка — позволяет выбрать один из доступных для работы виджета языков. Доступные языки — русский, английский, испанский, португальский, казахский;
адрес страницы — вставить URL-ссылку на нужную страницу авторизации;
чекбокс (галочка) «Запустить десктопную версию» — активирует/деактивирует масштабирование элементов, отображаемых на экране по размерам экрана устройства вывода данных;
интервал обновления страницы — указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
чекбокс (галочка) «Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона, будут использоваться ближайшие пограничные к диапазону значения;
задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в миллисекундах;
выбрать изображение — позволяет выбрать загруженные изображения из папки, расположенной в личном кабинете SmartPlayer.

Пример отображения общих настроек виджета

Загрузка и скачивание настроек

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

Пример отображения иконок в настройках виджета

Завершение общих настроек виджета

После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. Либо пользователь может не сохранять выставленные настройки по кнопке «Сбросить».

Пример отображения кнопок «Применить настройки» и «Сбросить»

Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.

Добавление шага

После завершения общих настроек виджета в левой нижней части экрана для пользователя станет активна кнопка «Добавить шаг». По клику на нее изменится отображение страницы:

будут отображены новые кнопки:
- выбрать скриншот;
- добавить действие.
в колонке «Шаги авторизации» появится новый шаг и две кнопки:
- применить;
- блок схема.
в левом верхнем углу появится обозначение текущего шага в виде кнопки (является кликабельной кнопкой)

Выбор скриншота

По нажатию на одноименную кнопку откроется модальное окно, в котором загружены все скриншоты из папки. В этом окне выбрать нужный для шага скриншот.

После выбора название скриншота будет отображено в колонке «Шаги авторизации» для первого шага.

Пример отображения изменений в колонке «Шаги авторизации»

Добавить действие

По нажатию на одноименную кнопку откроется выбор с двумя вариантами действий:

добавить поле ввода — создаёт на экране поле для наложения и ввода данных накладываемое на поле авторизации;
добавить кнопку — создаёт кнопку, которая выполняет клик и накладывается на кнопки, которые есть на страницах авторизации, для исоплнения действия;

Пример отображения функциональности кнопки

После создания поля и кнопки пользователь размещает их на экране со скриншотом.

Добавленные действия также отобразятся в колонке «Шаги авторизации» внутри текущего шага.

Пример отображения в колонке «Шаги авторизации»

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

Колонка «Шаги авторизации»

В колонке «Шаги авторизации» отображается список всех шагов с действиями.

Пример отображения колонки «Шаги авторизации»

Эта колонка состоит из списка шагов, внутри которых описаны:

название картинки;
поле ввода(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика);
кнопка действия(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика).

Каждый шаг можно удалить по отдельной кнопке «Удалить шаг». Также в каждом шаге можно удалить действия оставив его пустым (только с картинкой), при необходимости.
Чтобы применить все действия и настройки для шагов кликнуть на синюю кнопку «Применить», расположенную внизу колонки «Шаги авторизации». Виджет оповестит пользователя об успешном применении шагов модальным окном с подтверждением.

Пример отображения модального окна с подтверждением сохранения настроек

Настройка поля ввода и кнопки действия

Некоторые параметры, описанные в этом разделе автоматически изменяются если вы перетаскиваете поле или кнопку в рамках экрана виджета.

Кликнув по иконке в виде шестеренки рядом с кнопкой или полем пользователь может перейти в настройки данного элемента.
Кнопка включает в себя следующие настройки:

имя — ввести название кнопки;
координата X — прописать числовое значение координаты в пикселях;
координата Y — прописать числовое значение координаты в пикселях;
ширина — прописать числовое значение в пикселях;
высота — прописать числовое значение в пикселях;
время задержки — прописать числовое значение, которое указывает задержку перед нажатием кнопки. Измеряется в миллисекундах.

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

Поле включает в себя настройки:

имя — ввести название поля;
значение — прописать значение, которое будет введено в поле при наложении на изображение;
координата X — прописать числовое значение координаты в пикселях;
координата Y — прописать числовое значение координаты в пикселях;
ширина — прописать числовое значение в пикселях;
высота — прописать числовое значение в пикселях;
время задержки — прописать числовое значение, которое указывает задержку перед вводом значения в поле. Измеряется в миллисекундах.

В обоих случаях для применения изменённых настроек кнопки или поля нажать на синюю кнопку «Применить» внизу колонки.

Блок-схема

При клике на кнопку «Блок-схема» перед пользователем появится блок-схема с последовательностью шагов и действий внутри каждого шага. Это позволит более наглядно просмотреть и понять текущую логику авторизации построенную пользователем в виджете.

Добавление настроенного виджета в трансляцию

Чтобы полностью ознакомиться с работой данной функциональности, запустить трансляцию с расписанием и добавить в качестве контента виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:

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

Настройка виджета авторизации ver. 2.0

Дополнительная информация

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

Пример отображения вкладки «Обсуждения» на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"

@@ Строка 1: / Строка 1: @@
+<language/>
+<translate>
+<!--T:1-->
 == '''Описание ситуации''' ==
-Виджет авторизации — это инструмент, который позволял пользователям проводить автоматическую авторизацию на платформах при проигрывание. Новая версия виджета предлагает дополнительные возможности к логике работы функционала, упрощает взаимодействие и делает пользовательский опыт более позитивным.<br>
+Виджет авторизации — это инструмент, который позволял пользователям проводить автоматическую авторизацию на платформах при отображении, путём наложения виртуальных элементов (полей и кнопок) на скриншоты страниц авторизации. Для работы виджет использует URL-адрес страницы авторизации и сопоставляет изображение на скриншоте с отображаемой по URL страницей. Таким образом, процесс авторизации автоматизируется.<br>
+Новая версия виджета предлагает дополнительные возможности к логике работы функционала, упрощает взаимодействие и делает пользовательский опыт более позитивным.<br>
 Ознакомиться с работой первой версии виджета можно по ссылке [https://wiki.smartplayer.org/index.php?title=%D0%92%D0%B8%D0%B4%D0%B6%D0%B5%D1%82_%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8 здесь]
 == '''Добавление виджета в личный кабинет''' ==
-Чтобы добавить данный виджет в личный кабинет, пользователю необходимо запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.
+Чтобы добавить виджет в личный кабинет, пользователю нужно запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.
-[[File:Виджет_авторизации_2.0.png|thumb|center| Пример виджета в формате ".zip" - архива|800px]]
+[[File:Виджет_авторизации_2.0.png|thumb|center| Пример виджета в формате .zip - архива|800px]]
 После этого пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».
 [[File:Лк_контент.png|thumb|center| Пример отображения раздела «Контент» в личном кабинете |800px]]
-В разделе «Контент» необходимо перетянуть данный виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.
+В разделе «Контент» перетаскиваем виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.
-[[File:Виджет_авторизации.png|thumb|center| Пример отображения переноса виджета с помощью drag-n-drop|800px]]
+[[File:Виджет_авторизации.png|thumb|center| Пример отображения переноса виджета с помощью drag-and-drop|800px]]
 == '''Главная страница виджета''' ==
-После переноса виджета для первичной настройки пользователю необходимо дважды кликнуть по иконке. Данное действие перенесет его на главную страницу виджета.
+После переноса виджета для первичной настройки пользователь должен дважды кликнуть по иконке. Данное действие перенесет его на главную страницу виджета.
-[[File:Главная_старница_трафика.png|thumb|center| Пример отображения главной страницы виджета|800px]]
+[[File:Базовая_страница.png|thumb|center| Пример отображения главной страницы виджета|800px]]
 На главной странице виджета отображается:
-* инструкция по использованию виджета (главный экран, на котором после настройки будет идти настройка);
+* инструкция по использованию виджета (главный экран, на котором после настройки будут отображены шаги с полями и кнопками самого виджета);
 * кнопки управления виджетом;
 * колонка учёта шагов.
@@ Строка 20: / Строка 23: @@
 {{Note|При необходимости, можно открыть инструкцию снова, кликнув на иконку в виде знака «?».|warn}}
 == '''Общие настройки виджета''' ==
-Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки пользователю откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:
+Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:
 * выбор языка — позволяет выбрать один из доступных для работы виджета языков. Доступные языки — русский, английский, испанский, португальский, казахский;
-* адрес страницы — необходимо вставить URL-ссылку на нужную страницу авторизации;
+* адрес страницы — вставить URL-ссылку на нужную страницу авторизации;
-* чекбокс(галочка)«Запустить десктопную версию» — активирует/деактивирует масштабирование элементов отображаемых на экране по размерам экрана устройства вывода данных;
+* чекбокс (галочка) «Запустить десктопную версию» — активирует/деактивирует масштабирование элементов, отображаемых на экране по размерам экрана устройства вывода данных;
-* интервал обновления страницы — необходимо указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
+* интервал обновления страницы — указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
-* чекбокс(галочка)«Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
+* чекбокс (галочка) «Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
-* скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона будут использоваться ближайшие пограничные к диапазону значения;
+* скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона, будут использоваться ближайшие пограничные к диапазону значения;
-* задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в секундах;
+* задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в миллисекундах;
-* выбрать изображение — позволяет выбрать загруженные изображения из личного кабинета SmartPlayer.
+* выбрать изображение — позволяет выбрать загруженные изображения из папки, расположенной в личном кабинете SmartPlayer.
-[[File:Настройки_виджета_авторизации.png|thumb|center| Пример отображения общих настроек виджета|800px]]
+[[File:Настройки общие для виджета.png|thumb|center| Пример отображения общих настроек виджета|800px]]
-== '''Загрузка и скачивание настроек''' ==
+=== '''Загрузка и скачивание настроек''' ===
 В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
 [[File:Иконки_загрузки.png|thumb|center| Пример отображения иконок в настройках виджета |800px]]
-== '''Завершение настройки виджета''' ==
+=== '''Завершение общих настроек виджета''' ===
 После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. Либо пользователь может не сохранять выставленные настройки по кнопке «Сбросить».
 [[File:Применение_настрок.png|thumb|center| Пример отображения кнопок «Применить настройки» и «Сбросить»|800px]]
 Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.
 [[File:Сохран.png|thumb|center| Пример отображения кнопки «Сохранить»|800px]]
+== '''Добавление шага''' ==
+После завершения общих настроек виджета в левой нижней части экрана для пользователя станет активна кнопка «Добавить шаг». По клику на нее изменится отображение страницы:
+* будут отображены новые кнопки:
+** выбрать скриншот;
+** добавить действие.
+* в колонке «Шаги авторизации» появится новый шаг и две кнопки:
+** применить;
+** блок схема.
+* в левом верхнем углу появится обозначение текущего шага в виде кнопки (является кликабельной кнопкой)
+[[File:Изменения_добавления_шага.png|thumb|center| Пример отображения изменений при добавлении шага|800px]]
+=== '''Выбор скриншота''' ===
+По нажатию на одноименную кнопку откроется модальное окно, в котором загружены все скриншоты из папки.
+В этом окне выбрать нужный для шага скриншот.
+[[File:Скрин_авторизации.png|thumb|center| Пример отображения модального окна с выбором скриншота|800px]]
+После выбора название скриншота будет отображено в колонке «Шаги авторизации» для первого шага.
+[[File:Изменение_шагов_авторизации.png|thumb|center| Пример отображения изменений в колонке «Шаги авторизации» |800px]]
+=== '''Добавить действие''' ===
+По нажатию на одноименную кнопку откроется выбор с двумя вариантами действий:
+* добавить поле ввода — создаёт на экране поле для наложения и ввода данных накладываемое на поле авторизации;
+* добавить кнопку — создаёт кнопку, которая выполняет клик и накладывается на кнопки, которые есть на страницах авторизации, для исоплнения действия;
+[[File:Добавление_действий.png|thumb|center| Пример отображения функциональности кнопки |800px]]
+После создания поля и кнопки пользователь размещает их на экране со скриншотом.
+[[File:Поле_ввода_и_кнопка.png|thumb|center| Пример отображения поля ввода и кнопки |800px]]
+Добавленные действия также отобразятся в колонке «Шаги авторизации» внутри текущего шага.
+[[File:Действия_для_текущего_шага.png|thumb|center| Пример отображения в колонке «Шаги авторизации» |800px]]
+При перемещении элементов откроется панель с параметрами для настройки выбранного элемента. О параметрах поля и кнопки будет описано ниже в разделе. Также при перемещении подсвечивается только выбранный пользователем элемент.
+== '''Колонка «Шаги авторизации»''' ==
+В колонке «Шаги авторизации» отображается список всех шагов с действиями.
+[[File:Отображение_шагов_авторизации.png|thumb|center| Пример отображения колонки «Шаги авторизации» |800px]]
+Эта колонка состоит из списка шагов, внутри которых описаны:
+* название картинки;
+* поле ввода(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика);
+* кнопка действия(можно отредактировать с помощью клика на иконку шестерёнки или удалить по иконке крестика).
+[[File:Расппеделение_по_шагу_.png|thumb|center| Пример отображения колонки «Шаги авторизации» |800px]]
+Каждый шаг можно удалить по отдельной кнопке «Удалить шаг». Также в каждом шаге можно удалить действия оставив его пустым (только с картинкой), при необходимости.<br>
+Чтобы применить все действия и настройки для шагов кликнуть на синюю кнопку «Применить», расположенную внизу колонки «Шаги авторизации». Виджет оповестит пользователя об успешном применении шагов модальным окном с подтверждением.
+[[File:Применения_шагов.png|thumb|center| Пример отображения модального окна с подтверждением сохранения настроек |800px]]
+=== '''Настройка поля ввода и кнопки действия''' ===
+{{Note|Некоторые параметры, описанные в этом разделе автоматически изменяются если вы перетаскиваете поле или кнопку в рамках экрана виджета.|warn}}
+Кликнув по иконке в виде шестеренки рядом с кнопкой или полем пользователь может перейти в настройки данного элемента.<br>
+Кнопка включает в себя следующие настройки:
+* имя — ввести название кнопки;
+* координата X — прописать числовое значение координаты в пикселях;
+* координата Y — прописать числовое значение координаты в пикселях;
+* ширина — прописать числовое значение в пикселях;
+* высота — прописать числовое значение в пикселях;
+* время задержки — прописать числовое значение, которое указывает задержку перед нажатием кнопки. Измеряется в миллисекундах.
+[[File:Настройки_кнопки.png|thumb|center| Пример отображения параметров для кнопки |800px]]
+Поле включает в себя настройки:
+* имя — ввести название поля;
+* значение — прописать значение, которое будет введено в поле при наложении на изображение;
+* координата X — прописать числовое значение координаты в пикселях;
+* координата Y — прописать числовое значение координаты в пикселях;
+* ширина — прописать числовое значение в пикселях;
+* высота — прописать числовое значение в пикселях;
+* время задержки — прописать числовое значение, которое указывает задержку перед вводом значения в поле. Измеряется в миллисекундах.
+[[File:Настройки_поля.png|thumb|center| Пример отображения для полей|800px]]
+В обоих случаях для применения изменённых настроек кнопки или поля нажать на синюю кнопку «Применить» внизу колонки.
+[[File:Кнопка_применить в видежте.png|thumb|center| Пример отображения кнопки «Применить» |800px]]
+=== '''Блок-схема''' ===
+При клике на кнопку «Блок-схема» перед пользователем появится блок-схема с последовательностью шагов и действий внутри каждого шага. Это позволит более наглядно просмотреть и понять текущую логику авторизации построенную пользователем в виджете.
+[[File:Блока_схема_шагов.png|thumb|center| Пример отображения блок-схемы|800px]]
 == '''Добавление настроенного виджета в трансляцию''' ==
-Чтобы полностью ознакомиться с работой данной функциональности, пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
+Чтобы полностью ознакомиться с работой данной функциональности,  запустить трансляцию с расписанием и добавить в качестве контента виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
 * [[Раздел "Устройства"]]
 * [[Раздел "Контент на устройства"]]
@@ Строка 45: / Строка 110: @@
 * [[Раздел "Расписание"]]
 == '''Видеоинструкция''' ==
-[https://vk.com/video-227547238_456239099 Настройка виджета авторизации ver. 2.0]
+[https://vkvideo.ru/video-227547238_456239116 Настройка виджета авторизации ver. 2.0]
 == '''Дополнительная информация''' ==
 Если данная статья не помогает использовать функционал по назначению, или после её прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.
 [[File:Обсуждение_авторизации.png|thumb|center| Пример отображения вкладки «Обсуждения» на wiki-странице |800px]]
 Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]]
+</translate>

Аноним

Поиск

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

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

Ещё

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

Текущая версия от 13:42, 20 февраля 2026

Содержание

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

Добавление виджета в личный кабинет

Главная страница виджета