More happiness for the lazy developer: MS Graph toolkit with HTML

More happiness for the lazy developer: MS Graph toolkit with HTML

Last blogpost showed how to use the MS Graph Toolkit for getting info from the graph, and show them in a SPFX webpart, without the need for writing all the data-fetching and UI code.

Using the toolkit directly in HTML is also super-easy. The setup is a bit different, because now we need to register the app in AAD. Let's try to achieve the same result as what we had with SPFX. Let's get to AAD and register the app. I register the app as an SPA, with following setup:

I also need Read-write permissions for Tasks:

And now for the HTML. You can start by refering to the necessary javascript:

<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>

The component used is again mgt-todo, but we need two additional things: a component for loging in (equally simple to add), and a provider for the authentication using MSAL.

<mgt-msal2-provider client-id="73fcc049-180b-4bca-ba91-bdf9be07cde9" 
    authority="https://login.microsoftonline.com/d12f9872-a3ea-4c33-a06f-3c7a33df595c">
</mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-todo></mgt-todo>

The client-id used for the provider is, obviously, the id you got when registering the app in AAD. The authority refers to your Tenant. The last on can be skipped if you register the app as multitenant.

Again, that's it. It's working in like 5' !! Let's go home early today...