Integrieren von Canvas-Apps in Websites und andere DiensteIntegrate canvas apps into websites and other services

Die apps, die Sie erstellen, sind oftmals besonders nützlich, wenn Sie verfügbar sind, wo die Benutzer ihre Arbeit erledigen.The apps that you build are often most useful when they're available right where people do their work. Wenn Sie Canvas-apps in einen iframe einbetten, können Sie diese apps in Websites und andere Dienste integrieren, wie z. b. Power BI oder SharePoint.By embedding canvas apps in an iframe, you can integrate those apps into websites and other services, such as Power BI or SharePoint.

In diesem Thema zeigen wir das Festlegen von Parametern für die Einbettung von Apps. Anschließend betten wir Ihre App zum Bestellen von Geschäftsausstattung in eine Website ein.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-Dashboard mit eingebetteter App

Berücksichtigen Sie die folgenden Einschränkungen:Keep the following restrictions in mind:

  • Nur powerapps-Benutzer im gleichen Mandanten können auf die eingebettete App zugreifen.Only Power Apps users in the same tenant can access the embedded app.
  • Wenn Sie mit Internet Explorer 11 auf powerapps zugreifen möchten, müssen Sie die Kompatibilitäts Ansicht deaktivieren.To access Power Apps using Internet Explorer 11, you must turn off Compatibility View.

Sie können Canvas-apps auch ohne Verwendung eines Iframes in SharePoint Online integrieren.You can also integrate canvas apps into SharePoint Online without using an iframe. Weitere Informationen: verwenden Sie das powerapps-Webpart.More information: Use the Power Apps web part.

Festlegen von URI-Parametern für Ihre AppSet URI parameters for your app

Wenn Sie über eine einzubettende App verfügen, besteht der erste Schritt im Festlegen von Parametern für den URI (Uniform Resource Identifier), um dem iframe mitzuteilen, wo sich die App befindet.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. Der URI liegt in der folgenden Form vor:The URI is in the following form:

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

Wichtig

Seit August 2019 hat sich das URI-Format von https://web.powerapps.com/webplayer in https://apps.powerapps.com/play geändert.As of August 2019, the URI format has changed from https://web.powerapps.com/webplayer to https://apps.powerapps.com/play. Aktualisieren Sie alle eingebetteten iFrames, damit das neue URI-Format verwendet wird.Please update any embedded iframes to use the new URI format. Verweise auf das vorherige Format werden an den neuen URI umgeleitet, um die Kompatibilität zu gewährleisten.References to the previous format will be redirected to the new URI to ensure compatibility.

Vorheriges Format:Previous format:

HTTPS://Web.powerapps.com/Webplayer/iframeapp? Source = IFRAME & AppID =/Providers/Microsoft.PowerApps/Apps/[AppID]https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

Sie brauchen nichts weiter zu tun, als die [AppID] im URI durch die ID Ihrer App zu ersetzen (einschließlich von „[' & ']“).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Wir zeigen Ihnen in Kürze, wie Sie an diesen Wert gelangen, aber zunächst folgt hier die Auflistung aller im URI verfügbaren Parameter:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [AppID] : gibt die ID der APP an, die ausgeführt werden soll.[appID] - It provides the ID of the app to run.
  • tenantid : ein optionaler Parameter, der den Gast Zugriff unterstützt und bestimmt, von welchem Mandanten die APP geöffnet werden soll.tenantid - is an optional parameter to support guest access and determines which tenant to open the app from.
  • screenColor: stellt Ihren Benutzern ein besseres Ladeverhalten bereit.screenColor - is used to provide a better app loading experience for your users. Dieser Parameter liegt im Format RGBA (Rotwert, Grünwert, Blauwert, Alpha) vor und steuert die Bildschirmfarbe während des Ladens der App.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Er sollte auf die gleiche Farbe wie das Symbol Ihrer App festgelegt werden.It is best to set it to the same color as your app's icon.
  • source: ohne Auswirkungen auf die App, wir empfehlen Ihnen jedoch, mit einem beschreibenden Namen auf die Quelle für die Einbettung zu verweisen.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Schließlich können Sie mithilfe der Param()-Funktion beliebige benutzerdefinierte Parameter hinzufügen, und diese Werte können von Ihrer App verbraucht werden.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Sie werden am Ende des URIs hinzugefügt, wie etwa in [AppID]?source=iframe&param1=value1&param2=value2.They are added to the end of the URI, such as [AppID]?source=iframe&param1=value1&param2=value2. Diese Parameter sind während des Starts der APP schreibgeschützt.These parameters are read only during launch of the app. Wenn Sie Sie ändern müssen, müssen Sie die APP neu starten.If you need to change them, you must relaunch the app. Beachten Sie, dass nur das erste Element nach [AppID] ein "?" enthalten sollte. Verwenden Sie danach das "&", wie hier dargestellt.Note that only the first item after [appid] should have a "?"; after that use the "&" as illustrated here.

Abrufen der App-IDGet the App ID

Die App-ID ist auf „powerapps.com“ verfügbar.The app ID is available on powerapps.com. Führen Sie für die einzubettende App folgende Aktionen aus:For the app you want to embed:

  1. Klicken oder tippen Sie in powerapps.com auf der Registerkarte Apps auf die Auslassungspunkte ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) und dann auf Details.), then Details.

    Wechseln zu den App-Details

  2. Kopieren Sie die App ID.Copy the App ID.

    Kopieren der App-ID aus den Detailinformationen

  3. Ersetzen Sie den [AppID]-Wert im URI.Substitute the [AppID] value in the URI. Für unsere App zum Bestellen von Geschäftsausstattung sieht der URI wie folgt aus:For our Asset Ordering app, the URI looks like this:

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

Einbetten der App in eine WebsiteEmbed your app in a website

Zum Einbetten Ihrer App brauchen Sie nur den iframe in den HTML-Code Ihrer Website einzufügen (oder in einen anderen Dienst mit iframe-Unterstützung wie Power BI und 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://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

Geben Sie Werte für die Höhe und Breite des iframes an, und ersetzen Sie [AppID] durch die ID Ihrer App.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Hinweis

Schließen Sie allow="geolocation; microphone; camera" in Ihren iframe-HTML-Code ein, damit Ihre Apps diese Funktionen in Google Chrome nutzen können.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

Auf dem folgenden Bild sehen Sie die App zum Bestellen von Geschäftsausstattung auf einer Contoso-Beispielwebsite eingebettet.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Contoso-Website mit eingebetteter App

Beachten Sie hinsichtlich der Authentifizierung von Benutzern Ihrer App die folgenden Punkte:Keep the following points in mind for authenticating users of your app:

  • Wenn Ihre Website AAD-basierte (Azure Active Directory) Authentifizierung verwendet, ist keine zusätzliche Anmeldung erforderlich.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Wenn Ihre Website einen anderen Anmeldemechanismus verwendet oder auf Authentifizierung verzichtet, wird Ihren Benutzern eine Anmeldeaufforderung auf dem iframe angezeigt.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Nach erfolgter Anmeldung können Ihre Benutzer die App so lange ausführen, wie der Autor der App sie freigegeben hat.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.

Wie Sie sehen können, ist das Einbetten von Apps ein einfaches und leistungsstarkes Verfahren.As you can see, embedding apps is simple and powerful. Durch Einbetten können Sie Apps direkt dort zur Verfügung stellen, wo Sie und Ihre Kunden arbeiten – auf Websites, Power BI-Dashboards, SharePoint-Seiten und vielem mehr.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.