Microsoft Graph Toolkit in WEBCON BPS

Applies to version: 2021.1.x and above; author: Piotr Piechowicz 

To be able to use Graph Microsoft Toolkit components, you must first register the appropriate application in Azure Active Directory (App registrations) and create an authentication provider based on it (the msal2 version is recommended). The creation of authentication providers is described under the addresses:

MSAL2 provider - Microsoft Graph | Microsoft Docs
MSAL Provider - Microsoft Graph | Microsoft Docs

To enable users to log into Microsoft Graph, a login component should be used. Below is the minimum set of privileges that must be granted to the application used by the authentication provider for the correct operation of the login component. Note - administrator's consent for the privileges (scope) is required.

After creating the provider and granting the necessary privileges, you can start implementing the Microsoft Graph Toolkit components in the WEBCON BPS Portal.

Microsoft Graph Toolkit components can be used in:

1. HTML form field in the form
2. HTML code element in the dashboard

Microsoft Graph Toolkit in the form field

Using Graph Toolkit components in the HTML form field in the form requires a HTML form field, its setting requires, as follows:

1. Creating the provider component

In case of msal2 provider, the provider code should be the following:

<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>

The description of the respective form fields is available at:

MSAL2 provider - Microsoft Graph | Microsoft Docs.

In WEBCON BPS Portal the Redirect Uri address should be

https://<adres portalu>/graphtoolkit/receivetokens

and the suggested Login Type is ‘popup’.

2. Creating the login component

The login component is necessary for the user to log in (it is also necessary to grant the appropriate privileges for the registered application)

Detailed description of the component configuration at Login component in the Microsoft Graph Toolkit | Microsoft Docs

The login component should be:

<mgt-login></mgt-login>

3. Adding the selected components.

The list of components is available at Getting started with the Microsoft Graph Toolkit - Microsoft Graph | Microsoft Docs.

When adding a component, the application should be equipped with privileges required by the component (they are listed next to the component description on the page above). In the case of privileges that require the consent of the administrator, the consent must be obtained.

After setting the form field, you should investigate whether the Microsoft Graph Toolkit library is loaded before displaying the form field on the form. WEBCON BPS provides a JavaScript function that can be used to load the library, e.g. in the Form Rule. Calling this function looks, as follows:

GraphToolkit.loadGraphToolkit()

Creating the HTML form field

Exemplary HTML form field code

Using the form rule for loading the library

When saved, the user can use the GraphToolkit components on the form.

After selecting the login button, the user should be displayed a popup window in order to log in and then the user can use the remining components of the Graph Toolkit library.

Microsoft Graph Toolkit in the dashboard

The use of Graph Toolkit components in the HTML element code in the dashboard is analogical to their use in the HTML form field. However, you should take care of loading the library in the HTML code. The Graph Toolkit library in the dashboard can be used, as follows:

1. Invoke the function that loads the library in the script marks:

<script>GraphToolkit.loadGraphToolkit()</script>

2. Add the provider component– as in the case of the form field
3. Add the selected components – as in the case of the form field

Exemplary code of the HTML element:

<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>

Adding the element of HTML code:

Adding the HTML code:

Login component view