A PowerApps integrálása webhelyekbe és más szolgáltatásokbaIntegrate PowerApps into websites and other services

A létrehozott alkalmazások gyakran akkor a leghasznosabbak, ha a felhasználók ott férhetnek hozzájuk, ahol dolgoznak.The apps you build are often most useful when they're available right where people are doing their work. A PowerApps szolgáltatással beágyazhatja az alkalmazásait egy IFrame elembe, így ezeket az alkalmazásokat integrálhatja webhelyekbe és olyan más szolgáltatásokba, mint például a Power BI vagy a 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.

A témakörben azt mutatjuk be, hogyan állíthatja be az alkalmazásbeágyazás paramétereit, majd beágyazzuk a saját Asset Ordering (Eszközrendezés) alkalmazásunkat egy webhelyre.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-irányítópult beágyazott alkalmazással

Vegye figyelembe a következő korlátozásokat:Keep the following restrictions in mind:

  • A beágyazott alkalmazáshoz csak az azonos bérlőben található PowerApps-felhasználók férhetnek hozzá.Only PowerApps users in the same tenant can access the embedded app.
  • Ha a PowerAppst az Internet Explorer 11 használatával szeretné elérni, ki kell kapcsolnia a kompatibilitási nézetet.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

A PowerApps szolgáltatást a SharePoint Online-ba is integrálhatja (IFrame elemek használata nélkül).You can also integrate PowerApps into SharePoint Online (without using an iframe). További információ: Alkalmazás létrehozása a SharePointban a PowerApps segítségével.For more information, see Generate an app from within SharePoint using PowerApps.

Az alkalmazás URI-paramétereinek beállításaSet URI parameters for your app

A beágyazni kívánt alkalmazások esetében az első lépés a Uniform Resource Identifier (URI) paramétereinek beállítása, hogy az IFrame elem megtalálja az alkalmazást.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. Az URI-t a következő formátumban kell megadni:The URI is in the following form:

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

Megjegyzés

Az URI-ba egy sortörés van beszúrva, hogy az átláthatóbban jelenjen meg az oldalon.We added a line break so the URI displays better on the page.

Az egyetlen elvégzendő feladat a saját alkalmazás azonosítójának behelyettesítése az [AppID] helyére (beleértve a szögletes zárójeleket) az URI-ban.The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Hamarosan megtudhatja, hogyan tudhatja meg ezt az értéket, először azonban tekintsük át az URI összes elérhető paraméterét:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] (alkalmazásazonosító) – /providers/Microsoft.PowerApps/apps/[AppID] formátumú.[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. A futtatandó alkalmazás azonosítóját határozza meg.It provides the ID of the app to run.
  • screenColor (képernyőszín) – jobb alkalmazásbetöltési felületet biztosít a felhasználók számára.screenColor - is used to provide a better app loading experience for your users. Ez a paraméter az RGBA (vörös érték, zöld érték, kék érték, alfa) formátumban szerepel, és az alkalmazás betöltésének ideje alatt megjelenő képernyő színét határozza meg.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Célszerű az alkalmazás ikonjával megegyező színre állítani.It is best to set it to the same color as your app's icon.
  • source (forrás) – nincs hatással az alkalmazásra, de javasolt megadni egy leíró nevet, amellyel a beágyazás forrására hivatkozhat.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Végül, bármilyen egyéni paramétert hozzáadhat a Param() függvénnyel, ezeket az értékeket pedig az alkalmazás felhasználhatja.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Ezek az URI végére kerülnek, például a következőképpen: [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Ezek a paraméterek az alkalmazás futtatásakor csak olvashatók; ha módosítani szeretné őket, újból el kell indítania az alkalmazást.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Az alkalmazásazonosító beszerzéseGet the App ID

Az alkalmazásazonosító a powerapps.com webhelyen érhető el. A beágyazni kívánt alkalmazás esetében:The app ID is available on powerapps.com. For the app you want to embed:

  1. A powerapps.com webhely Alkalmazások lapján kattintson vagy koppintson a három pontra ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ), majd a Részletek lehetőségre.), then Details.

    Az alkalmazás részleteinek megnyitása

  2. Másolja le az alkalmazásazonosítót.Copy the App ID.

    Az alkalmazásazonosító másolása a Részletek képernyőről

  3. Cserélje le rá az URI [AppID] értékét.Substitute the [AppID] value in the URI. Az Asset Ordering (Eszközrendezés) alkalmazás esetében az URI így néz ki: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
    

Alkalmazás beágyazása egy webhelyreEmbed your app in a website

Az alkalmazás beágyazásához innentől kezdve csupán be kell szúrni az IFrame elemet a webhely (vagy bármely más IFrame elemek használatát támogató szolgáltatás, például a Power BI vagy a SharePoint) HTML-kódjába: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"/>

Adja meg az IFrame szélességének és magasságának értékét, majd cserélje az [AppID] értéket az alkalmazásazonosítóra.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Megjegyzés

Az allow="geolocation; microphone; camera" érték az IFrame HTML-kódjában való használatával lehetővé teheti az alkalmazások számára, hogy használják ezeket a képességeket Google Chrome böngészőben.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

Az alábbi képen az Asset Ordering (Eszközrendezés) alkalmazás látható egy Contoso-mintawebhelybe beágyazva.The following image shows the Asset Ordering app embedded in a Contoso sample website.

A Contoso webhelye egy beágyazott alkalmazással

Az alkalmazás felhasználóinak hitelesítésekor vegye figyelembe az alábbi megfontolásokat:Keep the following points in mind for authenticating users of your app:

  • Ha a webhely Azure Active Directory- (AAD-) alapú hitelesítést használ, nincs szükség további bejelentkezésre.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Ha a webhely bármilyen másik bejelentkezési módszert alkalmaz, vagy nem használ hitelesítést, a felhasználóknak be kell jelentkezniük az IFrame felületén.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. A bejelentkezés után futtathatják az alkalmazást, amennyiben annak készítője azt megosztotta velük.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.

Mint láthatja, az alkalmazások beágyazása egyszerű és hatékony.As you can see, embedding apps is simple and powerful. A beágyazással elérhetővé tehet alkalmazásokat azokon a helyeken, ahol maga és a felhasználói munkát végeznek – webhelyeken, Power BI-irányítópultokon, SharePoint-oldalakon és egyéb helyeken.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.