将画布应用集成到网站和其他服务中

如果能够直接将构建的应用集成到用户工作时使用的工具中,通常最为实用。 通过将画布应用嵌入到 iframe 中,您可以将这些应用集成到网站和其他服务中,例如 Power BI 或 SharePoint。

本主题先会介绍如何设置应用嵌入参数;然后,我们将会把资产订购应用嵌入网站。

嵌入了应用的 Power BI 仪表板。

备注

  • 只有同一租户中的 Power Apps 用户才能访问嵌入应用。
  • 不支持在本机桌面应用程序中嵌入画布应用。 这在 Teams 中会排除第一方集成,如在 Power Apps)。

还可以将画布应用集成到 SharePoint Online 中,无需使用 iframe。 详细信息:使用 Power Apps Web 部件

设置应用 URI 参数

若有要嵌入的应用,第一步是设置统一资源标识符 (URI) 参数,以便 iframe 知道在何处查找应用。 URI 的格式如下:

https://apps.powerapps.com/play/[AppID]?source=iframe

对于 GCC 用户

https://apps.gov.powerapps.us/play/[AppID]?source=iframe

重要

从 2019 年 8 月开始,URI 格式已从 https://web.powerapps.com/webplayer 更改为 https://apps.powerapps.com/play。 请更新所有嵌入式 iframe 以使用新的 URI 格式。 对先前格式的引用将重定向到新 URI,以确保兼容性。

以前格式:

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

只需将 URI 中的 [AppID] 替换成应用 ID(包括 '[' & ']')。 稍后,我们将介绍如何获取此值,而现在将先介绍 URI 中的所有参数:

  • [appID] - 用于提供要运行的应用的 ID。
  • tenantid - 是支持访客访问的可选参数,确定从哪个租户打开应用。
  • screenColor - 用于为用户提供更好的应用加载体验。 此参数的格式为 RGBA (red value, green value, blue value, alpha),用于控制应用加载时的屏幕颜色。 最好将此参数设置为与应用图标的颜色相同。
  • source - 虽然不影响应用,但建议添加描述性名称来指代嵌入来源。
  • 最后,可以使用 Param() 函数添加所需的任何自定义参数,并且这些值可供应用使用。 这些参数添加到 URI 的末尾,如 [AppID]?source=iframe&param1=value1&param2=value2。 这些参数仅在启动应用期间为只读。 如果需要更改它们,必须重新启动应用。 请注意,只有 [appid] 之后的第一项应带有“?”;第一项之后,使用此处所示的“&”。

获取应用 ID

可以在 powerapps.com 上获取应用 ID。 对于要嵌入的应用,请执行以下操作:

  1. powerapps.com 中,依次单击或点击应用选项卡上的省略号 ( . . . ) 和详细信息

    转到应用详细信息。

  2. 复制应用 ID

    从详细信息复制应用 ID。

  3. 替换 URI 中的 [AppID] 值。 对于资产订购应用,URI 如下所示:

    https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe
    

当您在使用 Launch() 函数启动网页或应用的网站中嵌入应用时,可能需要允许浏览器中的弹出窗口。

将应用嵌入网站

嵌入应用现在与向网站的 HTML 代码添加 iframe(或支持 iframe 的任何其他服务,如 Power BI 或 SharePoint)一样简单:

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

指定 iframe 宽度和高度值,然后将 [AppID] 替换成应用 ID。

备注

在 iframe HTML 代码中包含 allow="geolocation; microphone; camera",以允许应用在 Google Chrome 上使用这些功能。

下图展示了嵌入 Contoso 示例网站的资产订购应用。

嵌入了应用的 Contoso 网站。

对应用用户进行身份验证时,请注意以下几点:

  • 如果网站使用基于 Microsoft Entra ID 的身份验证,则无需额外登录。
  • 如果网站使用其他任何登录机制或网站未经身份验证,用户将会在 iframe 上看到登录提示。 登录后,用户便可以运行应用,但前提是应用的作者已与其共享应用。

如您所见,嵌入应用不仅操作简单,而且还能提供非常强大的功能。 通过嵌入应用,可以将应用直接集成到您和客户工作的位置 – 网站、Power BI 仪表板、SharePoint 页面等。

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。