Интеграция 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.
  • Служба PowerApps поддерживает Internet Explorer 11, но для работы необходимо отключить просмотр в режиме совместимости.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

Вы также можете интегрировать PowerApps в SharePoint Online (без использования IFrame).You can also integrate PowerApps into SharePoint Online (without using an iframe). Дополнительные сведения см. в статье Создание приложения из списка SharePoint с использованием PowerApps.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 лучше отображался на странице.Note: We added a line break so the URI displays better on the page.

Вам только нужно указать в URI идентификатор своего приложения вместо AppID, в том числе [' & '].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]. Он предоставляет идентификатор приложения, которое нужно внедрить.It provides the ID of the app to run.
  • screenColor — используется для обеспечения лучшей загрузки приложений для ваших пользователей.screenColor - is used to provide a better app loading experience for your users. Этот параметр имеет формат RGBA (красный, зеленый, синий и альфа) и определяет цвет экрана при загрузке приложения.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=value1.They 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.

Получение идентификатора приложенияGet the App ID

Идентификатор приложения доступен на сайте powerapps.com. Для приложения, которое вы хотите внедрить: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. Скопируйте идентификатор приложения.Copy the App ID.

    Копирование идентификатора приложения из раздела подробных сведений

  3. Замените значение [AppID] в URI.Substitute the [AppID] value in the URI. Для приложения по заказу товаров URI будет выглядеть следующим образом:For our Asset Ordering app, the URI looks like this:

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

Внедрение приложения на веб-сайтEmbed your app in a website

Внедрить приложение теперь так же просто, как добавить IFrame в HTML-код вашего сайта (или любую другую службу, поддерживающую 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?hideNavBar=true&
source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]"/>

Укажите значения высоты и ширины IFrame и идентификатор приложения вместо [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

На следующем изображении показано приложение для заказа товаров на примере веб-сайта 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, то дополнительный вход не требуется.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.