A Power Automate integrálása webhelyekkel és alkalmazásokkal

A Power Automate szolgáltatást a folyamat-widgetek használatával közvetlenül alkalmazásába vagy webhelyébe ágyazhatja be, hogy megkönnyítse a felhasználók számára személyes vagy szakmai feladataik automatizálását.

A Flow-vezérlők a gazdadokumentumokban található iframe-ek. Ez a dokumentum a Power Automate tervezőjében található egyik oldalra mutat. A widgetek meghatározott Power Automate-funkciókat integrálnak külső alkalmazásokba.

A vezérlők egyszerűek is lehetnek. Van például olyan, amelyik sablonokat jelenít meg, miközben nem történik kommunikáció a gazdaszámítógép és az iframe között. Vannak azonban összetettebb vezérlők is. Van olyan widget, amelyik kiépít egy felhőfolyamatot egy sablonból, majd elindítja a folyamatot a gazda és a widget közötti kétirányú kommunikációval.

Előfeltételek

• Microsoft-fiók vagy
• Munkahelyi vagy iskolai fiók

A nem hitelesített vezérlő használata

A nem hitelesített sablonok vezérlő használatához egy iframe használatával ágyazza be a vezérlőt közvetlenül a gazdaalkalmazásba. Nincs szükség a JS SDK-ra vagy hozzáférési jogkivonatra.

A forgatókönyvek sablonjainak megjelenítése

Először adja hozzá ezt a kódot, hogy közvetlenül jeleníthesse meg a Power Automate-sablonokat a webhelyen:

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

Ha a célparaméter new, a Power Automate tervezője akkor nyílik meg, ha a felhasználó kiválaszt egy sablont. A felhasználó ekkor létrehozhat egy felhőfolyamatot a tervezőben. A vezérlő teljes kihasználásáról a következő szakaszban olvashat.

További paraméterek átadása a folyamatsablonnak

Ha a felhasználó egy bizonyos környezetben van a webhelyen vagy az alkalmazásban, akkor érdemes lehet átadni a környezetet a folyamatnak. Előfordulhat például, hogy a felhasználó megnyit egy sablont az Elem létrehozásakor eseményindítóhoz, amikor megtekint egy adott listát a SharePoint alkalmazásban. A következő lépésekkel adhatja át a listaazonosítót paraméterként a folyamatnak:

1. Mielőtt közzéteszi, adja meg a paramétert a folyamat sablonjában. A paraméter a következőképpen néz ki: @{parameters('parameter_name')}.
2. Adja át az iframe src lekérdezési sztringjében lévő paramétert. Például adja hozzá a &parameters.listName={the name of the list} kifejezést, ha van listName nevű paramétere.

Teljes minta

A négy legfontosabb SharePoint-sablon német nyelvű megjelenítése és a felhasználó myCoolList névvel való megjelenítése az alábbi kóddal lehetséges:

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

A hitelesített Flow-vezérlők használata

Az alábbi táblázatban azok a Power Automate-widgetek láthatóak, amelyek támogatják a widgetek teljes funkcionalitását felhasználói hitelesítési hozzáférési jogkivonatok használatával. A widgetek beágyazásához és a kívánt felhasználói hozzáférési jogkivonatok beszerzéséhez a Power Automate Javascript Software Developer Kit (JS SDK) használatára lesz szüksége.

Használja a hitelesített Flow SDK-t, hogy lehetővé tegye a felhasználóknak a folyamatok létrehozását és kezelését közvetlenül a webhelyéről vagy az alkalmazásából (a Power Automate-re történő navigálás helyett). A hitelesített SDK használatához be kell jelentkeztetni a felhasználót a Microsoft-fiókjukkal vagy az Azure Active Directory használatával.

A vezérlő architektúrája

A Power Automate widgetjeit olyan iframe-ek beágyazásával lehet használni, amelyek a Power Automate-re hivatkoznak egy gazdaalkalmazásban. A Power Automate-widgethez szükséges hozzáférési jogkivonatot a gazdaalkalmazás teszi elérhetővé. A Power Automate JS SDK-ja lehetővé teszi, hogy a gazdaalkalmazás inicializálja és kezelje a widget életciklusát.

A JS SDK részletei

A Power Automate csapata által kínált JS SDK használatával integrálhatók a Flow-widgetek külső alkalmazásokban is. A Flow JS SDK nyilvános hivatkozásként érhető el a Flow szolgáltatásban, és lehetővé teszi, hogy a gazdaalkalmazás kezelje a vezérlőből származó eseményeket, és interakcióba lépjen a Flow-alkalmazással úgy, hogy műveleteket küld a vezérlőnek. A vezérlő eseményei és műveletei a vezérlő típusára jellemzőek.

A vezérlő inicializálása

A vezérlő inicializálása előtt a gazdaalkalmazásban hivatkozást kell elhelyezni a Flow JS SDK-ra.

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

JS SDK-példányt úgy hozhat létre, ha opcionális hostName és területi beállítási értékeket ad át egy JSON-objektumnak.

var sdk = new MsFlowSdk({
    hostName:'https://flow.microsoft.com',
    locale:'en-US'
}); 

Ha már létrehozta a JS SDK-példányt, inicializálhat és beágyazhat egy Power Automate-widgetet egy szülőelembe a gazdaalkalmazásban. Ehhez adjon hozzá egy HTML div elemet:

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

Ezután inicializálja a Power Automate-widgetet a JS SDK renderWidget() metódusával. Ügyeljen rá, hogy meg kell adnia a vezérlő típusát és a vonatkozó beállításokat is.

var widget = sdk.renderWidget('<widgettype>', {
        container: 'flowDiv',
        flowsSettings: {},
        templatesSettings: {},
        approvalCenterSettings: {},
        widgetStyleSettings: {}
});

Az alábbi példa a tárolóstílust mutatja be; ezt a gazdaalkalmazás dimenzióinak megfelelően módosíthatja.

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

A renderWidget() paraméterei a következők:

Hozzáférési jogkivonatok

Miután lefutott a JS SDK renderWidget(), a JS SDK inicializálja egy iframe-et, amely a Power Automate-widget URL-címére mutat. Ez az URL tartalmazza a lekérdezési sztring paramétereinek összes beállítását. A gazdaalkalmazásnak be kell szereznie egy Power Automate hozzáférési token a felhasználó számára (Azure Active Directory JWT-jogkivonat célközönség https://service.flow.microsoft.com), mielőtt inicializálná a vezérlő. A vezérlő egy GET_ACCESS_TOKEN eseményt indít, hogy lekérje a hozzáférési jogkivonatot a gazdaalkalmazástól. A gazdaalkalmazásnak kezelnie kell az eseményt, és át kell adnia a jogkivonatot a vezérlőnek:

widget.listen("GET_ACCESS_TOKEN", function(requestParam, widgetDoneCallback) {
    widgetDoneCallback(null, {
        token:  '<accesstokenFromHost>'
    });
});

A gazdaalkalmazás feladata, hogy kezelje a jogkivonatot, és hogy átadja érvényes lejárati dátummal, ha a vezérlő kéri. Ha a vezérlő hosszabb ideig meg van nyitva, a gazdaalkalmazásnak ellenőriznie kell, hogy lejárt-e a jogkivonat, és szükség esetén frissíteni kell, mielőtt átadná a vezérlőnek.

A vezérlő készenléti állapotának ellenőrzése

A sikeres inicializálás után a vezérlő egy olyan eseményt vált ki, amely értesítést küld arról, hogy a vezérlő készen áll. A gazdaalkalmazás figyelheti a WIDGET_READY eseményt, és további gazdakódot hajt végre.

widget.listen("WIDGET_READY", function() {
    console.log("The flow widget is now ready.");
    // other host code on widget ready
});

A vezérlő beállításai

FlowsSettings

A FlowsSettings használatával testre szabható a Power Automate-widget működése.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};

TemplatesSettings

Ez minden olyan vezérlőre érvényes, amellyel sablon alapján lehet folyamatot létrehozni – többek között a Flows, a FlowCreation és a Templates vezérlőre.

templatesSettings?: {
    defaultParams?: any;
    destination?: string;
    pageSize?: number;
    searchTerm?: string;
    templateCategory?: string;
    useServerSideProvisioning?: boolean;
    enableDietDesigner?: boolean;
};

ApprovalCenterSettings

Az ApprovalCenter vezérlőkre vonatkozik.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};

Vezérlő eseményei

A Power Automate-widget támogatja az olyan eseményeket, amelyekkel a gazdaalkalmazás figyelheti a widget életciklus-eseményeit. A Power Automate-widget kétféle eseményt támogat: egyirányú értesítési események (például Widget_Ready), valamint a widgetből kiváltott események a gazdaalkalmazásból érkező adatok fogadására (Get_Access_Token). A gazdaalkalmazásnak a widget.listen() metódust kell használnia a vezérlőből kiváltott meghatározott események figyelésére.

Használat

widget.listen("<WIDGET_EVENT>", function() {
    console.log("The flow widget raised event");
});

Támogatott események vezérlőtípus szerint

Futásidejű vezérlő

Folyamatlétrehozási vezérlő

Jóváhagyási vezérlő

A GET_STRINGS eseménnyel testre szabhatók a vezérlő bizonyos felhasználói felületein megjelenő szövegrészek. Az alábbi sztringeket lehet testre szabni:

Példa

A widgetDoneCallback meghívása a sztringkulcs kulcs-érték párjait tartalmazó JSON-objektum átadásával, az alapértelmezett érték felülbírálására.

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>"
    });
});

Vezérlő műveletei

A gazdaszámítógép vezérlők műveleteivel küld meghatározott műveleteket vagy üzeneteket a vezérlőnek. A JS SDK vezérlő a notify() metódus biztosításával küld üzenetet vagy hasznos JSON-adatot a vezérlőnek. Minden vezérlőművelet egy meghatározott hasznosadat-aláírást támogat.

Felhasználás

widget.notify('<WIDGET_ACTION>', parameterMatchingParameterInterface)
    .then(result => console.log(result))
    .catch(error => console.log(error))

Példa

Felhőfolyamatot hívhat meg az alábbi parancs futásidejű widgetnek való elküldésével

widget.notify('triggerFlow', { flowName: flowName, implicitData:implicitData });  

Futásidejű vezérlő

Folyamatlétrehozási vezérlő

Jóváhagyási vezérlő

Ügyfélalkalmazás konfigurálása

Az ügyfélalkalmazást Flow-szolgáltatási hatókörökkel (delegált engedélyekkel) kell konfigurálni. Ha a widgetintegrációhoz használt Azure Active Directory (AAD) alkalmazás „kódbiztosítási” engedélyezési folyamatot használ, az AAD-alkalmazást olyan delegált engedélyekkel kell előre konfigurálni, amelyeket támogat a Power Automate. Ez olyan delegált engedélyeket biztosít, amelyek lehetővé teszik az alkalmazásnak az alábbiakat:

• Jóváhagyások kezelése
• Jóváhagyások olvasása
• Tevékenységek olvasása
• Folyamatok kezelése
• Folyamatok olvasása

Egy vagy több delegált engedély kiválasztásához kövesse az alábbi lépéseket:

1. https://portal.azure.com megnyitása
2. Válassza a(z) Azure Active Directory beállítást.
3. A Kezelés területen válassza az Alkalmazásregisztrációk lehetőséget.
4. Adja meg a Flow-szolgáltatási hatókörökhöz konfigurálni kívánt külső alkalmazást.
5. Válassza a Beállítások lehetőséget.
6. Az API-hozzáférés/ területen válassza a Szükséges engedélyek lehetőséget.
7. Válassza a Hozzáadás lehetőséget.
8. Válassza az API kiválasztása elemet.
9. Keressen meg és jelöljön ki egy Power Automate szolgáltatást. Megjegyzés: Ahhoz, hogy megjelenjen a Power Automate szolgáltatás, az szükséges, hogy a bérlőben legyen legalább egy felhasználó, aki bejelentkezett a Flow portálon (https://flow.microsoft.com)
10. Válassza ki az alkalmazáshoz szükséges Flow-hatóköröket, majd válassza a Mentés lehetőséget.

Az alkalmazás most lekér egy Flow-szolgáltatási jogkivonatot, amely delegált engedélyeket tartalmaz a JWT-jogkivonatban, az 'scp' jogcímben.

Flow-vezérlőket beágyazó mintaalkalmazás

Az erőforrások szakaszában található egy olyan egyoldalas (SPA) JavaScript-mintaalkalmazás, amellyel kísérletezhet, és kipróbálhatja, hogyan ágyazható be folyamatvezérlő a gazdaoldalakon. A mintaalkalmazás használatához regisztrálni kell egy AAD-alkalmazást, és engedélyezni kell az implicit engedély folyamatot.

AAD-alkalmazás regisztrálása

1. Jelentkezzen be az Azure portálba.
2. A bal oldali navigációs panelen válassza az Azure Active Directory, majd az Alkalmazásregisztrációk (Előzetes verzió) > Új regisztráció lehetőséget.
3. Ha megjelenik az Alkalmazás regisztrálása oldal, adjon nevet az alkalmazásnak.
4. A Támogatott fióktípusok területen válassza a Fiókok elemet bármely szervezeti címtárban.
5. Az Átirányítási URL-cím szakaszban válassza ki a webes platformot, az értékét pedig állítsa az alkalmazás URL-címére a webkiszolgálójának megfelelően. Ezt az értéket állítsa a http://localhost:30662/ címre a mintaalkalmazás futtatásához.
6. Válassza a Regisztrálás lehetőséget.
7. Az alkalmazás Áttekintés oldalán jegyezze le az alkalmazás (ügyfél) azonosítójának értékét.
8. A mintánál implicit engedély folyamatra van szükség az engedélyezéshez. A regisztrált alkalmazás bal oldali navigációs paneljén válassza a Hitelesítés lehetőséget.
9. Az Implicit engedélyek területen, a Speciális beállítások között jelölje be mind az Azonosító-jogkivonatok, mind a Hozzáférési jogkivonatok jelölőnégyzetet. Mind az azonosító-jogkivonatokra, mind a hozzáférési jogkivonatokra szükség van, mert ez az alkalmazás felhasználókat fog bejelentkeztetni, és Flow API-kat fog meghívni.
10. Válassza a Mentés parancsot.

A minta futtatása

1. Töltse le a mintát, és mentse a helyi eszköz egyik mappájába.
2. A FlowSDKSample mappában nyissa meg az index.html fájlt, és módosítsa az applicationConfig szakaszban a clientID értékét a korábban regisztrált alkalmazásazonosítóra.
3. A mintaalkalmazás a Flows.Read.All és a Flow.Manage.All Flow-hatókörök használatára van konfigurálva. További hatóköröket is konfigurálhat, ha frissíti a flowScopes tulajdonságot az applicationConfig objektumban.
4. A következő parancsok futtatásával telepítheti a függőséget, és futtathatja az alkalmazást:

   > npm install > node server.js

5. Nyissa meg a böngészőt, és írja be a http://localhost:30662 címet
6. Válassza a Bejelentkezés gombot, hogy hitelesítést végezhessen az AAD-vel, és lekérhesse a felhőfolyamat hozzáférési jogkivonatát.
7. A hozzáférési jogkivonat a Hozzáférési jogkivonat szövegmezőben található.
8. A megfelelő vezérlők beágyazásához válassza a Folyamatok betöltése vezérlő vagy a Sablonok betöltése vezérlő lehetőséget.

Mintaalkalmazás letöltési hivatkozása.

Erőforrások

Vezérlő tesztelési oldalai

További integráció a vezérlő integrációjáról és beállításairól:

• Sablonok vezérlő: <https://flow.microsoft.com/test/templateswidget/>
• FlowCreation vezérlő: <https://flow.microsoft.com/test/flowcreationwidget/>
• Futásidejű vezérlő: <https://flow.microsoft.com/test/runtimewidget/>
• Jóváhagyási központ vezérlő: <https://flow.microsoft.com/test/approvalcenterwidget/>
• Folyamatok vezérlő: <https://flow.microsoft.com/test/managewidget/>

Vezérlők támogatott területi beállításai

Ha az inicializált területi beállítás nincs felsorolva, a Flow alapértelmezettként a legközelebbi támogatott területi beállítást fogja használni.

Az Embed SDK használatára a Power Automate Microsoft szoftverlicenc-szerződése vonatkozik.