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
- What is the Microsoft Graph Toolkit
- Why to use Microsoft Graph Toolkit
- Components available in Microsoft Graph Toolkit
- Providers
- Demo – Getting started with Microsoft Graph Toolkit
Prerequisites :
- Basic knowledge of Microsoft Graph – If you are beginner to Microsoft Graph, kindly please visit once – https://knowledge-junction.in/?s=microsoft+graph OR https://knowledge-junction.in/?s=graph
- Visual Studio Code – can be downloaded free from – https://code.visualstudio.com/download
- Microsoft 365 tenant – can be get free from Join the Microsoft 365 developer program
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 ?
| Component | Description |
|---|---|
| Login | A button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user’s profile information on sign in. |
| Person | Displays a person or contact by their photo, name, and/or email address. |
| People | Displays a group of people or contacts by their photos or initials. |
| Agenda | Displays events in a user or group’s calendar. |
| Tasks | Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To-Do. |
| People picker | Provides the ability to search for people and renders the list of results. |
| Person card | A flyout used on the person component to display more profile information about a user. |
| Get | Make a GET query to any Microsoft Graph API directly in your HTML. |
| Channel picker | Provides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results. |
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 :
- 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 2 – Using 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
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
- Here, we are using client id of our Azure App. We have very detailed article for creating Azure App – Office 365 – Azure Active Directory – Registering/Creating new Azure App – detailed step
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:
| Providers | Description |
|---|---|
| Msal | Uses MSAL.js to sign in users and acquire tokens to use with Microsoft Graph. |
| SharePoint | Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts. |
| Teams | Authenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs. |
| Proxy | Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend. |
| Custom | Create a custom provider to enable authentication and access to Microsoft Graph with your application’s existing authentication code. |
Next Article : In next article we will discuss using MGT with React 🙂
References :
- Microsoft Graph Toolkit: Web Components powered by Microsoft Graph
- Announcing “A Lap Around Microsoft Graph Toolkit” Blog Series
- microsoftgraph / mgtLap-TryItOut – Sample examples
- Join the Microsoft 365 Developer Program
- Visual Studio Code for free
- MSAL providers
- Microsoft Graph Toolkit: Web Components powered by Microsoft Graph
- Office 365 – Azure Active Directory – Registering/Creating new Azure App – detailed step
- https://mgt.dev/?path=/story/samples-general–login-to-show-agenda
- https://jsfiddle.net/metulev/scb9muh4
We have very good series on Microsoft Graph, for more details please have a look – https://knowledge-junction.in/?s=microsoft+graph OR https://knowledge-junction.in/?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 🙂
You must log in to post a comment.