将 Microsoft Flow 与网站和应用集成Integrate Microsoft Flow with websites and apps

将 Microsoft Flow 直接嵌入应用或网站中,方便用户自动完成其个人任务或专业任务。Embed Microsoft Flow right into your app or website to give users a simple way to automate their personal or professional tasks.

若要创建流,用户需提供 Microsoft 帐户Azure Active Directory 中的工作帐户或学校帐户。To create flows, users will need either a Microsoft Account or a work or school account in Azure Active Directory. Microsoft Flow 不支持某些功能,例如,不支持白标解决方案,此类方案支持系统所使用的任何标识(除非 Microsoft Flow 已使用 Microsoft 帐户或 AAD)。Microsoft Flow doesn't support, for example, a whitelabel solution that supports whatever identity your system uses (unless it already uses Microsoft Accounts or AAD).

先决条件Prerequisites

显示适合用户方案的模板Show templates for your scenarios

开始时请添加以下代码,直接在网站中显示流模板:To start, add this code to show the flow templates directly in your website:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}"></iframe>

注意:我们添加了一个分行符,改进代码在页面上的显示效果。Note: We added a line break so the code displays better on the page.

参数Parameter 说明Description
区域设置locale 模板视图的四字母语言和区域代码。The four-letter language and region code for the template view. 例如,en-us 代表美式英语,de-de 代表德语。For example, en-us represents American English, and de-de represents German.
搜索词search term 要在视图中显示的模板的搜索词。The search term for the templates that you want to show in the view. 例如,搜索 wunderlist 即可显示 Wunderlist 模板。For example, search wunderlist to show templates for Wunderlist.
模板数number of templates 要在视图中显示的模板的数量。The number of templates that you want to show in the view.
目标destination 当用户单击模板时打开的页面。The page that opens when users click the template. 指定 details 即可显示模板详细信息,指定 new 即可打开 Microsoft Flow 设计器。Specify details to show the details about the template, or specify new to open the Microsoft Flow designer.
parameters.{name}parameters.{name} 要传递到流中的其他上下文。Additional context to pass into the flow.

如果目标参数为 new,则 Microsoft Flow 会在用户单击模板时打开,用户可以在设计器中创建流。If the destination parameter is new, Microsoft Flow opens when users click a template, and they can create a flow in the designer. 若要在应用内获得完全的体验,请参阅下一部分。See the next section if you want to have the full experience work from inside of the app.

将附加参数传递到流Passing additional parameters to the flow

如果用户位于网站或应用的特定上下文中,则可能需要将该上下文传递到流。If the user is in a certain context in your website or app, you might want to pass that context to the flow. 例如,用户可能会在 Wunderlist 中查看特定列表时打开一个模板,该模板的功能是“项目添加到列表中时通知我”。For example, a user might open a template for Notify me when an item is added to a list while looking at a certain list in Wunderlist. 执行以下步骤即可将列表 ID 以参数形式传递到流:By following these steps, you can pass in the list ID as a parameter to the flow:

  1. 在发布参数之前在流模板中定义参数。Define the parameter in the flow template before you publish it. 参数如下所示:@{parameters('parameter_name')}A parameter looks like @{parameters('parameter_name')}.
  2. 在 iframe src 中传递参数。例如,如果有一个名为 listName 的参数,则可添加 &parameters.listName={the name of the list}Pass the parameter in the iframe src. For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

完整示例Full sample

若要以德语形式显示有关 Wunderlist 的四大模板并通过 myCoolList 启动用户,请执行以下操作:To show the top four templates about Wunderlist in German and to start the user with myCoolList:

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

嵌入流管理Embed the management of flows

使用经过身份验证的 Flow SDK,让用户直接通过网站或应用创建和管理流(不需导航到 Microsoft Flow 门户)。Use the authenticated Flow SDK to allow users to create and manage flows directly from your website or app (instead of navigating to the Microsoft Flow portal). 用户需登录到 Microsoft 帐户或 Azure Active Directory 才能使用经过身份验证的 SDK。You'll need to sign the user in to Microsoft Account or Azure Active Directory to use the authenticated SDK.

备注

在你的应用程序中使用 Microsoft Flow 的所有用户都将是 Microsoft Flow 用户。All users who use Microsoft Flow in your application will be Microsoft Flow users. 无法隐藏 Microsoft Flow 品牌。There is no way to hide the Microsoft Flow branding.

包括 JavaScript,适用于经过身份验证的 SDKInclude the JavaScript for the authenticated SDK

遵照此示例在 HTML 代码中包括 SDK。Include the SDK in your HTML code by following this example. 也可下载、缩小 SDK 并将其与产品打包在一起。You may also download, minify, and package the SDK with your product.

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

创建一个用于容纳视图的容器Create a container to contain the view

添加 HTML div:Add an HTML div:

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

建议对此容器进行样式化处理,使之在使用时显示适当的维度:We recommend that you style this container so that it appears with appropriate dimensions in your experience:

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

请注意,iframe 在宽度低于 320 像素时无法正常呈现,在宽度超出 1200 像素时无法填充内容。Note that the iframe won't render properly below 320 pixels in width and won't fill content above 1200 pixels in width. 任何高度均可。Any height should work.

针对 SDK 进行身份验证Authentication against the SDK

若要列出用户已创作的流并通过模板创建流,请提供源自 AAD 的 authToken。For listing flows that the user has already authored and also to create flows from templates, provide an authToken from AAD.

<script>
    window.msFlowSdkLoaded = function() {
        var sdk = new MsFlowSdk({
            hostName:'https:/flow.microsoft.com'
        });
        var widget = sdk.renderWidget('flows', {
            container: 'flowDiv'
            environmentId: '[environmentId]'    // find environment id from browser URL when you 
                                                // click on 'my flows'
                                                //ex: https://flow.microsoft.com/manage/environments/[environmentId]/flows
        });
        widget.callbacks.GET_ACCESS_TOKEN = function(requestParam, widgetDoneCallback)
       {
            var authCallback = function(token) {
                widgetDoneCallback(null, {
                    token: token // Get AAD access token from your backend system
                });
            };
        }
    }
</script>

若要查找 environmentId,可以进行下述 API 调用,以便返回可供用户访问的环境的列表:You can find the environmentId by making the following api call, which returns the list of environments user has access to:

GET https://management.azure.com/providers/Microsoft.ProcessSimple/environments
?api-version=2016-11-01 

这样会返回一个带环境列表的 JSON 响应,你可以从该列表中选取任何环境。This returns a JSON response with list of environments, from which you can pick any environment. 查看属性 properties.isDefault=true 即可查找默认的用户环境。You can look for the default user enviroment by checking the property properties.isDefault=true.

在此示例中,requestParam 定义为:In this example, requestParam is defined as:

export interface IRpcRequestParam {
    callInfo: IRpcCallInfo,
    data?: any;
}

接下来需要注意的是,widgetDoneCallback 是一个回调函数,需在主机获得令牌后进行调用。Next, the widgetDoneCallback is a callback function that needs to be called once the host has the token. 这样做是因为获得令牌可能是一个异步过程。This is done because token acquisition is likely an async process. 调用此函数时需传入的参数为 (errorResult: any, successResult: any)The parameters that need to be passed in when calling this function are (errorResult: any, successResult: any). successResult 将取决于回调类型。The successResult will depend on the callback type. GetAccessToken 的类型为:For GetAccessToken the type is:

export interface IGetAccessTokenResult {
    token: string;
}