將畫布應用程式整合至網站與其他服務

發行項
04/09/2023

您組建的應用程式放在人們執行工作的地方使用時往往最實用。透過在 iframe 中內嵌畫布應用程式，您可以將這些應用程式整合至網站和其他服務，例如 Power BI 或 SharePoint。

本主題中，我們將說明如何設定應用程式內嵌參數，然後我們會在網站內嵌我們的資產訂購應用程式。

Power BI 內嵌應用程式儀表板。

注意

只有在相同租用戶中的 Power Apps 使用者才可存取內嵌的應用程式。
不支援在原生傳統型應用程式中內嵌畫布應用程式。 (這不包括第一方整合，例如 Teams 中的 Power Apps)。

您也可以將畫布應用程式整合到 SharePoint Online (不使用 iframe)。其他資訊：使用 Power Apps Web 部份。

設定應用程式的 URI 參數

如果您有想要內嵌的應用程式，第一步是 Uniform Resource Identifier (URI) 參數，讓 iframe 知道尋找應用程式的位置。 URI 表單如下︰

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

適用於 GCC 使用者

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

重要

從 2019 年八月起，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] 替代成您的應用程式識別碼。我們稍後會顯示您如何取得此值，但現在先說明 URI 中的所有參數︰

[appID] - 提供要執行應用程式的識別碼。
tenantid - 是支援來賓存取和判定打開應用程式的租用戶位置的非必要參數。
screenColor - 用來為您的使用者提供更好的應用程式載入體驗。此參數格式為 RGBA (紅色值、綠色值、藍色值、alpha) 並控制應用程式載入時的畫面控制項色彩。最好將它設定為與應用程式圖示相同的色彩。
source - 並不影響應用程式，但我們建議您新增描述性名稱參閱內嵌的來源。
最後您可以使用 Param() 函數新增任何您想要的自訂參數，而這些值可由您的應用程式取用。它要會新增在 URI 結尾，例如 [AppID]?source=iframe&param1=value1&param2=value2。這些參數在應用程式啟動時是唯讀的。如果您需要變更它們，您必須重新啟動應用程式。請注意，只有 [appid] 之後的第一個項目才應該有 "?"；之後請使用 "&"，如此處所示。

取得應用程式識別碼

應用程式識別碼已在 powerapps.com 開放使用。對於您想要內嵌的應用程式︰

請在 powerapps.com，Apps 索引標籤上，點擊或點選刪節號 (. . . ），然後 Details。
複製 App ID。
替代 URI 中的 [AppID] 值。對於我們的資產訂購應用程式，URI 看似如下︰
```
https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe
```

當您應用程式內嵌至使用 Launch() 功能啟動網頁或應用程式的網站時，您可能需要允許瀏覽器的彈出視窗功能。

在網站中內嵌您的應用程式

現在要內嵌您的應用程式就像將 iframe 新增至網站 (或任何支援 iframe 的其他服務，例如 Power BI 或 SharePoint) 的 HTML 程式碼一樣簡單：

<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] 替代您的應用程式識別碼。

注意

在您的 iframe HTML 程式碼中加入 allow="geolocation; microphone; camera"，讓應用程式在 Google Chrome 上使用這些功能。

下列映圖顯示資產訂購應用程式內嵌在 Contoso 範例網站中。

具有內嵌應用程式的 Contoso 網站。

請牢記驗證應用程式使用者的下列重點︰

如果您的網站使用根據 Microsoft Entra 識別碼的驗證，則不必再登入。
如果您的網站使用任何其他登入機制或是未通過驗證，您的使用者會在 iframe 上看到登入提示。他們登入之後即可執行應用程式，前提是應用程式的作者已和他們共用該應用程式。

如您所見，內嵌應用程式既簡單又強大。內嵌讓您將應用程式帶入您和客戶的工作位置 – 網站、Power BI 儀表板、SharePoint 頁面和其他。

注意

是否能請您告知您偏好的慣用文件語言？請填寫問卷。 (請注意，本問卷為英文版)

完成問卷大約需要七分鐘。本問卷將不會收集個人資料 (隱私權聲明)。

將畫布應用程式整合至網站與其他服務

設定應用程式的 URI 參數

取得應用程式識別碼

在網站中內嵌您的應用程式

意見反應

其他資源