Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Betten Sie Power Automate mithilfe von flow-Widgets in Ihre App oder Website ein, um Ihren Benutzern eine einfache Möglichkeit zum Automatisieren ihrer persönlichen oder beruflichen Aufgaben zu bieten.
Flow-Widgets sind iframes, die sich in einem Hostdokument befinden. Dieses Dokument verweist auf eine Seite im Power Automate-Designer. Diese Widgets integrieren spezifische Power Automate Funktionalität in die Drittanbieteranwendung.
Manche Widgets sind einfach aufgebaut. So kann ein Widget beispielsweise eine Vorlagenliste ohne Kommunikation zwischen Host und den iframe rendern. Manche Widgets sind aber auch komplex. So kann ein Widget etwa einen Cloud-Flow aus einer Vorlage bereitstellen und ihn anschließend über eine bidirektionale Kommunikation zwischen Host und Widget auslösen.
Voraussetzungen
- Ein Microsoft-Konto oder
- ein Geschäfts-, Schul- oder Unikonto
Verwenden von nicht authentifizierten Widgets
Betten Sie die nicht authentifizierte Widget-Vorlagen mithilfe eines iframe direkt in die Hostanwendung ein, um es zu verwenden. Das JavaScript SDK oder ein Zugriffstoken ist dafür nicht erforderlich.
Anzeigen von Vorlagen für Ihre Szenarien
Fügen Sie zunächst diesen Code hinzu, um die Power Automate Vorlagen auf Ihrer Website anzuzeigen:
<iframe src="https://make.powerautomate.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}&category={category}"></iframe>
| Parameter | Beschreibung |
|---|---|
| locale | Der aus vier Buchstaben bestehende Sprach- und Regionscode für die Vorlagenansicht. Beispielsweise gibt Englisch (US) und Deutsch an. |
| Suchbegriff | Der Suchbegriff für die Vorlagen, die Sie in der Ansicht anzeigen möchten. Suchen Sie beispielsweise SharePoint, um Vorlagen für SharePoint anzuzeigen. |
| Anzahl der Vorlagen | Die Anzahl der Vorlagen, die in der Ansicht angezeigt werden sollen. |
| destination | Diese Seite wird geöffnet, wenn Benutzer die Vorlage auswählen. Geben Sie details ein, um die Details zur Vorlage anzuzeigen, oder geben Sie new ein, um den Power Automate Designer zu öffnen. |
| category | Filter für die angegebene Vorlagenkategorie. |
| parameters.{Name} | Zusätzlicher Kontext, der in den Flow übergeben werden soll. |
Wenn der Zielparameter new ist, wird der Power Automate Designer geöffnet, wenn Benutzer eine Vorlage auswählen. Dort kann der Benutzer dann einen Cloud-Flow erstellen. Wenn die komplette Benutzeroberfläche des Widgets enthalten sein soll, finden Sie weitere Informationen im nächsten Abschnitt.
Übergeben zusätzlicher Parameter an die Flow-Vorlage
Wenn sich der Benutzer in einem bestimmten Kontext auf der Website oder in der App befindet, soll vorzugsweise dieser Kontext an den Flow übergeben werden. Beispielsweise kann ein Benutzer eine Vorlage für When an item is created während der Betrachtung einer bestimmten Liste in SharePoint öffnen. Führen Sie die folgenden Schritte aus, um die Listen-ID als Parameter an den Flow zu übergeben:
- Definieren Sie den Parameter in der Flowvorlage, bevor Sie diese veröffentlichen. Ein Parameter sieht wie folgt aus: .
- Übergeben Sie den Parameter in die Abfragezeichenfolge von „iframe src“. Fügen Sie beispielsweise hinzu, wenn Sie über den Parameter listName verfügen.
Vollständiges Beispiel
Um die vier wichtigsten SharePoint Vorlagen in Deutsch anzuzeigen und den Benutzer mit myCoolList zu starten, verwenden Sie diesen Code:
<iframe src="https://make.powerautomate.com/de-de/widgets/templates/?q=sharepoint%20&pagesize=4&destination=details¶meters.listName=myCoolList"></iframe>
Verwenden von authentifizierten Flow-Widgets
In der folgenden Tabelle ist die Liste der Power Automate Widgets aufgeführt, die die vollständige Erfahrung innerhalb des Widgets mithilfe des Benutzerauthentifizierungszugriffstokens unterstützen. Sie müssen das JavaScript Software Developer Kit (JS SDK) von Power Automate verwenden, um die Widgets einzubetten und das erforderliche Benutzerzugriffstoken bereitzustellen.
| Typ des Widget | Unterstützte Funktion |
|---|---|
| flows | Zeigt auf einer Registerkarte eine Liste der Flows für persönliche und freigegebene Flows an. Sie können einen vorhandenen Flow bearbeiten oder einen neuen Flow aus einer Vorlage oder ohne Vorlage erstellen. |
| flowCreation | Erstellt einen Cloud-Flow aus einer Vorlagen-ID, die von der Hostanwendung bereitgestellt wird. |
| runtime | Löst einen manuellen Flow oder einen hybrid ausgelösten Flow aus, der von der Hostanwendung bereitgestellt wird. |
| approvalCenter | Bettet Genehmigungsanforderungen und gesendete Genehmigungen ein. |
| templates | Zeigt eine Liste der Vorlagen an. Der Benutzer wählt eine Vorlage aus, um einen neuen Flow zu erstellen. |
Verwenden Sie das authentifizierte Flow SDK, um Benutzern das Erstellen und Verwalten von Flüssen direkt von Ihrer Website oder App zu ermöglichen (anstatt zu Power Automate zu navigieren). Sie müssen den Benutzer mit ihrem Microsoft-Konto anmelden oder Microsoft Entra, um das authentifizierte SDK zu verwenden.
Notiz
Es gibt keine Möglichkeit, das Power Automate Branding auszublenden, wenn Sie Widgets verwenden.
Architektur des Widget
Power Automate Widgets funktionieren, indem ein iFrame eingebettet wird, der auf Power Automate in eine Hostanwendung verweist. Der Host stellt das Zugriffstoken bereit, das vom Power Automate Widget benötigt wird. Mit dem JS SDK von Power Automate kann die Hostanwendung den Widgetlebenszyklus initialisieren und verwalten.
Details zum JS SDK
Das Power Automate Team stellt das JS SDK bereit, um die Integration von Flow-Widgets in Drittanbieteranwendungen zu erleichtern. Das Flow JS SDK ist als öffentlicher Link im Flow-Dienst verfügbar. Damit kann die Hostanwendung Ereignisse aus dem Widget verarbeiten und mit der Flow-Anwendung interagieren, indem es Aktionen an das Widget sendet. Widget-Ereignisse und -Aktionen richten sich nach dem Typ des Widget.
Initialisierung des Widget
Fügen Sie der Hostanwendung den Verweis auf die JS SDK vor der Initialisierung des Widgets hinzu.
<script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>
Notiz
- Die empfohlene Methode zum Einbinden des Flow JS SDK in Ihre Anwendung ist die Verwendung der obigen Referenz. Das Hinzufügen einer lokalen Kopie des Flow JS SDK zu Ihrer Anwendung oder Webseite kann dazu führen, dass Sie im Laufe der Zeit eine ältere, nicht unterstützte Version des SDK verwenden, was zu Funktionsunterbrechungen führt.
- Power Automate speichert einige Daten, z. B. Benutzeridentität und -einstellungen, lokal unter Nutzung Ihrer Browserfunktionen. Probleme treten auf, wenn der Browser die Speicherung solcher lokalen Daten blockiert oder Cookies von Drittanbietern, die von Power Automate festgelegt werden. Damit das Widget ordnungsgemäß geladen wird, müssen Benutzer Cookies von Drittanbietern in Ihrem Browser aktivieren.
Erstellen Sie eine JS SDK-Instanz, indem Sie Werte für die optionalen Parameter „hostName“ und „locale“ in einem JSON-Objekt übergeben.
var sdk = new MsFlowSdk({
hostName:'https://make.powerautomate.com',
locale:'en-US'
});
| Name | erforderlich/optional | Beschreibung |
|---|---|---|
hostName |
Optional | Power Automate Hostname, z. B. https://make.powerautomate.com |
locale |
Optional | Das Clientgebietsschema für das Widget (standardmäßig , wenn nicht angegeben) |
Nachdem die JS SDK-Instanz erstellt wurde, können Sie ein Power Automate Widget in ein übergeordnetes Element in der Hostanwendung initialisieren und einbetten. Fügen Sie hierzu ein HTML-div-Element hinzu:
<div id="flowDiv" class="flowContainer"></div>
Initialisieren Sie dann das Power Automate Widget mit der JS SDK-renderWidget()-Methode. Dazu müssen Sie den Typ des Widget und die entsprechenden Einstellungen angeben.
var widget = sdk.renderWidget('<widgettype>', {
container: 'flowDiv',
flowsSettings: {},
templatesSettings: {},
approvalCenterSettings: {},
widgetStyleSettings: {}
});
Passen Sie das folgende Beispiel für einen Container so an, dass er den Dimensionen der Hostanwendung entspricht.
<head>
<style>
.flowContainer iframe {
width: 400px;
height: 1000px;
border: none;
overflow: hidden;
}
</style>
</head>
Die folgende Tabelle enthält Parameter für :
| Parameter | erforderlich/optional | Beschreibung |
|---|---|---|
container |
Erforderlich | ID eines div-Elements auf der Hostseite, auf der das Widget eingebettet wird. |
environmentId |
Optional | Widgets benötigen eine Umgebungs-ID. Wenn Sie keine ID angeben, wird eine Standardumgebung verwendet. |
flowsSettings |
Optional | Power-Automate-Einstellungsobjekt |
templatesSettings |
Optional | Vorlageneinstellungsobjekt |
approvalCenterSettings |
Optional | Genehmigungseinstellungsobjekt |
Zugriffstoken
Nachdem das JS SDK renderWidget() ausgeführt wurde, initialisiert das JS SDK einen iframe, der auf die Power Automate Widget-URL verweist. Diese URL enthält in den Parametern der Abfragezeichenfolge alle Einstellungen. Die Hostanwendung muss ein Power Automate Zugriffstoken für den Benutzer abrufen (Microsoft Entra ID JWT-Token mit Zielgruppe https://service.flow.microsoft.com), bevor es das Widget initialisiert. Das Widget löst ein -Ereignis aus, um vom Host ein Zugriffstoken anzufordern. Der Host muss das Ereignis verarbeiten und das Token an das Widget übergeben:
widget.listen("GET_ACCESS_TOKEN", function(requestParam, widgetDoneCallback) {
widgetDoneCallback(null, {
token: '<accesstokenFromHost>'
});
});
Die Hostanwendung muss das Token verwalten und auf Anforderung mit einem gültigen Ablaufdatum an das Widget übergeben. Wenn das Widget für längere Zeit geöffnet ist, sollte der Host überprüfen, ob das Token noch gültig ist und es gegebenenfalls vor der Übergabe an das Widget aktualisieren.
Feststellen, ob das Widget bereit ist
Nach erfolgreicher Initialisierung löst das Widget ein Ereignis aus, um mitzuteilen, dass es bereit ist. Der Host kann auf das -Ereignis lauschen und einen beliebigen zusätzlichen Hostcode ausführen.
widget.listen("WIDGET_READY", function() {
console.log("The flow widget is now ready.");
// other host code on widget ready
});
Einstellungen des Widget
FlowsSettings
FlowsSettings können verwendet werden, um die Funktionalität des Power Automate Widgets anzupassen.
flowsSettings?: {
createFromBlankTemplateId?: string;
flowsFilter?: string;sc
tab?: string;
};
| Parameter | erforderlich/optional | Beschreibung |
|---|---|---|
createFromBlankTemplateId |
Erforderlich | Verwenden Sie die Vorlagen-GUID, wenn der Benutzer die Schaltfläche Ohne Vorlage neu erstellen für das Flow-Widget auswählt |
flowsFilter |
Optional | Das widget Power Automate wendet den bereitgestellten Filter beim Auflisten von Flüssen an. Zeigen Sie beispielsweise Flüsse an, die auf eine bestimmte SharePoint Website verweisen. flowsFilter: "operations/any(operation: operation/sharepoint.site eq 'https://microsoft.sharepoint.com/teams/ProcessSimple' )" |
tab |
Optional | Standardmäßig wird die aktive Registerkarte im Power Automate-Widget angezeigt. Zum Beispiel wird die Registerkarte „Team“ angezeigt und mit die Registerkarte „Meine Flows“. |
TemplatesSettings
Gilt für alle Widgets, mit der Flows aus einer Vorlage erstellt werden können, einschließlich der Widgets „Flows“, „FlowCreation“ und „Templates“.
templatesSettings?: {
defaultParams?: any;
destination?: string;
pageSize?: number;
searchTerm?: string;
templateCategory?: string;
useServerSideProvisioning?: boolean;
enableDietDesigner?: boolean;
};
| Parameter | erforderlich/optional | Beschreibung |
|---|---|---|
defaultParams |
Optional | Entwurfszeitparameter, die beim Erstellen eines Cloud-Flow aus einer Vorlage verwendet werden können, z.B.:defaultParams: {'parameters.sharepoint.site': 'https://microsoft.sharepoint.com/teams/ProcessSimple', 'parameters.sharepoint.list': '00001111-aaaa-2222-bbbb-3333cccc4444' } |
destination |
Optional | Gültige Werte sind „Neu“ und „Details“. Bei Festlegung auf „Details“ wird beim Erstellen eines Cloud-Flows aus einer Vorlage eine Detailseite angezeigt. |
pageSize |
Optional | Anzahl der Vorlagen, die angezeigt werden soll. Standardgröße = 6 |
searchTerm |
Optional | Zeigt Vorlagen an, die dem angegebenen Suchbegriff entsprechen |
templateCategory |
Optional | Zeigt Vorlagen in einer bestimmten Kategorie an |
ApprovalCenterSettings
Gilt für ApprovalCenter-Widgets.
approvalCenterSettings?: {
approvalsFilter?: string;
tab?: string;but
showSimpleEmptyPage? boolean;
hideLink?: boolean
};
| Parameter | erforderlich/optional | Beschreibung |
|---|---|---|
hideLink |
Optional | Bei Festlegung auf blendet das Widget die Links der empfangenen und gesendeten Genehmigungen aus |
approvalsFilter |
Optional | Das Widget für die Genehmigung wendet beim Auflisten der Genehmigungen den angegebenen Genehmigungsfilter an, z. B.:approvalsFilter: 'properties/itemlink eq \'https://microsoft.sharepoint.com/teams/ProcessSimple/_layouts/15/listform.aspx?PageType=4&ListId=737e30a6-5bc4-4e9c-bcdc-d34c5c57d938&ID=3&ContentTypeID=0x010010B708969A9C16408696FD23801531C6\'' approvalsFilter: 'properties/itemlinkencoded eq \'{Your base64 encoded item link url} \'' |
tab |
Optional | Standardmäßig wird die aktive Registerkarte im Flow-Widget angezeigt. Gültige Werte sind „receivedApprovals“ und „sentApprovals“ |
showSimpleEmptyPage |
Optional | Zeigt eine leere Seite an, wenn keine Genehmigungen vorhanden sind |
hideInfoPaneCloseButton |
Optional | Blendet die Schaltfläche „Schließen“ im Infofenster aus (oder der Host verfügt bereits über die Schaltfläche „Schließen“) |
Widget-Ereignisse
Das Power Automate Widget unterstützt Ereignisse, die dem Host das Lauschen auf Widget-Lebenszyklusereignisse ermöglichen. Das Power Automate Widget unterstützt zwei Arten von Ereignissen: Unidirektionale Benachrichtigungsereignisse (z. B. Widget_Ready) und Ereignisse, die vom Widget ausgelöst werden, um Daten vom Host abzurufen (Get_Access_Token). Der Host muss die Methode „widget.listen()“ verwenden, um auf bestimmte Ereignisse zu lauschen, die vom Widget ausgelöst wurden.
Verbrauch
widget.listen("<WIDGET_EVENT>", function() {
console.log("The flow widget raised event");
});
Unterstützte Ereignisse nach Typ des Widget
| Widget-Ereignis | Informationen |
|---|---|
WIDGET_READY |
Widget wurde erfolgreich geladen |
WIDGET_RENDERED |
Widget wurde geladen, und das Rendern der Benutzeroberfläche ist abgeschlossen |
GET_ACCESS_TOKEN |
Widgetanforderung für Embed-Benutzerzugriffstoken |
GET_STRINGS |
Ermöglicht dem Host, mehrere im Widget angezeigte UI-Zeichenfolgen zu überschreiben |
Runtime-Widget
| Widget-Ereignis | Informationen | Daten |
|---|---|---|
RUN_FLOW_STARTED |
Wurde ausgelöst, und die Flowausführung wurde gestartet | |
RUN_FLOW_COMPLETED |
Flowausführung wurde erfolgreich ausgelöst | |
RUN_FLOW_DONE_BUTTON_CLICKED |
Schaltfläche „Fertig“ wurde vom Benutzer bei der Flowausführung ausgewählt | |
RUN_FLOW_CANCEL_BUTTON_CLICKED |
Schaltfläche „Abbrechen“ wurde vom Benutzer bei der Flowausführung ausgewählt | |
FLOW_CREATION_SUCCEEDED |
Der Flow wurde erfolgreich erstellt | { flowUrl: string, flowId: string, fromTemplate: string } |
WIDGET_CLOSE |
Wird ausgelöst, wenn der Host das Widget schließen soll |
Widget zur Flow-Erstellung
| Widget-Ereignis | Informationen | Daten |
|---|---|---|
FLOW_CREATION_FAILED |
Fehler beim Erstellen des Flows | |
WIDGET_CLOSE |
Wird ausgelöst, wenn der Host das Widget schließen soll | |
TEMPLATE_LOAD_FAILED |
Fehler beim Laden der Vorlage | |
FLOW_CREATION_SUCCEEDED |
Der Flow wurde erfolgreich erstellt | { flowUrl: string, flowId: string,fromTemplate?: string } |
Widget für die Genehmigung
| Widget-Ereignis | Informationen |
|---|---|
RECEIVED_APPROVAL_STATUS_CHANGED |
Status der empfangenen Genehmigungen hat sich geändert |
SENT_APPROVAL_STATUS_CHANGED |
Status der gesendeten Genehmigungen hat sich geändert |
GET_STRINGS Ereignis lässt Sie den Text für einige der im Widget angezeigten Benutzeroberflächen-Elemente anpassen. Die folgenden Zeichenfolgen können angepasst werden:
| Zeichenfolgenschlüssel | Verwendung im Widget |
|---|---|
FLOW_CREATION_CREATE_BUTTON |
Text, der auf der Schaltfläche „Flow erstellen“ im Widget zur Flow-Erstellung und im Widget für die Laufzeit angezeigt wird |
FLOW_CREATION_CUSTOM_FLOW_NAME |
Anfangswert für den Flownamen im Widget zur Flow-Erstellung. Wird nur verwendet, wenn die Einstellung „allowCustomFlowName“ aktiviert ist. |
FLOW_CREATION_HEADER |
Header für die Erstellung eines Cloud-Flows im Widget zur Flow-Erstellung und im Widget für die Laufzeit. |
INVOKE_FLOW_HEADER |
Header für den Aufruf eines Cloud-Flows im Widget für die Laufzeit. |
INVOKE_FLOW_RUN_FLOW_BUTTON |
Text, der auf der Schaltfläche zum Aufrufen/Ausführen eines Cloud-Flows im Widget für die Laufzeit angezeigt wird. |
Beispiel
Rufen Sie auf, indem Sie ein JSON-Objekt mit Schlüssel-Wert-Paaren aus Zeichenfolgenschlüssel und Text übergeben, um den Standardwert zu überschreiben.
widget.listen("GET_STRINGS", function(requestParam, widgetDoneCallback) {
widgetDoneCallback(null, {
"FLOW_CREATION_HEADER": "<string override would go here>",
"INVOKE_FLOW_RUN_FLOW_BUTTON": "<string override would go here>"
});
});
Widget-Aktionen
Widget-Aktionen ermöglichen dem Host, eine bestimmte Aktion oder Nachricht an das Widget zu senden. Das JS SDK des Widgets stellt die -Methode bereit, um eine Nachricht oder JSON-Nutzlast an das Widget zu senden. Jede Widget-Aktion unterstützt eine bestimmte Nutzlastsignatur.
Verbrauch
widget.notify('<WIDGET_ACTION>', parameterMatchingParameterInterface)
.then(result => console.log(result))
.catch(error => console.log(error))
Beispiel
Rufen Sie einen Cloud-Flow auf, indem Sie den folgenden Befehl an ein Widget für die Laufzeit senden:
widget.notify('triggerFlow', { flowName: flowName, implicitData:implicitData });
Runtime-Widget
| Widget-Aktion | Informationen | Parameterschnittstelle |
|---|---|---|
triggerFlow |
Löst eine Cloud-Flowausführung aus | { flowName: string, implicitData?: string } |
triggerFlowByTemplate |
Löst eine Cloud-Flowausführung nach Vorlage aus. | { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> } |
getTriggerSchema |
Ruft ein Triggerschema für einen Cloud-Flow ab. | { flowName: string, } |
closeWidget |
Bricht alle ausstehenden Aktivitäten ab und löst ein WIDGET_CLOSE-Ereignis aus |
Widget zur Flow-Erstellung
| Widget-Aktion | Informationen | Parameterschnittstelle |
|---|---|---|
createFlowFromTemplate |
Erstellt einen Cloud-Flow für die ausgewählte Vorlagendefinition. | { templateName: string, designTimeParameters?: Record<string, any> } |
createFlowFromTemplateDefinition |
Erstellt einen Cloud-Flow für die ausgewählte Vorlagendefinition. | { templateDefinition: string } |
closeWidget |
Bricht alle ausstehenden Aktivitäten ab und löst ein WIDGET_CLOSE-Ereignis aus |
Widget für die Genehmigung
| Widget-Aktion | Informationen | Parameterschnittstelle |
|---|---|---|
closeInfoPane |
Schließt die im Infofenster angezeigten Genehmigungsdetails | Nicht zutreffend |
Konfigurieren der Clientanwendung
Konfigurieren Sie zunächst Ihre Clientanwendung mit den Bereichen des Flow-Diensts (delegierte Berechtigungen). Wenn die für die Widgetintegration verwendete Microsoft Entra-App (Microsoft Entra ID) einen Autorisierungsfluss für die Codeerteilung verwendet, muss die Microsoft Entra-App mit delegierten Berechtigungen vorkonfiguriert werden, die von Power Automate unterstützt werden. Mit den hierbei bereitgestellten delegierten Berechtigungen kann die Anwendung:
- Genehmigungen verwalten
- Genehmigungen lesen
- Aktivitäten lesen
- Flows verwalten
- Flows lesen
Mit den folgenden Schritten können Sie eine oder mehrere delegierte Berechtigungen auswählen:
- Zu wechseln
- Wählen Sie Microsoft Entra ID aus.
- Wählen Sie App registrations unter Manage aus.
- Geben Sie die Drittanbieteranwendung ein, die für die Bereiche des Flow-Diensts konfiguriert werden soll.
- Wählen Sie Einstellungen aus. 
- Wählen Sie Erforderliche Berechtigungen unter API-Zugriff
- Wählen Sie Hinzufügen.
- Wählen Sie API auswählen aus. 
- Suchen Sie nach Power Automate Service und wählen Sie ihn aus. Hinweis: Bevor Sie den Power Automate-Dienst sehen können, muss Ihr Mandant mindestens einen Microsoft Entra-Benutzer beim Flow-Portal angemeldet haben (https://make.powerautomate.com)
- Wählen Sie die für Ihre Anwendung erforderlichen Flow-Bereiche aus, und klicken Sie dann auf Speichern. ! [Screenshot der delegierten Berechtigungen.](.. /media/embed-flow-dev/Microsoft Entra ID-App-DelegatedPermissions.png)
Ihre Anwendung erhält nun ein Flow-Diensttoken mit delegierten Berechtigungen im SCP-Anspruch im JWT-Token.
Beispielanwendung zum Einbetten von Flow-Widgets
Der Ressourcenabschnitt enthält ein Beispiel für eine Single-Page-Webanwendung (SPA) für JavaScript. Damit können Sie Erfahrungen mit dem Einbetten von Flow-Widgets in eine Hostseite sammeln. Für die Verwendung der Beispielanwendung ist die Registrierung einer Microsoft Entra-Anwendung mit aktiviertem implizierten Genehmigungsfluss erforderlich.
Registrieren einer Microsoft Entra-App
- Melden Sie sich beim portal Azure an.
- Wählen Sie im linken Navigationsbereich Microsoft Entra und dann App registrations (Vorschau) > Neue Registrierung aus.
- Geben Sie auf der Seite Anwendung registrieren einen Namen für Ihre Anwendung ein.
- Klicken Sie unter Unterstützte Kontotypen in einem beliebigen Organisationsverzeichnis auf Konten.
- Wählen Sie im Abschnitt Umleitungs-URL die Webplattform aus, und legen Sie den Wert für die URL der Anwendung auf Ihrem Webserver fest. Konfigurieren Sie diesen Wert auf , um die Beispiel-App auszuführen.
- Wählen Sie Registrieren aus.
- Notieren Sie sich den Wert der Anwendungs-ID (Client-ID) auf der Übersichts-Seite der App.
- Für das Beispiel muss der Flow zur impliziten Genehmigung aktiviert sein. Wählen Sie im linken Navigationsbereich der registrierten Anwendung die Option Authentifizierung aus.
- Aktivieren Sie in den Erweiterten Einstellungen unter Implizite Genehmigung die beiden Kontrollkästchen bei ID-Token und Zugriffstoken. ID-Token und Zugriffstoken sind erforderlich, da die App Benutzer anmeldet und die Flow-API aufruft.
- Wählen Sie Speichern aus.
Ausführen des Beispiels
- Laden Sie das Beispiel herunter, und kopieren Sie es in einen lokalen Ordner auf Ihrem Gerät.
- Öffnen Sie im Ordner „FlowSDKSample“ die Datei „index.html“, und ändern Sie so ab, dass auf die Anwendungs-ID aktualisiert wird, die Sie zuvor registriert haben. Screenshot der Indexpunkt-HTML-Datei, die die Client-ID lokalisiert.
- Die Beispiel-App ist so konfiguriert, dass sie die Flow-Bereiche Flows.Read.All und Flow.Manage.All verwendet. Sie können zusätzliche Bereiche konfigurieren, indem Sie die Eigenschaft flowScopes im Objekt applicationConfig aktualisieren.
- Führen Sie diese Befehle zum Installieren der Abhängigkeit und zum Ausführen der Beispiel-App aus:
npm install Knoten server.js
- Öffnen Sie den Browser, und geben Sie ein
- Wählen Sie die Schaltfläche Sign in aus, um sich bei Microsoft Entra zu authentifizieren und ein Cloud Flow-Zugriffstoken abzurufen.
- Das Textfeld Zugriffstoken enthält das Zugriffstoken. Screenshot, der die Box Zugriffstoken zeigt, die ein Zugriffstoken enthält.
- Klicken Sie auf Flows-Widget laden oder auf Vorlagen-Widget laden, um die entsprechenden Widgets einzubetten. Screenshot mit Schaltflächen zum Einbetten des „Flows laden“-Widgets oder des „Vorlage laden“-Widgets.
Ressource
Widget-Testseiten
Auf den folgenden Seiten finden Sie Informationen zur Integration des Widget und zu Einstellungen des Widget:
- Widget-Vorlagen:
- FlowCreation-Widget:
- Runtime-Widget:
- Genehmigungscenter-Widget:
- Flows-Widget:
Unterstützte Widgetgebietsschemas
Wird das initialisierte Gebietsschema nicht aufgeführt, verwendet Flow standardmäßig das nächstgelegene unterstützte Gebietsschema.
| Standort | Language |
|---|---|
| bg-bg | Bulgarisch (Bulgarien) |
| ca-es | Katalanisch (Katalanisch) |
| cs-cz | Tschechisch (Tschechische Republik) |
| da-dk | Dänisch (Dänemark) |
| de-de | Deutsch (Deutschland) |
| el-gr | Griechisch (Griechenland) |
| en-US | Englisch (Vereinigte Staaten) |
| es-es | Spanisch (Kastilisch) |
| et-ee | Estnisch (Estland) |
| eu-es | Baskisch (Baskenland) |
| fi-fi | Finnisch (Finnland) |
| fr-fr | Französisch (Frankreich) |
| gl-es | Galizisch (Galizisch) |
| hi-HU | Ungarisch (Ungarn) |
| hi-in | Hindi (Indien) |
| hr-hr | Kroatisch (Kroatien) |
| id-id | Indonesisch (Indonesien) |
| it-it | Italienisch (Italien) |
| jp-JP | Japanisch (Japan) |
| kk-kz | Kasachisch (Kasachstan) |
| ko-kr | Koreanisch (Korea) |
| lt-LT | Litauisch (Litauen) |
| lv-lv | Lettisch (Lettland) |
| ms-my | Malaiisch (Malaysia) |
| nb-no | Norwegisch (Bokmål) |
| nl-nl | Niederländisch (Niederlande) |
| pl-pl | Polnisch (Polen) |
| pt-br | Portugiesisch (Brasilien) |
| pt-pt | Portugiesisch (Portugal) |
| ro-ro | Rumänisch (Rumänien) |
| ru-ru | Russisch (Russland) |
| sk-sk | Slowakisch (Slowakei) |
| sl-si | Slowenisch (Slowenien) |
| sr-cyrl-rs | Serbisch (Kyrillisch, Serbien) |
| sr-latn-rs | Serbisch (Lateinisch, Serbien) |
| sv-se | Schwedisch (Schweden) |
| th-th | Thailändisch (Thailand) |
| tr-tr | Türkisch (Türkei) |
| uk-ua | Ukrainisch (Ukraine) |
| vi-vn | Vietnamesisch (Vietnam) |
Die Verwendung des Power Automate Embed SDK wird unter die Microsoft-Software-Lizenzbedingungen behandelt.