Integrácia služby Power Automate s webovými lokalitami a aplikáciami

Vložte službu Power Automate do aplikácie alebo na webovú lokalitu pomocou miniaplikácie služby Flow, aby používatelia získali jednoduchú možnosť automatizácie osobných a pracovných úloh.

Miniaplikácie služby Flow sú prvky iframe umiestnené v dokumente hostiteľa. Tento dokument odkazuje na stránku v návrhárovi Power Automate. Tieto miniaplikácie integrujú konkrétne funkcie služby Power Automate do aplikácie tretích strán.

Miniaplikácie môžu byť jednoduché. Príkladom môže byť miniaplikácia, ktorá vykresľuje zoznam šablón bez komunikácie medzi hostiteľom a prvkom iframe. Miniaplikácie môžu byť aj komplexné. Príkladom môže byť miniaplikácia, ktorá obstaráva postup v cloude zo šablóny a potom aktivuje postup prostredníctvom obojsmernej komunikácie medzi hostiteľom a miniaplikáciou.

• Konto Microsoft alebo
• pracovné alebo školské konto

Ak chcete použiť neoverenú miniaplikáciu šablón, vložte ju priamo do hostiteľskej aplikácie pomocou prvku iframe. Nepotrebujete súpravu JS SDK ani prístupový token.

Ak chcete začať, pridajte tento kód, pomocou ktorého sa zobrazia šablóny Power Automate na vašej webovej lokalite:

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

Ak má cieľový parameter hodnotu new, návrhár Power Automate sa otvorí po výbere šablóny používateľom. Používatelia potom môžu vytvoriť postup v cloude v návrhárovi. Ak chcete mať úplné pracovné prostredie z miniaplikácie, pozrite si nasledujúcu časť.

Ak sa používateľ nachádza na vašej webovej lokalite alebo v aplikácii v určitom kontexte, možno budete chcieť odovzdať tento kontext do postupu. Napríklad používateľ môže otvoriť šablónu pre Pri vytvorení položky pri prezeraní určitého zoznamu v systéme SharePoint. Pomocou týchto krokov odovzdajte do postupu ID daného zoznamu ako parameter:

1. Pred publikovaním šablóny postupu v nej definujte parameter. Parameter vyzerá takto: @{parameters('parameter_name')}.
2. Odovzdajte parameter v reťazci dotazu prvku iframe src. Ak máte napríklad parameter s názvom listName, pridajte &parameters.listName={the name of the list}.

Aj chcete zobraziť prvé štyri šablóny SharePoint v nemčine a spustiť používateľa so zoznamom myCoolList, použite tento kód:

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

Nasledujúca tabuľka zobrazuje zoznam miniaplikácií služby Power Automate, ktoré podporujú úplné pracovné prostredie v rámci miniaplikácie prostredníctvom prístupového tokenu overenia používateľa. Na vloženie miniaplikácií a poskytnutie požadovaného tokenu overenia používateľa budete musieť použiť súpravu Power Automate Javascript Software Developer Kit (JS SDK).

S použitím overenej súpravy Flow SDK môžete používateľom povoliť vytvárať a spravovať postupy priamo z vašej webovej lokality alebo aplikácie (namiesto prechodu do služby Power Automate). Ak chcete použiť overenú súpravu SDK, musíte prihlásiť používateľa s jeho kontom Microsoft alebo Azure Active Directory.

Miniaplikácie služby Power Automate fungujú po vložení prvku iframe, ktorý odkazuje službu Power Automate do hostiteľskej aplikácie. Hostiteľ poskytne prístupový token, ktorý vyžaduje miniaplikácia služby Power Automate. Súprava JS SDK služby Power Automate umožňuje hostiteľskej aplikácii inicializovať a spravovať životný cyklus miniaplikácie.

Tím Power Automate poskytuje súpravu JS SDK na podporu integrácie miniaplikácií služby Flow v aplikáciách tretích strán. Súprava JS SDK služby Flow je k dispozícii ako verejné prepojenie v službe Flow a umožňuje hostiteľskej aplikácii spracovať udalosti z miniaplikácie a pracovať s aplikáciou Flow odosielaním akcií do miniaplikácie. Udalosti miniaplikácie a akcie sú špecifické pre typ miniaplikácie.

Odkaz na súpravu JS SDK služby Flow treba pridať do hostiteľskej aplikácie pred inicializáciou miniaplikácie.

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

Vytvorte inštanciu JS SDK odovzdaním voliteľnej položky hostName a miestnych hodnôt v objekte JSON.

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

Po vytvorení inštancie JS SDK môžete inicializovať a vložiť miniaplikáciu služby Power Automate do nadradeného prvku v aplikácii hostiteľa. Ak to chcete vykonať, pridajte prvok HTML div:

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

Potom inicializujte miniaplikáciu služby Power Automate pomocou metódy JS SDK renderWidget(). Nezabudnite zadať typ miniaplikácie a príslušné nastavenia.

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

Tu je ukážka štýlu pre kontajner, ktorý môžete upraviť, aby sa zhodoval s rozmermi aplikácie hostiteľa.

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

Toto sú parametre pre prvok renderWidget():

Po spustení súpravy JS SDK renderWidget() inicializuje JS SDK prvok iframe, ktorý odkazuje na URL adresu miniaplikácie služby Power Automate. Táto URL adresa obsahuje všetky nastavenia v parametroch reťazca dotazu. Hostiteľská aplikácia potrebuje získať a Power Automate prístupový token pre používateľa (Azure Active Directory Token JWT s publikomhttps://service.flow.microsoft.com) pred inicializáciou miniaplikácia. Miniaplikácia vyvolá udalosť GET_ACCESS_TOKEN na vyžiadanie prístupového tokenu od hostiteľa. Hostiteľ musí spracovať udalosť a odovzdať token miniaplikácii:

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

Aplikácia hostiteľa je zodpovedná za správu tokenu a jeho odovzdanie s platným dátum uplynutia platnosti do miniaplikácie po vyžiadaní. Ak je miniaplikácia otvorená dlhší čas, hostiteľ by mal skontrolovať platnosť tokenu a v prípade potreby ho pred odovzdaním do miniaplikácie obnoviť.

Po úspešnej inicializácii miniaplikácia vytvorí udalosť na oznámenie pripravenosti miniaplikácie. Hostiteľ si môže vypočuť udalosť WIDGET_READY a spustiť všetky ostatné kódy hostiteľa.

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

FlowsSettings možno použiť na prispôsobenie funkcií miniaplikácie služby Power Automate.

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

Vzťahuje sa na všetky miniaplikácie umožňujúce vytvorenie postupov zo šablóny vrátane miniaplikácii Postupy, FlowCreation a Šablóny.

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

Vzťahuje sa na miniaplikácie ApprovalCenter.

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

Miniaplikácia služby Power Automate podporuje udalosti, ktoré umožnia hostiteľovi sledovať udalosti životného cyklu miniaplikácie. Miniaplikácia služby Power Automate podporuje dva typy udalostí: udalosti s jednosmerným oznámením (napríklad Miniaplikácia_Ready) a udalosti aktivované z miniaplikácie z načítaných údajov od hostiteľa (Get_Access_Token). Hostiteľ musí použiť metódu widget.listen() na konkrétne udalosti vyvolané z miniaplikácie.

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

Udalosť GET_STRINGS umožňuje upraviť text pre niektoré prvky používateľského rozhrania zobrazené v miniaplikácii. Tieto reťazce možno prispôsobiť:

Zavolanie funkcie widgetDoneCallback, ktorá odovzdá objekt JSON s pármi kľúča a hodnoty pre kľúč reťazca, a text, ktorým sa prepíše predvolená hodnota.

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

Hostiteľ používa akcie miniaplikácie na odoslanie konkrétnej akcie alebo správy do miniaplikácie. Miniaplikácia JS SDK poskytuje metódu notify() na odoslanie správy alebo údajovej časti formátu JSON do miniaplikácie. Každá akcia miniaplikácie podporuje špecifický podpis údajovej časti.

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

Vyvolanie postupu v cloude odoslaním nasledujúceho príkazu do miniaplikácie modulu runtime

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

Budete musieť nakonfigurovať klientsku aplikáciu s rozsahmi služby Flow (delegované povolenia). Ak aplikácia Azure Active Directory (AAD) použitá na integráciu miniaplikácie používa autorizačný postup code grant, aplikácia AAD musí byť vopred nakonfigurovaná s delegovanými povoleniami, ktoré Power Automate podporuje. Toto poskytuje delegované povolenia, ktoré umožňujú aplikácii:

• spravovať schválenia,
• čítať schválenia,
• čítať aktivity,
• spravovať postupy,
• čítať postupy.

Pomocou týchto krokov vyberte jedno alebo viacero delegovaných povolení:

1. Prejsť na záznam https://portal.azure.com
2. Vyberte položku Azure Active Directory.
3. Vyberte položku Registrácie aplikácie v časti Spravovať.
4. Zadajte aplikáciu tretej strany, ktorá sa má nakonfigurovať pre rozsahy služby Flow.
5. Vyberte Nastavenia.
6. Vyberte položku Požadované povolenia v časti Prístup k rozhraniu API/.
7. Stlačte možnosť Pridať.
8. Vyberte položku Vybrať rozhranie API.
9. Vyhľadajte a vyberte službu Power Automate. Poznámka: Pred zobrazením služby Power Automate musí mať váš nájomník aspoň jedného používateľa AAD prihláseného na portáli Flow (https://flow.microsoft.com).
10. Vyberte požadované rozsahy služby Flow pre aplikáciu a potom vyberte položku Uložiť.

Aplikácie teraz získa token služby Flow obsahujúci delegované povolenia v požiadavke 'scp v tokene JWT.

Vzorová aplikácia Single Page Application (SPA) jazyka JavaScript je uvedená v časti prostriedkov, aby ste mohli experimentovať s vkladaním miniaplikácií služby Flow na stránku hostiteľa. Používanie vzorovej aplikácie vyžaduje registráciu aplikácie AAD s povoleným implicitným udeleným postupom.

1. Prihláste sa do portálu Azurel.
2. Na ľavej navigačnej table vyberte položku Azure Active Directory. Potom vyberte položky App registrations (Preview) (Registrácie aplikácie (Preview)) > New registration (Nová registrácia).
3. Keď sa zobrazí stránka Registrovanie aplikácie, zadajte názov aplikácie.
4. V časti Podporované typy kont vyberte v ktoromkoľvek organizačnom adresári položku Kontá.
5. V časti URL adresa presmerovania vyberte webovú platformu a nastavte hodnotu na URL adresu aplikácie' podľa svojho webového servera. Túto hodnotu nakonfigurujte na hodnotu http://localhost:30662/, aby sa spustila vzorová aplikácia.
6. Vyberte položku Registrovať.
7. Na stránke prehľadu aplikácie si poznačte hodnotu ID aplikácie (klienta).
8. Povolenie ukážky vyžaduje implicitný udelený postup. Na ľavej navigačnej table zaregistrovanej aplikácie vyberte položku Overovanie.
9. V ponuke Rozšírené nastavenia v časti Implicitné udelenie začiarknite obe začiarkavacie políčka Tokeny ID a Prístupové tokeny. Tokeny ID a prístupové tokeny sú povinné, keďže táto aplikácia musí prihlásiť používateľov a zavolať rozhranie Flow API.
10. Vyberte položku Uložiť.

1. Stiahnite si ukážku a skopírujte ju do lokálneho priečinka v zariadení.
2. Otvorte súbor index.html v priečinku FlowSDKSample a upravte položku applicationConfig tak, aby sa aktualizovala položka clientID pre ID aplikácie, ktoré ste zaregistrovali skôr.
3. Vzorová aplikácia je nakonfigurovaná na používanie rozsahov služby Flow Flows.Read.All a Flow.Manage.All. Ďalšie rozsahy môžete nakonfigurovať aktualizáciou vlastnosti flowScopes v objekte applicationConfig.
4. Spustením týchto príkazov nainštalujte závislosť a spustite vzorovú aplikáciu:

   > npm install > node server.js

5. Otvorte prehliadač a potom zadajte reťazec http://localhost:30662.
6. Výberom tlačidla Prihlásiť sa vykonajte overenie v službe AAD a získajte token na prístup k postupu v cloude.
7. Textové pole Prístupový token obsahuje prístupový token.
8. Vyberte položku Načítať miniaplikáciu Postupy alebo Načítať miniaplikáciu Šablóny na vloženie príslušných miniaplikácií.

Prepojenie na stiahnutie vzorovej miniaplikácie.

Získajte ďalšie informácie o integrácii miniaplikácie a nastaveniach:

• Miniaplikácia Šablóny: <https://flow.microsoft.com/test/templateswidget/>
• Miniaplikácia FlowCreation: <https://flow.microsoft.com/test/flowcreationwidget/>
• Miniaplikácia modulu runtime: <https://flow.microsoft.com/test/runtimewidget/>
• Miniaplikácia Schvaľovacie centrum: <https://flow.microsoft.com/test/approvalcenterwidget/>
• Miniaplikácia Postupy: <https://flow.microsoft.com/test/managewidget/>

Ak inicializované miestne nastavenia nie sú uvedené, služba Flow predvolene použije najbližšie podporované miestne nastavenia.

Použitie Power Automate Embed SDK je krytý pod licenčné podmienky pre softvér spoločnosti Microsoft.