Power Automate hizmetini web siteleri ve uygulamalarla tümleştirme

Kullanıcılarınıza, kişisel veya profesyonel görevlerini otomatik hale getirmeleri için kolay bir yol sunmak üzere akış arabirim öğeleri kullanarak Power Automate'i uygulamanıza veya web sitenize ekleyin.

Akış arabirim öğeleri konak belgesinde yer alan iframe'lerdir. Bu belgede Power Automate tasarımcısındaki bir sayfaya işaret edilir. Bu arabirim öğeleri belirli Power Automate işlevlerini üçüncü taraf uygulamaya tümleştirir.

Arabirim öğeleri basit olabilir. Örneğin, konakla iframe arasında hiçbir iletişim olmadan şablon listesini işleyen pencere öğesi basit bir arabirim öğesidir. Arabirim öğeleri karmaşık da olabilir. Örneğin, bir şablondan bulut akışı sağlayan ve ardından konakla pencere öğesi arasında iki yönlü iletişim üzerinden akışı tetikleyen pencere öğesi karmaşıktır.

Ön koşullar

• Microsoft Hesabı ya da
• İş veya okul hesabı

Kimliği doğrulanmamış arabirim öğesi kullanma

Kimliği doğrulanmamış şablonlar arabirim öğesini kullanmak için iframe'i kullanarak bunu doğrudan konak uygulamanın içine ekleyin. JS SDK'sı veya erişim belirtecine ihtiyacınız yoktur.

Senaryolarınıza ilişkin şablonları gösterme

Başlamak için Power Automate şablonlarını web sitenizde göstermek için şu kodu ekleyin:

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

Hedef parametre new olursa kullanıcı bir şablon seçtiğinde Power Automate tasarımcısı açılır. Ardından kullanıcılar tasarımcıda bulut akışı oluşturabilir. Arabirim öğesiyle ilgili eksiksiz bir deneyim elde etmek istiyorsanız bir sonraki bölüme bakın.

Akış şablonuna ek parametreleri geçirme

Kullanıcı, web sitenizde veya uygulamanızda belirli bir bağlamda ise bu bağlamı akışa geçirmek isteyebilirsiniz. Örneğin, Kullanıcı SharePoint uygulamasında belirli bir listeye baktığınızda bir öğenin oluşturulduğu zaman için bir şablon açabilir . Liste kimliğini akışa bir parametre olarak geçirmek için bu adımları izleyin:

1. Yayımlamadan önce, akış şablonunda parametreyi tanımlayın. Parametre şöyle görünür: @{parameters('parameter_name')}.
2. Parametreyi iframe src'nin sorgu dizesinde geçirin. Örneğin, listName adlı bir parametreniz varsa &parameters.listName={the name of the list} öğesini ekleyin.

Tam örnek

İlk dört Almanca SharePoint şablonunu görüntülemek ve kullanıcıyı myCoolList ile başlatmak için bu kodu kullanın:

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

Kimliği doğrulanmış akış pencere öğelerini kullanma

Aşağıdaki tabloda kullanıcı kimlik doğrulaması erişim belirteci kullanılarak arabirim öğesinin içinde tam deneyimi destekleyen Power Automate arabirim öğelerinin listesi gösterilir. Arabirim öğelerini eklemek ve gerekli kullanıcı erişim belirtecini sağlamak için Power Automate hizmetinin JavaScript Yazılım Geliştirme Seti'ni (JS SDK) kullanmanız gerekir.

Kullanıcıların, (Power Automate hizmetine gitmek yerine) doğrudan web sitenizden veya uygulamanızdan akış oluşturmasını ve yönetmesini sağlamak için kimliği doğrulanmış Flow SDK'sini kullanın. Kimliği doğrulanmış SDK'yi kullanmak için Microsoft Hesabı'nda veya Azure Active Directory hizmetinde kullanıcının oturumunu açmanız gerekir.

Arabirim öğesi mimarisi

Power Automate arabirim öğeleri, Power Automate hizmetine başvuran bir iframe'i konak uygulamaya ekleme yoluyla çalışır. Konak, Power Automate arabirim öğesine gereken erişim belirtecini sağlar. Power Automate uygulamasının JS SDK'si ana bilgisayar uygulamasının arabirim öğesi yaşam döngüsünü başlatmasına ve yönetmesine olanak tanır.

JS SDK ayrıntıları

Power Automate takımı Flow arabirim öğelerini üçüncü taraf uygulamalarda tümleştirmeyi kolaylaştırmak için JS SDK'si sağlar. Flow hizmetinde genel bağlantı olarak sağlanan Flow JS SDK'sı, konak uygulamanın arabirim öğesinden olayları işlemesine ve arabirim öğesine eylemler göndererek Flow uygulamasıyla etkileşim kurmasına olanak tanır. Arabirim öğesi olayları ve eylemleri arabirim öğesinin türüne özgüdür.

Arabirim öğesi başlatma

Arabirim öğesini başlatmadan önce konak uygulamaya Flow JS SDK'sı başvurusu eklenmelidir.

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

JSON nesnesinde isteğe bağlı hostName ve locale değerlerini geçirerek bir JS SDK örneği oluşturun.

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

JS SDK'si kurulumu oluşturulduktan sonra konak uygulamadaki bir üst öğede Power Automate arabirim öğesini başlatabilir ve ekleyebilirsiniz. Bunu yapmak için HTML div'i ekleyin:

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

Ardından Power Automate arabirim öğesini JS SDK'si renderWidget() yöntemiyle başlatın. Pencere öğesi türünü ve buna karşılık gelen ayarları sağlamayı unutmayın.

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

Burada konak uygulamanın boyutlarıyla eşleşecek şekilde değiştirebileceğiniz kapsayıcı için örnek stil gösterilmiştir.

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

Bunlar, renderWidget() yönteminin parametreleridir:

Erişim belirteçleri

JS SDK'si renderWidget() çalıştırıldıktan sonra JS SDK'si, Power Automate arabirim öğesi URL'sine işaret eden bir iframe başlatır. Bu URL, sorgu dizesi parametrelerinde tüm ayarları içerir. Konak uygulamanın arabirim öğesini başlatmadan önce kullanıcı için bir Power Automate erişim belirteci (Azure Active Directory JWT belirteci ile hedef kitle https://service.flow.microsoft.com) alması gerekir. Pencere öğesi konaktan erişim belirteci istemek için bir GET_ACCESS_TOKEN olayı tetikler. Konak olayı işlemeli ve belirteci pencere öğesine geçirmelidir:

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

Belirtecin bakımı ve istendiğinde geçerli bir süre sonu tarihiyle pencere öğesine geçirilmesi konak uygulamanın sorumluluğundadır. Pencere öğesi daha uzun süre açık kalırsa, konak belirtecin süresinin dolup dolmadığını denetlemeli ve pencere öğesine geçirmeden önce gerekiyorsa belirteci yenilemelidir.

Pencere öğesinin hazır olup olmadığını algılama

Başarılı bir başlatma işleminden sonra, pencere öğesi hazır olduğunu bildirmek için bir olay tetikler. Konak WIDGET_READY olayını dinleyebilir ve ek konak kodunu yürütebilir.

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

Pencere öğesi ayarları

FlowsSettings

FlowsSettings, Power Automate arabirim öğesinin işlevselliğini özelleştirmek için kullanılabilir.

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

TemplatesSettings

Bu Flows, FlowCreation ve Templates pencere öğeleri gibi şablondan akış oluşturmanıza olanak tanıyan tüm pencere öğelerine uygulanır.

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

ApprovalCenterSettings

ApprovalCenter pencere öğelerine uygulanır.

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

Pencere öğesi olayları

Power Automate arabirim öğesi, konağın arabirim öğesi yaşam döngüsü olaylarını dinlemesini sağlayan olayları destekler. Power Automate arabirim öğesi iki tür olayı destekler: tek yönlü bildirim olayları (örneğin, Arabirim Öğesi_Hazır) ve konaktan verileri getirmek için arabirim öğesinden tetiklenen olaylar (Erişim_Belirteci_Al). Konağın pencere öğesinden tetiklenen belirli olayları dinlemek için widget.listen() yöntemini kullanması gerekir.

Kullanım

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

Pencere öğesi türünün desteklediği olaylar

Çalışma zamanı pencere öğesi

Akış Oluşturma pencere öğesi

Onay pencere öğesi

GET_STRINGS olayı, pencere öğesinde gösterilen kullanıcı arabirimi öğelerinden bazılarının metnini özelleştirmenize olanak tanır. Aşağıdaki dizeler özelleştirilebilir:

Örnek

Varsayılan değeri geçersiz kılmak için dize anahtarı ve metninden oluşan bir anahtar-değer çiftinin bulunduğu JSON nesnesini geçirerek widgetDoneCallback çağrısı yapın.

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

Pencere öğesi eylemleri

Konak pencere öğesine belirli bir eylem veya ileti göndermek için pencere öğesi eylemlerini kullanır. Pencere öğesi JS SDK'sı pencere öğesine ileti veya JSON yükü göndermek için notify() yöntemini sağlar. Her pencere öğesi belirli bir yük imzasını destekler.

Kullanım

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

Örnek

Çalışma zamanı pencere öğesine aşağıdaki komutu göndererek bir bulut akışı çağırın

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

Çalışma zamanı pencere öğesi

Akış Oluşturma pencere öğesi

Onay pencere öğesi

İstemci uygulamanızı yapılandırma

İstemci uygulamanızı Flow Hizmeti Kapsamları (Temsilci İzinleri) ile yapılandırmanız gerekir. Arabirim öğesi tümleştirmesinde kullanılan Azure Active Directory (AAD) uygulaması 'kod verme' yetkilendirme akışını kullanıyorsa AAD uygulamasının Power Automate tarafından desteklenen temsilci izinleriyle önceden yapılandırılması gerekir. Bu, uygulamanın şunları yapmasını sağlayan temsilci izinleri verir:

• Onayları yönetme
• Onayları okuma
• Etkinlikleri okuma
• Akışları yönetme
• Akışları okuma

Bir veya birden çok temsilci izni seçmek için şu adımları izleyin:

1. Git: https://portal.azure.com
2. Azure Active Directory öğesini seçin.
3. Yönet'in altında Uygulama kayıtları'nı seçin.
4. Flow hizmeti kapsamları için yapılandırılacak üçüncü taraf uygulamasını girin.
5. Ayarlar'ı seçin.
6. API erişimi/ alanında Gerekli izinler'i seçin
7. Ekle'yi seçin.
8. API seçin öğesini seçin.
9. Power Automate hizmeti'ni arayın ve seçin. Not: Power Automate hizmetini görebilmeniz için kiracınızın en az bir AAD kullanıcısının Flow portalında (https://flow.microsoft.com) oturum açmış olması gerekir
10. Uygulamanız için gerekli Flow kapsamlarını seçtikten sonra Kaydet'i seçin.

Artık uygulamanız JWT belirtecinde 'scp' talebindeki temsilci izinlerini içeren bir Flow Hizmeti belirteci alacaktır.

Akış pencere öğelerinin eklendiği örnek uygulama

Konak sayfasına akış pencere öğeleri eklemeyi deneyebilmeniz için, kaynaklar bölümünde örnek bir JavaScript Tek Sayfalı Uygulaması (SPA) sağlanmıştır. Örnek uygulamayı kullanmak için örtük onay akışının etkinleştirildiği bir AAD uygulamasının kaydedilmesi gerekir.

AAD uygulamasını kaydetme

1. Azure portalında oturum açın.
2. Sol gezinti bölmesinde, Azure Active Directory uygulamasını seçin ve ardından Uygulama kayıtları (Önizleme) > Yeni kayıt seçeneğini belirleyin.
3. Uygulamayı kaydet sayfası görüntülendiğinde, uygulamanız için ad girin.
4. Desteklenen hesap türleri'nin altında, herhangi bir kuruluş dizinindeki Hesaplar'ı seçin.
5. Yeniden yönlendirme URL'si bölümünün altında web platformunu seçin ve değeri, web sunucunuza göre uygulamanın URL'sine ayarlayın. Örnek uygulamayı çalıştırmak için bu değeri http://localhost:30662/ olarak yapılandırın.
6. Kaydol'u seçin.
7. Uygulamanın Genel Bakış sayfasında uygulama (istemci) kimliği değerini not alın.
8. Örneğin etkinleştirilmesi için örtük onay akışı gerekir. Kayıtlı uygulamanın sol gezinti bölmesinde Kimlik doğrulaması'nı seçin.
9. Gelişmiş ayarlar'daki Örtük onay'ın altında hem Kimlik belirteçleri hem de Erişim belirteçleri onay kutularını etkinleştirin. Bu uygulama kullanıcıların oturumunu açacağı ve Flow API'yi çağıracağı için, kimlik belirteçleri ve erişim belirteçleri gereklidir.
10. Kaydet'i seçin.

Örneği çalıştırma

1. Örneği indirin ve bilgisayarınızdaki yerel bir klasöre kopyalayın.
2. FlowSDKSample klasörünün altındaki index.html dosyasını açın ve clientID değerini daha önce kaydettiğiniz uygulama kimliğiyle güncelleştirmek için applicationConfig ayarını değiştirin.
3. Örnek uygulama Flows.Read.All ve Flow.Manage.All Flow kapsamlarını kullanacak şekilde yapılandırılmıştır. applicationConfig nesnesinde flowScopes özelliğini güncelleştirerek ek kapsamlar yapılandırabilirsiniz.
4. Bağımlılığı yüklemek ve örnek uygulamayı çalıştırmak için şu komutları çalıştırın:

   > npm install > node server.js

5. Tarayıcıyı açın ve http://localhost:30662 girin.
6. AAD'de kimlik doğrulaması yapmak ve bir bulut akışı erişim belirteci almak için Oturum aç düğmesini seçin.
7. Erişim Belirteci metin kutusu erişim belirteci içerir.
8. İlgili arabirim öğelerini eklemek için Akışları Yükle arabirim öğesi'ni veya Şablonları Yükle arabirim öğesi'ni seçin.

Örnek uygulama indirme bağlantısı.

Kaynaklar

Arabirim öğesi test sayfaları

Pencere öğesi tümleştirmesi ve ayarları hakkında daha fazla bilgi edinin:

• Templates pencere öğesi: <https://flow.microsoft.com/test/templateswidget/>
• FlowCreation pencere öğesi: <https://flow.microsoft.com/test/flowcreationwidget/>
• Çalışma zamanı pencere öğesi: <https://flow.microsoft.com/test/runtimewidget/>
• Approvals center pencere öğesi: <https://flow.microsoft.com/test/approvalcenterwidget/>
• Flows pencere öğesi: <https://flow.microsoft.com/test/managewidget/>

Desteklenen pencere öğesi yerel ayarları

Başlatılan yerel ayar listelenmiyorsa, Flow varsayılan olarak desteklenen en yakın yerel ayarı kullanacaktır.

Power Automate Katıştırma SDK'sının kullanımı Microsoft Software Lisans Koşulları kapsamındadır.