Dotyczy wersji 2021.1.x i powyżej, autor: Piotr Piechowicz
WEBCON BPS udostępnia możliwość osadzania komponentów Microsoft Graph Toolkit w Portalu WEBCON BPS. Podstawowe informacje na temat Graph Toolkit można znaleźć pod adresem: Getting started with the Microsoft Graph Toolkit – Microsoft Graph | Microsoft Docs.
Aby móc korzystać z komponentów Graph Microsoft Toolkit należy wcześniej zarejestrować odpowiednią aplikację w Azure Active Directory (App registrations) i w oparciu o nią utworzyć provider autentykacji (zalecana jest wersja msal2). Tworzenie providerów autentykacji jest opisane pod adresami:
MSAL2 provider – Microsoft Graph | Microsoft Docs
MSAL Provider – Microsoft Graph | Microsoft Docs
Abu umożliwić użytkownikom zalogowanie się do Microsoft Graph należy wykorzystać komponent logowania. Poniżej minimalny zestaw uprawnień jaki trzeba nadać aplikacji wykorzystywanej przez provider autentykacji, do poprawnego działania komponentu logowania. Uwaga – jest niezbędne udzielenie zgody administratora (consent) dla uprawnień (scope), które tej zgody wymagają.
Po utworzeniu providera oraz przyznaniu niezbędnych uprawnień można przystąpić do implementacji komponentów Microsoft Graph Toolkit w Portalu WEBCON BPS.
Komponenty Microsoft Graph Toolkit można wykorzystać w dwóch miejscach:
- Atrybut HTML w formularzu
- Element Kod HTML w dashboardzie
Wykorzystanie Microsoft Graph Toolkit w atrybucie w formularzu
Wykorzystanie komponentów Graph Toolkit w atrybucie HTML na formularzu wymaga utworzenia atrybutu HTML, w konfiguracji którego należy:
- Utworzyć komponent providera
W przypadku providera msal2 kod providera powinien wyglądać następująco:
<mgt-msal2-provider client-id="<KLIENT ID>"
authority=”https://login.microsoftonline.com/<TENANT ID>”
login-type="popup"
redirect-uri="<ADRES REDIRECT_URI>">
</mgt-msal2-provider>
Opis poszczególnych atrybutów dostępny jest na stronie MSAL2 provider – Microsoft Graph | Microsoft Docs.
W Portalu WEBCON BPS Adres Redirect Uri ma postać
https://<adres portalu>/graphtoolkit/receivetokens
a sugerowany Typ Logowania to ‘popup’.
- Utworzyć komponent logowania
Komponent logowania jest niezbędny, aby użytkownik mógł się zalogować ( konieczne jest także przyznanie odpowiednich uprawnień dla zarejestrowanej aplikacji)
Opis szczegółowy konfiguracji komponentu Login component in the Microsoft Graph Toolkit | Microsoft Docs
Komponent logowania ma postać:
<mgt-login></mgt-login>
- Dodać wybrane komponenty.
Lista komponentów dostępna jest na stronie Getting started with the Microsoft Graph Toolkit – Microsoft Graph | Microsoft Docs.
Przy dodawaniu komponentu należy także nadać aplikacji wymagane przez dany komponent uprawnienia (są one wypisane przy opisie komponentu na powyższej stronie). W przypadku uprawnień, które wymagają zgody administratora, należy tą zgodę uzyskać.
Po utworzeniu skonfigurowaniu atrybutu należy zadbać aby biblioteka Microsoft Graph Toolkit została załadowana przed wyświetleniem naszego atrybutu na formularzu. WEBCON BPS udostępnia funkcję JavaScript, która może zostać wykorzystana do załadowania biblioteki np. w Regule formularza. Wywołanie tej funkcji wygląda następująco:
GraphToolkit.loadGraphToolkit()
Tworzenie atrybutu HTML
Przykładowy kod atrybutu HTML
Wykorzystanie reguły formularza do załadowania biblioteki
Po zapisaniu użytkownik może korzystać z komponentów GraphToolkit na formularzu.
Po wybraniu przycisku zalogowania, użytkownik powinien otrzymać okienko popup, w którym zostanie poproszony o zalogowanie, po czym będzie mógł korzystać z pozostałych komponentów biblioteki Graph Toolkit.
Wykorzystanie Microsoft Graph Toolkit w elemencie na dashboardzie
Wykorzystanie komponentów Graph Toolkit w elemencie kod HTML na dashboardzie jest analogiczne do wykorzystania ich w atrybucie HTML. Należy jednak zadbać o załadowanie biblioteki w kodzie HTML. Wykorzystanie biblioteki Graph Toolkit na dashboardzie wygląda więc następująco:
- Wywołanie funkcji ładującej bibliotekę w znacznikach script:
<script>GraphToolkit.loadGraphToolkit()</script>
- Dodanie komponentu providera – analogicznie jak w atrybucie formularza
- Dodanie wybranych komponentów – analogicznie jak w atrybucie formularza
Przykładowy kod elementu HTML:
<script> GraphToolkit.loadGraphToolkit()</script>
<mgt-msal2-provider
client-id="aaaaaaaa-bbbb-cccc-dddd-eeeeeeeee" authority="https://login.microsoftonline.com/111111111-2222-3333-4444-55555555"
login-type="popup"
redirect-uri="https:/portalbps.webcon.com/graphtoolkit/receivetokens">
</mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-tasks></mgt-tasks>
Dodanie elementu kod HTML:
Dodanie kodu HTML:
Widok komponentu logowania
