将 PowerApps 集成到网站和其他服务中Integrate PowerApps into websites and other services

如果能够直接将生成的应用集成到用户工作时使用的工具中,通常最为实用。The apps you build are often most useful when they're available right where people are doing their work. 借助 PowerApps,可以将应用嵌入 iframe,以便于将这些应用集成到网站和其他服务中(如 Power BI 或 SharePoint)。PowerApps enables you to embed apps in an iframe so that you can integrate those apps into websites and other services, such as Power BI or SharePoint.

本主题先会介绍如何设置应用嵌入参数;然后,我们将会把资产订购应用嵌入网站。In this topic, we'll show you how to set parameters for app embedding; then we'll embed our Asset Ordering app in a website.

嵌入了应用的 Power BI 仪表板

请记住以下限制:Keep the following restrictions in mind:

  • 只有同一租户中的 PowerApps 用户,才能访问嵌入应用。Only PowerApps users in the same tenant can access the embedded app.
  • 若要使用 Internet Explorer 11 访问 PowerApps,必须禁用兼容性视图。To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

还可以将 PowerApps 集成到 SharePoint Online 中(不使用 iframe)。You can also integrate PowerApps into SharePoint Online (without using an iframe). 有关详细信息,请参阅使用 PowerApps 从 SharePoint 中生成应用For more information, see Generate an app from within SharePoint using PowerApps.

设置应用 URI 参数Set URI parameters for your app

若有要嵌入的应用,第一步是设置统一资源标识符 (URI) 参数,以便 iframe 知道在何处查找应用。If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app. URI 的格式如下:The URI is in the following form:

https://web.powerapps.com/webplayer/iframeapp?source=iframe
&appId=/providers/Microsoft.PowerApps/apps/[AppID]

备注

为了提升 URI 在页面上的显示效果,添加了换行符。We added a line break so the URI displays better on the page.

只需将 URI 中的 [AppID] 替换成应用 ID(包括 '[' & ']')。The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). 稍后,我们将介绍如何获取此值,而现在将先介绍 URI 中的所有参数:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] - 格式为 /providers/Microsoft.PowerApps/apps/[AppID][appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. 用于提供要运行的应用的 ID。It provides the ID of the app to run.
  • screenColor - 用于为用户提供更好的应用加载体验。screenColor - is used to provide a better app loading experience for your users. 此参数的格式为 RGBA (red value, green value, blue value, alpha),用于控制应用加载时的屏幕颜色。This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. 最好将此参数设置为与应用图标的颜色相同。It is best to set it to the same color as your app's icon.
  • source - 虽然不影响应用,但建议添加描述性名称来指代嵌入来源。source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • 最后,可以使用 Param() 函数添加所需的任何自定义参数,并且这些值可供应用使用。Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. 这些参数添加到 URI 的末尾,如 [AppID]&param1=value1They are added to the end of the URI, such as [AppID]&param1=value1. 在应用的启动阶段,这些参数为只读;如果需要更改它们,必须重启应用。These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

获取应用 IDGet the App ID

可以在 powerapps.com 上获取应用 ID。对于要嵌入的应用,请执行以下操作:The app ID is available on powerapps.com. For the app you want to embed:

  1. powerapps.com 中,依次单击或点击“应用”选项卡上的省略号(“...”In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . )和“详细信息”。), then Details.

    转到应用详细信息

  2. 复制“应用 ID”。Copy the App ID.

    从“详细信息”中复制应用 ID

  3. 替换 URI 中的 [AppID] 值。Substitute the [AppID] value in the URI. 对于资产订购应用,URI 如下所示:For our Asset Ordering app, the URI looks like this:

    https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    

将应用嵌入网站Embed your app in a website

嵌入应用现在与向网站的 HTML 代码添加 iframe(或支持 iframe 的任何其他服务,如 Power BI 或 SharePoint)一样简单:Embedding your app is now as simple as adding the iframe to the HTML code for your site (or any other service that supports iframes, such as Power BI or SharePoint):

<iframe width="[W]" height="[H]" src="https://web.powerapps.com/webplayer/iframeapp?source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]" allow="geolocation; microphone; camera"/>

指定 iframe 宽度和高度值,然后将 [AppID] 替换成应用 ID。Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

备注

在 iframe HTML 代码中包含 allow="geolocation; microphone; camera",以允许应用在 Google Chrome 上使用这些功能。Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

下图展示了嵌入 Contoso 示例网站的资产订购应用。The following image shows the Asset Ordering app embedded in a Contoso sample website.

嵌入了应用的 Contoso 网站

对应用用户进行身份验证时,请注意以下几点:Keep the following points in mind for authenticating users of your app:

  • 如果网站使用 Azure Active Directory (AAD) 身份验证,用户无需额外登录。If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • 如果网站使用其他任何登录机制或网站未经身份验证,用户将会在 iframe 上看到登录提示。If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. 登录后,用户便可以运行应用,但前提是应用的作者已与其共享应用。After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.

如你所见,嵌入应用不仅操作简单,而且还能提供非常强大的功能。As you can see, embedding apps is simple and powerful. 通过嵌入应用,可以将应用直接集成到你和客户工作时使用的工具(网站、Power BI 仪表板、SharePoint 页面等)。Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.