Поделиться через

Интеграция Power Automate с веб-сайтами и приложениями

  • Статья

Вы можете внедрять функции Power Automate в приложения и веб-сайты с помощью мини-приложений потоков, открывая пользователям удобный способ автоматизации своих личных и рабочих задач.

Мини-приложения потоков представляют собой элементы iframe, размещаемые в коде документа ведущего приложения. Этот документ ссылается на страницу в конструкторе Power Automate. Мини-приложения позволяют интегрировать определенный функционал Power Automate в стороннее приложение.

Мини-приложения могут быть простыми, например, они могут отображать список шаблонов без какого-либо взаимодействия между ведущим приложением и iframe. Но они могут быть и сложными. Например, они могут создавать облачный поток на основе шаблона, а затем активировать его с использованием двусторонней связи между ведущим и мини-приложением.

Предварительные условия

  • Учетная запись Майкрософт либо
  • рабочая или учебная учетная запись.

Мини-приложение без проверки подлинности

Чтобы использовать мини-приложение шаблонов без проверки подлинности, внедрите его непосредственно в ведущее приложения с помощью iframe. Пакет JS SDK или маркер доступа не требуются.

Отображение шаблонов для сценариев

Для начала добавьте следующий код, чтобы отобразить шаблоны Power Automate на вашем веб-сайте:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}&category={category}"></iframe>
Параметр Описание
locale Четырехбуквенный код языка и региона для представления шаблона. Например, en-us представляет американский английский, а de-de — немецкий.
search term Условие поиска для шаблонов, которые отобразятся в представлении. Например, чтобы отобразить шаблоны для приложения SharePoint, нужно выполнить поиск по условию SharePoint.
number of templates Число шаблонов, которые отобразятся в представлении.
destination Страница, которая открывается, когда пользователь выбирает шаблон. Введите details, чтобы отобразить сведения о шаблоне, или new, чтобы открыть конструктор Power Automate.
category Фильтр для заданной категории шаблонов.
parameters.{name} Дополнительный контекст, передаваемый в поток.

Если параметр destination имеет значение new, при выборе пользователем шаблона откроется конструктор Power Automate, где можно создать облачный поток. В следующем разделе подробно описано, как использовать мини-приложение.

Передача дополнительных параметров в шаблон потока

Если пользователь находится в определенном контексте веб-сайта или приложения, этот контекст можно передать в поток. Например, пользователь может открыть шаблон При создании элемента, глядя на определенный список в SharePoint. Чтобы передать идентификатор списка как параметр в поток, сделайте следующее:

  1. Определите параметр в шаблоне потока перед его публикацией. Параметр выглядит так: @{parameters('parameter_name')}.
  2. Передайте параметр в строку запроса iframe src. Например, добавьте &parameters.listName={the name of the list}, если у вас есть параметр с именем listName.

Полный пример

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

<iframe src="https://flow.microsoft.com/de-de/widgets/templates/?q=sharepoint%20&pagesize=4&destination=details&parameters.listName=myCoolList"></iframe>

Мини-приложения потоков с аутентификацией

В следующей таблице приведен список мини-приложений Power Automate, в которых можно использовать все возможности с помощью маркера доступа для проверки подлинности пользователей. Для внедрения мини-приложений и предоставления требуемого маркера необходим пакет средств разработки программного обеспечения JavaScript (JS SDK) для Power Automate.

Тип мини-приложения Поддерживаемая функция
flows Отображает список потоков на вкладке для личных и общих потоков. Позволяет изменить существующий поток или создать новый на основе шаблона или с нуля.
flowCreation Создает облачный поток на основе идентификатора шаблона, предоставляемого ведущим приложением.
runtime Активирует поток с ручными или гибридными триггерами, предоставленный ведущим приложением.
approvalCenter Внедряет запросы на утверждение и отправленные утверждения.
templates Отображает список шаблонов. Пользователь может выбрать один из них для создания потока.

Используйте пакет SDK для Flow с проверкой подлинности, чтобы дать пользователям возможность создавать потоки и работать с ними непосредственно на веб-сайте или в приложении, а не в Power Automate. Для работы такого SDK пользователям нужно будет входить с учетной записью Майкрософт или через Azure Active Directory.

Note

Скрыть фирменную символику Power Automate при использовании мини-приложений невозможно.

Архитектура мини-приложений

Мини-приложения Power Automate работают путем внедрения iframe, который ссылается на Power Automate в ведущем приложении. Ведущее приложение предоставляет маркер доступа, необходимый мини-приложению Power Automate. Пакет JS SDK для Power Automate позволяет ведущему приложению инициализировать и контролировать жизненный цикл мини-приложения.

Схема архитектуры мини-приложения Power Automate.

Сведения о пакете JS SDK

Разработчики Power Automate предоставляют пакет JS SDK для упрощения интеграции мини-приложений Flow в сторонние приложения. Пакет JS SDK для Flow можно скачать по общедоступной ссылке в службе Flow. Он позволяет ведущему приложению обрабатывать события из мини-приложения и взаимодействовать с приложением Flow, отправляя в мини-приложение действия. События и действия мини-приложения зависят от его типа.

Инициализация мини-приложения

Перед инициализацией мини-приложения необходимо добавить в ведущее приложение ссылку на пакет JS SDK для Flow.

<script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>

Создайте экземпляр пакета JS SDK, передав необязательные значения hostName и locale в объект JSON.

var sdk = new MsFlowSdk({
    hostName:'https://flow.microsoft.com',
    locale:'en-US'
});
Имя (название) Обязательно/необязательно Описание
hostName Необязательная Имя узла Power Automate, например https://flow.microsoft.com
locale Необязательная Языковой стандарт клиента для мини-приложения (если не передан, по умолчанию используется en-Us)

После создания экземпляра JS SDK вы можете инициализировать и внедрить мини-приложение Power Automate в родительский элемент в ведущем приложении. Для этого добавьте HTML-тег div:

<div id="flowDiv" class="flowContainer"></div>

Затем инициализируйте мини-приложение Power Automate с помощью метода renderWidget() пакета JS SDK. Укажите тип мини-приложения и соответствующие параметры.

var widget = sdk.renderWidget('<widgettype>', {
        container: 'flowDiv',
        flowsSettings: {},
        templatesSettings: {},
        approvalCenterSettings: {},
        widgetStyleSettings: {}
});

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

<head>
    <style>
        .flowContainer iframe {
            width: 400px;
            height: 1000px;
            border: none;
            overflow: hidden;
    }
    </style>
</head>

Ниже приведены параметры для renderWidget():

Параметр Обязательно/необязательно Описание
container Обязательные Идентификатор элемента div на ведущей странице, куда будет внедрено мини-приложение.
environmentId Необязательная Мини-приложениям требуется идентификатор среды. Если он не указан, используется среда по умолчанию.
flowsSettings Необязательная Объект настроек Power Automate
templatesSettings Необязательная Объект параметров шаблона
approvalCenterSettings Необязательная Объект параметров утверждения

Маркеры доступа

После запуска метода renderWidget() пакет JS SDK инициализирует элемент iframe, который ссылается на URL-адрес мини-приложения Power Automate. Этот URL-адрес содержит все настройки в параметрах строки запроса. Перед инициализацией мини-приложения ведущее приложение должно получить для пользователя маркер доступа Power Automate (JWT-маркер Azure Active Directory с аудиторией https://service.flow.microsoft.com). Мини-приложение инициирует событие GET_ACCESS_TOKEN, чтобы запросить маркер доступа у ведущего приложения. Последнее должно обработать событие и передать маркер мини-приложению:

widget.listen("GET_ACCESS_TOKEN", function(requestParam, widgetDoneCallback) {
    widgetDoneCallback(null, {
        token:  '<accesstokenFromHost>'
    });
});

Ведущее приложение отвечает за обслуживание маркера и его передачу с допустимым сроком действия в мини-приложение при получении соответствующего запроса. Если мини-приложение открыто в течение продолжительного времени, ведущее приложение должно проверить срок действия маркера и при необходимости обновить маркер перед его передачей в мини-приложение.

Определение готовности мини-приложения

После успешной инициализации мини-приложение порождает событие для уведомления о своей готовности. Ведущее приложение может ожидать передачи данных события WIDGET_READY и выполнять собственный дополнительный код.

widget.listen("WIDGET_READY", function() {
    console.log("The flow widget is now ready.");
    // other host code on widget ready
});

Параметры мини-приложения

FlowsSettings

FlowsSettings можно использовать для настройки функциональных возможностей мини-приложения Power Automate.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};
Параметр Обязательно/необязательно Описание
createFromBlankTemplateId Обязательные Использование GUID шаблона, когда пользователь нажимает кнопку Создать с нуля в мини-приложении Flow.
flowsFilter Необязательная Мини-приложение Power Automate применяет указанный фильтр при выводе списка потоков. Например, оно может отобразить потоки, ссылающиеся на определенный сайт SharePoint.
flowsFilter: "operations/any(operation: operation/sharepoint.site eq 'https://microsoft.sharepoint.com/teams/ProcessSimple' )"
tab Необязательная Активная вкладка по умолчанию для отображения в мини-приложении Power Automate.
Например:
tab:'sharedFlows' отображает вкладку рабочей группы
tab:'myFlows' отображает вкладку "Мои потоки".

TemplatesSettings

Этот параметр применяется ко всем мини-приложениям, которые позволяют создавать потоки на основе шаблона, включая мини-приложения Flows, FlowCreation и Templates.

templatesSettings?: {
    defaultParams?: any;
    destination?: string;
    pageSize?: number;
    searchTerm?: string;
    templateCategory?: string;
    useServerSideProvisioning?: boolean;
    enableDietDesigner?: boolean;
};
Параметр Обязательно/необязательно Описание:
defaultParams Необязательная Параметры времени разработки, используемые при создании облачного потока на основе шаблона, например:
defaultParams: {'parameters.sharepoint.site': 'https://microsoft.sharepoint.com/teams/ProcessSimple', 'parameters.sharepoint.list': 'b3a5baa8-fe94-44ca-a6f0-270d9f821668' }
destination Необязательная Допустимые значения — "new" или "details". Если задано "details", при создании облачного потока на основе шаблона отображается страница сведений.
pageSize Необязательная Число отображаемых шаблонов (размер страницы). Размер по умолчанию = 6
searchTerm Необязательная Отображение шаблонов, соответствующих условию поиска.
templateCategory Необязательная Отображение шаблонов в определенной категории

ApprovalCenterSettings

Применяется к мини-приложениям ApprovalCenter.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};
Параметр Обязательно/необязательно Описание
hideLink Необязательная Если задано значение true, мини-приложение скрывает полученные и отправленные ссылки на утверждение
approvalsFilter Необязательно Мини-приложение утверждения будет применять указанный фильтр утверждения при выведении списка утверждений, например:
approvalsFilter: 'properties/itemlink eq \'https://microsoft.sharepoint.com/teams/ProcessSimple/_layouts/15/listform.aspx?PageType=4&ListId=737e30a6-5bc4-4e9c-bcdc-d34c5c57d938&ID=3&ContentTypeID=0x010010B708969A9C16408696FD23801531C6\''

approvalsFilter: 'properties/itemlinkencoded eq \'{Your base64 encoded item link url} \''
tab Необязательная Активная вкладка по умолчанию для отображения в мини-приложении Flow.
Допустимые значения: "receivedApprovals" (полученные утверждения), "sentApprovals" (отправленные утверждения)
showSimpleEmptyPage Необязательная Если утверждения отсутствуют, отображается пустая страница.
hideInfoPaneCloseButton Необязательная Скрывает на панели сведений кнопку "Закрыть" (например, если она уже есть в ведущем приложении).

События мини-приложений

Мини-приложения Power Automate поддерживают события, и ведущее приложение может ожидать передачи данных об этих событиях в течение всего жизненного цикла мини-приложения. Мини-приложение Power Automate поддерживает два типа событий: с односторонним уведомлением (например, Widget_Ready) и инициируемые мини-приложением для получения данных от ведущего (Get_Access_Token). Чтобы отслеживать передачу данных от конкретных событий, отправляемых мини-приложением, в ведущем приложении используется метод widget.listen().

Использование

widget.listen("<WIDGET_EVENT>", function() {
    console.log("The flow widget raised event");
});

Поддерживаемые события по типам мини-приложений

Событие мини-приложения Сведения
WIDGET_READY Мини-приложение загружено.
WIDGET_RENDERED Мини-приложение загружено и завершена отрисовка пользовательского интерфейса.
GET_ACCESS_TOKEN Мини-приложение запрашивает внедрение маркера доступа пользователя.
GET_STRINGS Позволяет узлу переопределять набор строк пользовательского интерфейса, отображаемых в мини-приложении.

Мини-приложение среды выполнения

Событие мини-приложения Сведения Данные
RUN_FLOW_STARTED Активирован запуск потока.
RUN_FLOW_COMPLETED Поток запущен.
RUN_FLOW_DONE_BUTTON_CLICKED Пользователь нажал кнопку "Готово" в запущенном потоке.
RUN_FLOW_CANCEL_BUTTON_CLICKED Пользователь нажал кнопку "Отмена" в запущенном потоке.
FLOW_CREATION_SUCCEEDED Поток создан. { flowUrl: string, flowId: string, fromTemplate: string }
WIDGET_CLOSE Возникает, когда ведущее приложение должно закрыть мини-приложение.

Мини-приложение создания потока

Событие мини-приложения Сведения Данные
FLOW_CREATION_FAILED Создать поток не удалось.
WIDGET_CLOSE Возникает, когда ведущее приложение должно закрыть мини-приложение.
TEMPLATE_LOAD_FAILED Загрузить шаблон не удалось.
FLOW_CREATION_SUCCEEDED Поток создан. { flowUrl: string, flowId: string,fromTemplate?: string }

Мини-приложение для утверждения

Событие мини-приложения Сведения
RECEIVED_APPROVAL_STATUS_CHANGED Изменено состояние полученного утверждения.
SENT_APPROVAL_STATUS_CHANGED Изменено состояние отправленного утверждения.

Событие GET_STRINGS позволяет вам вводить свой текст для некоторых элементов пользовательского интерфейса, отображаемых в мини-приложении. Возможно изменение следующих строк:

Ключ строки Использование в мини-приложении
FLOW_CREATION_CREATE_BUTTON Текст, отображаемый на кнопке создания потока в мини-приложениях создания потока и среды выполнения.
FLOW_CREATION_CUSTOM_FLOW_NAME Начальное значение для имени потока в мини-приложении создания потока. Используется только при включенном параметре allowCustomFlowName.
FLOW_CREATION_HEADER Заголовок, используемый при создании облачного потока в мини-приложениях создания потока и среды выполнения.
INVOKE_FLOW_HEADER Заголовок, используемый при вызове облачного потока в мини-приложении среды выполнения.
INVOKE_FLOW_RUN_FLOW_BUTTON Текст, отображаемый на кнопке вызова или запуска облачного потока в мини-приложении среды выполнения.

Пример

Вызовите widgetDoneCallback, передав объект JSON с парами "ключ-значение", включающими ключ строки и текст, чтобы переопределить значение по умолчанию.

widget.listen("GET_STRINGS", function(requestParam, widgetDoneCallback) {
    widgetDoneCallback(null, {
         "FLOW_CREATION_HEADER": "<string override would go here>",
        "INVOKE_FLOW_RUN_FLOW_BUTTON":  "<string override would go here>"
    });
});

Действия мини-приложений

Ведущее приложение использует действия для отправки мини-приложению определенных действий и сообщений. Пакет JS SDK предоставляет метод notify() для отправки мини-приложению сообщения или полезных данных JSON. Каждое действие мини-приложения поддерживает определенную сигнатуру полезных данных.

Использование

widget.notify('<WIDGET_ACTION>', parameterMatchingParameterInterface)
    .then(result => console.log(result))
    .catch(error => console.log(error))

Пример

Вызовите облачный поток, отправив мини-приложению среды выполнения следующую команду:

widget.notify('triggerFlow', { flowName: flowName, implicitData:implicitData });

Мини-приложение среды выполнения

Действие мини-приложения Подробности Интерфейс параметров
triggerFlow Активирует запуск облачного потока. { flowName: string, implicitData?: string }
triggerFlowByTemplate Активирует запуск облачного потока на основе шаблона. { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }
getTriggerSchema Получает схему триггеров облачного потока. { flowName: string, }
closeWidget Отменяет все ожидающие действия и активирует событие WIDGET_CLOSE.

Мини-приложение создания потока

Действие мини-приложения Подробности Интерфейс параметров
createFlowFromTemplate Создает облачный поток на основе выбранного определения шаблона. { templateName: string, designTimeParameters?: Record<string, any> }
createFlowFromTemplateDefinition Создает облачный поток на основе выбранного определения шаблона { templateDefinition: string }
closeWidget Отменяет все ожидающие действия и активирует событие WIDGET_CLOSE.

Мини-приложение для утверждения

Действие мини-приложения Сведения Интерфейс параметров
closeInfoPane Закрывает панель со сведениями об утверждении. Н/Д

Настройка клиентского приложения

Вам потребуется настроить свое клиентское приложение в областях службы Flow (настроить делегированные разрешения). Если приложение Azure Active Directory (AAD), используемое для интеграции мини-приложения, применяет поток авторизации "предоставление кода", необходимо предварительно настроить для него делегированные разрешения, поддерживаемые Power Automate. Делегированные разрешения дают приложению следующие возможности:

  • Управление утверждениями
  • Чтение утверждений
  • Чтение действий
  • Управление потоками
  • Чтение потоков

Для выбора делегированных разрешений сделайте следующее:

  1. Перейти к https://portal.azure.com
  2. Выберите параметр Azure Active Directory.
  3. Выберите Регистрация приложений в разделе Управление.
  4. Укажите стороннее приложение для настройки в областях службы Flow.
  5. Выберите Параметры. Снимок экрана со значком настроек приложения.
  6. Выберите Необходимые разрешения в разделе Доступ через API/
  7. Выберите Добавить.
  8. Щелкните Выбор API. Снимок экрана с указанием необходимых разрешений, добавления и выбора API.
  9. Найдите и выберите Служба Power Automate. Примечание. Чтобы увидеть службу Power Automate, нужно, чтобы хотя бы один пользователь AAD в вашем клиенте вошел на портал Flow (https://flow.microsoft.com)
  10. Выберите нужные области Flow для приложения, а затем нажмите Сохранить. Снимок экрана с делегированными разрешениями.

Приложение получит маркер службы Flow, который содержит делегированные разрешения в утверждении 'scp' в маркере JWT.

Пример приложения с внедрением мини-приложений потоков

В разделе ресурсов доступен пример одностраничного приложения (SPA) JavaScript, позволяющий вам поэкспериментировать с внедрением мини-приложений потоков на ведущую страницу. Для использования этого примера необходимо зарегистрировать приложение AAD, включив для него поток неявного предоставления разрешения.

Регистрация приложения AAD

  1. Войдите на портал Azure.
  2. В левой области навигации выберите Azure Active Directory, а затем выберите Регистрация приложений (предварительная версия) > "Новая регистрация".
  3. На странице Регистрация приложения введите имя приложения.
  4. В разделе Поддерживаемые типы учетных записей выберите Учетные записи в любом каталоге организации.
  5. В разделе URL-адрес перенаправления выберите веб-платформу и задайте значение URL-адреса приложения' в зависимости от веб-сервера. Задайте значение http://localhost:30662/, чтобы запустить пример приложения.
  6. Выберите Зарегистрировать.
  7. На странице Обзор приложения зафиксируйте значение идентификатора приложения (клиента).
  8. Для примера необходимо включить поток неявного предоставления разрешения. В левой области навигации регистрируемого приложения выберите Аутентификация.
  9. Откройте Дополнительные параметры и в разделе Неявное предоставление установите флажки Токены идентификатора и Маркеры доступа. Токены идентификатора и маркеры доступа являются обязательными, так как в приложении будет выполняться вход пользователей и вызов API Flow.
  10. Нажмите кнопку Сохранить.

Запуск примера

  1. Скачайте пример и скопируйте его в локальную папку на вашем устройстве.
  2. В папке FlowSDKSample откройте файл index.html и в applicationConfig измените clientID на идентификатор зарегистрированного ранее приложения. Снимок экрана файла index.html, определяющего местонахождение клиентского идентификатора.
  3. Пример приложения настроен на использование областей Flow Flows.Read.All и Flow.Manage.All. Чтобы настроить дополнительные области, измените свойство flowScopes в объекте applicationConfig.
  4. Установите зависимости и запустите пример приложения, выполнив следующие команды:

    > npm install > node server.js

  5. Откройте браузер и введите http://localhost:30662.
  6. Нажмите кнопку Войти, чтобы пройти в AAD аутентификацию и получить маркер доступа облачного потока.
  7. Маркер будет указан в текстовом поле Маркер доступа. Снимок экрана, показывающий поле маркера доступа, содержащее маркер доступа.
  8. Выберите Загрузить мини-приложение потоков или Загрузить мини-приложение шаблонов, чтобы внедрить соответствующие мини-приложения. Снимок экрана с кнопками для встраивания мини-приложения загрузки потоков или мини-приложения загрузки шаблонов.

Ссылка для скачивания примера приложения.

Ресурсы

Страницы для тестирования мини-приложения

Узнайте больше об интеграции и параметрах мини-приложений.

Языковые стандарты, поддерживаемые мини-приложением

Если инициализируемый языковой стандарт не указан в списке, Flow по умолчанию будет использовать ближайший поддерживаемый языковой стандарт.

Локаль Language
bg-bg Болгарский (Болгария)
ca-es Каталанский (Каталанский)
cs-cz Чешский (Чешская республика)
da-dk Датский (Дания)
de-de немецкий (Германия)
el-gr Греческий (Греция)
en-Us английский (США)
es-es Испанский (кастильский)
et-ee Эстонский (Эстония)
eu-es Баскский (Баскский)
fi-fi Финский (Финляндия)
fr-fr французский (Франция)
gl-es Галисийский (Галисия)
hi-HU Венгерский (Венгрия)
hi-in Хинди (Индия)
hr-hr Хорватский (Хорватия)
id-Id Индонезийский (Индонезия)
it-It итальянский (Италия)
jp-Jp Японский (Япония)
kk-kz Казахский (Казахстан)
ko-kr Корейский (Корея)
lt-LT Литовский (Литва)
lv-lv Латышский (Латвия)
ms-my малайский (Малайзия)
nb-no Норвежский (букмол)
nl-nl нидерландский (Нидерланды)
pl-pl Польская (Польша)
pt-br португальский (Бразилия)
pt-pt португальский (Португалия)
ro-ro румынский (Румыния)
ru-ru русский (Россия)
sk-sk Словацкий (Словакия)
sl-si Словенский (Словения)
sr-cyrl-rs Сербский (кириллица, Сербия)
sr-latn-rs Сербский (латиница, Сербия)
sv-se шведский (Швеция)
th-th Тайский (Таиланд)
tr-tr Турецкий (Турция)
uk-ua Украинский (Украина)
vi-vn Вьетнамский (Вьетнам)

Использование SDK внедрения Power Automate описано в разделе Условия лицензии на программное обеспечение Майкрософт.

Note

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).