Integrieren von Microsoft Flow in Websites und Apps

Betten Sie Microsoft Flow direkt in Ihre App oder Website ein, um Benutzern die einfache Möglichkeit zu bieten, ihre persönlichen oder beruflichen Aufgaben zu automatisieren.

Um Flows zu erstellen, benötigen Benutzer entweder ein Microsoft-Konto oder ein Geschäfts- oder Schulkonto in Azure Active Directory. Microsoft Flow unterstützt beispielsweise keine Whitelabellösung, die beliebige von Ihrem System verwendete Identitäten unterstützt (es sei denn, es werden bereits Microsoft-Konten oder AAD verwendet).

Voraussetzungen

Anzeigen von Vorlagen für Ihre Szenarien

Fügen Sie zum Einstieg diesen Code hinzu, um die Flowvorlagen direkt auf Ihrer Website anzuzeigen:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}"></iframe>

Hinweis: Wir haben einen Zeilenumbruch hinzugefügt, damit der Code auf der Seite besser angezeigt wird.

Parameter Beschreibung
locale Der aus vier Buchstaben bestehende Sprach- und Regionscode für die Vorlagenansicht. en-us gibt beispielsweise Englisch (US) und de-de gibt Deutsch an.
search term Der Suchbegriff für die Vorlagen, die Sie in der Ansicht anzeigen möchten. Suchen Sie z.B. nach wunderlist, um Vorlagen für Wunderlist anzuzeigen.
number of templates Die Anzahl der Vorlagen, die in der Ansicht angezeigt werden sollen.
destination Die Seite, die geöffnet wird, wenn Benutzer auf die Vorlage klicken. Geben Sie details an, um die Details zur Vorlage anzuzeigen, oder geben Sie new an, um den Microsoft Flow-Designer zu öffnen.
parameters.{Name} Zusätzlicher Kontext, der in den Flow übergeben werden soll.

Wenn der Zielparameter new lautet, wird Microsoft Flow geöffnet, wenn Benutzer auf eine Vorlage klicken, und die Benutzer können einen Flow im Designer erstellen. Wenn die komplette Benutzeroberfläche innerhalb der App enthalten sein soll, finden Sie weitere Informationen im nächsten Abschnitt.

Übergeben zusätzlicher Parameter an den Flow

Wenn der Benutzer sich in einem bestimmten Kontext auf der Website oder in der App befindet, empfiehlt es sich, diesen Kontext an den Flow zu übergeben. Beispielsweise kann ein Benutzer eine Vorlage für Benachrichtigen, wenn einer Liste ein Eintrag hinzugefügt wird öffnen, wenn eine bestimmte Liste in Wunderlist angezeigt wird. Durch Ausführen dieser Schritte können Sie die Listen-ID als Parameter an den Flow übergeben:

  1. Definieren Sie den Parameter in der Flowvorlage, bevor Sie diese veröffentlichen. Ein Parameter sieht wie folgt aus: @{parameters('parameter_name')}.
  2. Übergeben Sie den Parameter in „iframe src“. Fügen Sie beispielsweise &parameters.listName={the name of the list} hinzu, wenn Sie über den Parameter listName verfügen.

Vollständiges Beispiel

So zeigen Sie die obersten vier Vorlagen für Wunderlist auf Deutsch an, und der Benutzer startet mit myCoolList:

<iframe src="https://flow.microsoft.com/de-de/widgets/templates/?q=wunderlist
&pagesize=4&destination=details&parameters.listName=myCoolList"></iframe>

Einbetten der Verwaltung von Flows

Verwenden Sie das authentifizierte Flow-SDK, um Benutzern das Erstellen und Verwalten von Flows direkt auf Ihrer Website oder in der App zu ermöglichen (sodass kein Wechsel zum Microsoft Flow-Portal erforderlich ist). Sie müssen den Benutzer beim Microsoft-Konto bzw. bei Azure Active Directory anmelden, damit das authentifizierte SDK verwendet werden kann.

Hinweis

Alle Benutzer, die Microsoft Flow in Ihrer Anwendung verwenden, sind Microsoft Flow-Benutzer. Es ist nicht möglich, das Microsoft Flow-Branding auszublenden.

Einschließen des JavaScript-Codes für das authentifizierte SDK

Schließen Sie das SDK in Ihren HTML-Code ein, und orientieren Sie sich dabei an diesem Beispiel. Sie können das SDK auch zusammen mit dem Produkt herunterladen, minimieren und verpacken.

<script src="https://flow.microsoft.com/content/msflowsdk-1.1.js" async defer></script>

Erstellen eines Containers, der die Ansicht enthält

Fügen Sie ein HTML-div-Element hinzu:

<div id="flowDiv" class="flowContainer"></div>

Es wird empfohlen, dass Sie diesen Container formatieren, damit er mit den entsprechenden Abmessungen in der Oberfläche angezeigt wird:

<head>
    <style>
        .flowContainer iframe {
            width: 400px;
            height: 1000px;
            border: none;
            overflow: hidden;
    }
    </style>
</head>

Beachten Sie, dass iframe bei einer Breite von weniger als 320 Pixel nicht ordnungsgemäß gerendert wird, und Inhalte von mehr als 1200 Pixel Breite werden nicht gefüllt. In Bezug auf die Höhe gibt es keine Einschränkungen.

Authentifizierung mit dem SDK

Geben Sie zum Auflisten der vom Benutzer bereits erstellten Flows und zum Erstellen von Flows auf der Grundlage von Vorlagen ein authToken aus AAD an.

<script>
    window.msFlowSdkLoaded = function() {
        var sdk = new MsFlowSdk({
            hostName:'https:/flow.microsoft.com'
        });
        var widget = sdk.renderWidget('flows', {
            container: 'flowDiv'
            environmentId: '[environmentId]'    // find environment id from browser URL when you 
                                                // click on 'my flows'
                                                //ex: https://flow.microsoft.com/manage/environments/[environmentId]/flows
        });
        widget.callbacks.GET_ACCESS_TOKEN = function(requestParam, widgetDoneCallback)
       {
            var authCallback = function(token) {
                widgetDoneCallback(null, {
                    token: token // Get AAD access token from your backend system
                });
            };
        }
    }
</script>

Sie können die environmentId mithilfe des folgenden API-Aufrufs ermitteln, der die Liste der Umgebungen zurückgibt, auf die der Benutzer zugreifen kann.

GET https://management.azure.com/providers/Microsoft.ProcessSimple/environments
?api-version=2016-11-01 

Zurückgegeben wird eine JSON-Antwort mit der Liste der Umgebungen, von denen Sie eine beliebige auswählen können. Sie können die Standardbenutzerumgebung finden, indem Sie die Eigenschaft properties.isDefault=true überprüfen.

In diesem Beispiel ist requestParam wie folgt definiert:

export interface IRpcRequestParam {
    callInfo: IRpcCallInfo,
    data?: any;
}

widgetDoneCallback ist eine Rückruffunktion, die aufgerufen werden muss, sobald der Host über das Token verfügt. Dies ist erforderlich, da der Tokenabruf in der Regel asynchron erfolgt. Die Parameter, die beim Aufrufen dieser Funktion übergeben werden müssen, sind (errorResult: any, successResult: any). successResult hängt vom Rückruftyp ab. Für GetAccessToken ist der Typ:

export interface IGetAccessTokenResult {
    token: string;
}