Microsoft 365 – Exploring Microsoft Graph Toolkit – Part 1 – Introduction and small demos

Microsoft Graph Toolkit

Hi All,

LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂 STAY SAFE, STAY HEALTHY,  STAY HOME 🙂

Background:  I am speaking in SharePoint Saturday (SPS) event – Gurgaon 2020 on Microsoft Graph Toolkit. So I need to prepare for this and while preparing I am applying my life funda – SHARING IS CARING 🙂 So this article…

In this article we will discuss about Microsoft Graph Toolkit.

Take away from this article: At the end of this article we will got to know about

  1. What is the Microsoft Graph Toolkit
  2. Why to use Microsoft Graph Toolkit
  3. Components available in Microsoft Graph Toolkit
  4. Providers
  5. Demo – Getting started with Microsoft Graph Toolkit 

Prerequisites :

What is the Microsoft Graph Toolkit :

  • Microsoft defines – “Microsoft Graph Toolkit is a collection of reusable and framework-agnostic web components and helpers for accessing and working with Microsoft Graph. “

Why to use Microsoft Graph Toolkit :

  • Microsoft Graph Toolkit components makes developers life easy for using Microsoft Graph.
  • These components are with built in providers which authenticates the Microsoft Graph
  • We can very easily include these controls in Web Applications, Microsoft Teams tabs and SharePoint web parts
  • These components are developed on top of web standards as per W3C HTML Spec these components work with all the web frameworks like React, Angular, Vue ..
  • Works on all the major browsers These controls are built in on the top of Office UI Fabric core

Components available in Microsoft Graph Toolkit ?

ComponentDescription
LoginA button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user’s profile information on sign in.
PersonDisplays a person or contact by their photo, name, and/or email address.
PeopleDisplays a group of people or contacts by their photos or initials.
AgendaDisplays events in a user or group’s calendar.
TasksDisplays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To-Do.
People pickerProvides the ability to search for people and renders the list of results.
Person cardA flyout used on the person component to display more profile information about a user.
GetMake a GET query to any Microsoft Graph API directly in your HTML.
Channel pickerProvides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results.
Table : Microsoft 365 – Microsoft Graph ToolKit – Components

Demos :

  • Using MGT component – Very simple example just putting the log in control on the page/form/asp.net application as – Demo 1
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-login></mgt-login>

Output :

Microsoft 365 - Microsoft Graph ToolKit - LogIn control added on the page
Fig : Microsoft 365 – Microsoft Graph ToolKit – LogIn control added on the page
  • If we notice the code as in above code block, we have added the reference to script – mgt-loader.js – https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js – loader directly via unpkg
  • There is alternate way also to add MGT by installing npm package – @microsoft/mgt
  • In nutshell, Microsoft Graph Toolkit are very useful to developers who uses Microsoft Graph APIs, These components makes developers life easy 🙂

DEMO 2Using provider and actual login control working – login to Microsoft 365

For this to work we need to host our html files in IIS (we could host in Azure as well). Here we are going with IIS

So I created the web site in IIS and pointed out demo folder as shown in below fig

 Microsoft 365 - Microsoft Graph ToolKit - Files hosted in IIS
Fig :Microsoft 365 – Microsoft Graph ToolKit – Files hosted in IIS

Below is the sample code –

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

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
     <title>Welcome to MGT!</title>
Welcome to Microsoft Graph ToolKit ! <br/><br/> 
Second demonstration of LogIn control ! Just to show the Sign In control in action !
<mgt-msal-provider client-id="<our app client id>"></mgt-msal-provider>
<mgt-login></mgt-login>
In next demo we will see react in action with MGT <a href="third.html">React with MGT</a> 
</body>
</html>

Output:

  • When we execute the above code, first we will have sign in control as
  • Once we will click on “Sign In” control we will get “Sign in” dialog as for entering user name and password as below
  • Once we have signed in successfully, we will redirected to our html page and there we can see the display name of the logged in user as shown in below fig

Providers :

  • Providers enables authentication and Microsoft Graph access
  • There are number of providers available
  • In our demo we have used MSAL provider.
  • MSAL provider uses MSAL.js to sign in users
  • Following are the providers:
ProvidersDescription
MsalUses MSAL.js to sign in users and acquire tokens to use with Microsoft Graph.
SharePointAuthenticates and provides Microsoft Graph access to components inside of SharePoint web parts.
TeamsAuthenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs.
ProxyAllows the use of backend authentication by routing all calls to Microsoft Graph through your backend.
CustomCreate a custom provider to enable authentication and access to Microsoft Graph with your application’s existing authentication code.
Table : Microsoft 365 – Microsoft Graph ToolKit – Providers

Next Article : In next article we will discuss using MGT with React 🙂

References :

We have very good series on Microsoft Graph, for more details please have a look – https://knowledge-junction.com/?s=microsoft+graph OR https://knowledge-junction.com/?s=graph

Thanks for reading 🙂 Feel free to discuss / comment / questions 🙂 SHARING IS CARING 🙂

Share In Teams:

Thanks a lot for reading 🙂 Enjoy the beautiful LIFE 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂

This site uses Akismet to reduce spam. Learn how your comment data is processed.