共用方式為

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

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

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

Power BI 儀表板中嵌入的應用程式。

Note

  • 只有屬於相同租用戶的 Power Apps 使用者才能存取嵌入的應用程式。
  • 不支援在任何原生桌面應用程式中嵌入畫布應用程式，包括 Android 與 iOS。 這不包含 Teams 中的 Power Apps 等第一方整合。

您也可以在不使用 iframe 的情況下，將畫布應用程式整合至 SharePoint Online。 更多資訊：使用 Power Apps 網頁元件。

設定應用程式的 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] (包含「[&]」) 替換為您的應用程式 ID。 我們稍後會顯示您如何取得此值，但現在先說明 URI 中的所有參數︰

  • [appID] - 提供要執行的應用程式 ID。
  • tenantid - 為支援訪客存取的可選參數，決定要從哪個租用戶開啟應用程式。
  • screenColor - 用來為使用者提供更佳的應用程式載入體驗。 此參數格式為 RGBA (紅色值、綠色值、藍色值、alpha) 並控制應用程式載入時的畫面控制項色彩。 最好將它設定為與應用程式圖示相同的色彩。
  • source - 不會影回應用程式，但建議加入描述性名稱以標示嵌入來源。
  • 最後您可以使用 Param() 函數 新增任何您想要的自訂參數，而這些值可由您的應用程式取用。 它要會新增在 URI 結尾，例如 [AppID]?source=iframe&param1=value1&param2=value2。 這些參數在應用程式啟動時是唯讀的。 如果您需要變更它們，您必須重新啟動應用程式。 請注意，只有 [appID] 後的第一個參數應使用「?」，其餘參數請使用「&」，如上所示。

取得應用程式識別碼

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

  1. 在 powerapps.com 中的應用程式標籤上，按一下或點擊省略號 (...)，然後按一下詳細資料。

    前往應用程式詳細資料。

  2. 複製 App ID。

    複製詳細資料中的應用程式識別碼。

  3. 替代 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 ID 驗證，則不需要額外登入。
  • 如果您的網站使用任何其他登入機制或是未通過驗證，您的使用者會在 iframe 上看到登入提示。 他們登入之後即可執行應用程式，前提是應用程式的作者已和他們共用該應用程式。

如您所見，內嵌應用程式既簡單又強大。 嵌入功能能讓您將應用程式直接帶到您與客戶工作的地方——網站、Power BI 儀表板、SharePoint 頁面等。

  • Last updated on