How to use Graph Toolkit in Teams App inside Teams Tab

In this article, we will learn about Graph Toolkit and how to integrate Graph toolkit in Teams App.

What is Graph Toolkit?

Microsoft Graph Toolkit is a library that provides us a collection of reusable components that can be easily configured in our applications(mobile, web, SPA, teams app), etc which takes care of underlying authentication and accessing the data from Graph API and display it to the user. Graph Toolkit provides various authentication providers that also can be used based on our business case. These providers are to be initialized once and then all the components available in Graph Toolkit will automatically use this auth and authorization flow and get data from Graph API.

Once everything is configured properly, it would just take a couple of lines to use the components Available.

Let us see step by step on how to use Graph Toolkit in Microsoft Teams App(tab)

Note- if you don’t have Teams Yeoman Generator installed, use the below command to install it

npm install generator-teams@preview --global

Step 1 –  Create Teams App of type Tab

Open command prompt, create a new folder of your choice in your drive where you wish to create the solution. Run the below command.

yo teams

We would be asked with series of questions, please refer to the below screenshot for options you have to choose.

For this sample, we are going to create a tab without SSO support.

Note – As we are choosing SSO support as No, the user will have to log in to Teams Tab separately if you wish to make the Graph API calls…We won’t be able to use the Teams Login token to make Graph API calls but have to make separate calls. It is also possible to have SSO support where users don’t have to log in but we would also need to have a backend(server) making use of ID token from Teams App and getting access token to make Graph API call on behalf of the user flow… I would try to write a separate article on it.

It will take some time and finally you should be able to see below.

Step – Install Microsoft Graph Toolkit 

Let us install required packages via npm, run the below command.

npm install @microsoft/teams-js @microsoft/mgt-element @microsoft/mgt-teams-msal2-provider @microsoft/mgt-components @microsoft/mgt

Note – To use Toolkit, we have to also install Teams SDK and required providers and components.

In this sample we are going to use Teams Provider which uses MSAL provider internally, you can read about Teams provider at below link

Ideally, we should use Teams MSAL2Provider for authentication purposes as it is more secure, but I had some diffculties making it run while writing this article so went ahead and used Teams Provider….After raising issue in repo, Toolkit team has provided me instruction on mistake I was making and it fixed it…but as all the screenshot etc was referring to TeamsProvider I have kept same as in this artitlce…but later I tried with MSAL2Provider and it worked fine…so I have given a side note at end of the article to specify changes to make it work with MSAL2Provider

 

So I have separately installed  ‘@microsoft/mgt’ package, make sure you are also doing so.

Open your solution in Visual Studio code using ‘code .’

Step 3 – Creating the auth popup page

As mentioned before, the user needs to sign in to make use of Graph Toolkit and indirectly get data from Graph API. So in this step, we will create a page in our app that will open in a popup to follow the auth flow. On this particular page, we have to use import the provider class and call handleAuth method, we can make it as fancy as we want based on our need but ideally, if this method would be called it will be automatically asking the user to sign in when the Login Graph Toolkit component is used.

Create a new page in public folder as  “src\public\auth.html”. Copy below code

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
  </head>

  <body>
    <script>
      mgt.TeamsProvider.handleAuth();
    </script>
  </body>
</html>

 

Step 4- Create a new app registration in Azure Active Directory

Go to portal.azure.com

Choose Azure Active Directory

Click on App Registration from left Blade, Select New Registration

 

Provide the name of your App ‘TeamsAppGraphToolkit1 ‘. Click on Register at the bottom of the page

Once created, click on Authentication on the left blade, choose Add platform and select Single-page application

 

Enter ‘Redirect URIs’  as http://localhost for a sample, ideally, once you publish this app, it should be the domain of your team’s app. We will also have to change this to ngrok url while doing testing.

Next thing here we have to enable Implicit this App regisration supports. As Teams Provider user MSAL(not MSAL2) which only supports Implicit Flow for OAuth, we have enable both Access tokens and ID tokens. 

 

Save it and note down client Id of this App from Overview tab, we would required it later.

Step – Install Microsoft Graph Toolkit React components.

Run the below command to install mgt react components to be used.

npm i @microsoft/mgt-react

Step – Modify code to use Graph Toolkit components

Go to src\client\graphToolkitDemoTab\GraphToolkitDemoTab.tsx

Import below libraries

import {Providers, TeamsProvider} from '@microsoft/mgt'
import {  Login } from '@microsoft/mgt-react';

Modify the Tab component and on top, initialize the Teams Provider

export const GraphToolkitDemoTab = () => {

    TeamsProvider.microsoftTeamsLib = microsoftTeams;

Providers.globalProvider = new TeamsProvider({
  clientId: '4t2eba12-24c4-4e23-b1d8-c22c4051545b',
    scopes: ['User.Read','Mail.ReadBasic'],
    authPopupUrl:"/auth.html"
});
//.....

Modify the clientId you noted earlier from Azure AD App Registration.

Next, let us add the Login component to the render method to display the Sign In button.

return (
        <Provider theme={theme}>
            <Flex fill={true} column styles={{
                padding: ".8rem 0 .8rem .5rem"
            }}>
                <Flex.Item>
                    <Header content="This is your tab" />
                </Flex.Item>
                <Flex.Item>
                    <div>
                        <div>
                            <Text content={entityId} />
                        </div>

                        <div>
                            <Button onClick={() => alert("It worked!")}>A sample button</Button>
                            <Login />
                        </div>
                    </div>
                </Flex.Item>
                <Flex.Item styles={{
                    padding: ".8rem 0 .8rem .5rem"
                }}>
                    <Text size="smaller" content="(C) Copyright Siddharth Vaghasia" />
                </Flex.Item>
            </Flex>
        </Provider>
    );

Step  – Test the app

Once you have all the above setup, let us first see if everything works fine, and then we will try different Graph Toolkit components.

Go to command prompt and run the below command, this command comes with yo teams which run ngrok in the background and also create teams app package for us..

gulp ngrok-serve

Once it has run successfully, it should show some like below

Next thing, we will have to add the ngrok URL in Azure AD App registration as a redirect URL.

 

Step – Test the App in Teams

Go to teams and Click on Apps on left panel and then select upload a custom app(this button will only visible if side loading is enabled by Teams Adminstrator)

Click on Upload a custom app and select ‘Upload for me and my teams’,
Select the zip package at ‘D:\SP\samples\teamsapps\teams-graphtoolkit\package\teamsgraphtoolkit.zip’

Note -This zip file will be updated everything you run gulp ngrok-serve, so you have to make sure you upload the latest zip package whenever you have new ngrok url and also update the same in App Registration in Azure portal.

Click on Add

Once installed, we should see below output

As you see the Sign In button has come from Login Component which we added. Click on it, it should open below auth popup and ask us to log in

Once logged in, we should see below that our integration with Graph Toolkit worked 🙂

 

Now let us see how we can use another component with some minor changes.

Agenda Component

The agenda component will display the currently logged-in user’s meeting . You can read about the Agenda component here 

First, modify import to include the Agenda component

import {  Login ,Agenda} from '@microsoft/mgt-react';

Then add Scope to add permission for the user’s constent.

Providers.globalProvider = new TeamsProvider({
  clientId: '4t2eba12-24c4-4e23-b1d8-c22c4051545b',
    scopes: ['User.Read','Mail.ReadBasic','Calendars.Read'],
    authPopupUrl:"/auth.html"
});

Add Agenda component to render method

return (
       <Provider theme={theme}>
           <Flex fill={true} column styles={{
               padding: ".8rem 0 .8rem .5rem"
           }}>
               <Flex.Item>
                   <Header content="This is your tab" />
               </Flex.Item>
               <Flex.Item>
                   <div>
                       <div>
                           <Text content={entityId} />
                       </div>

                       <div>
                           <Button onClick={() => alert("It worked!")}>A sample button</Button>
                           <Login />
                       </div>
                       <div>
                           My Meetings 
                           <div>
                           <Agenda ></Agenda>                            
                           </div>
                       </div>
                   </div>
               </Flex.Item>
               <Flex.Item styles={{
                   padding: ".8rem 0 .8rem .5rem"
               }}>
                   <Text size="smaller" content="(C) Copyright Siddharth Vaghasia" />
               </Flex.Item>
           </Flex>
       </Provider>

You need to rerun the solution again as we have added new scope permission. Run the gulp ngrok-serve command again, add the url in Azure AD app registration and add the new package to Teams,

Click on Sign In, you must provide consent again as we have added new Scope. Once you Sign In, we should see the current user’s meeting as below

Conclusion

In this article, we have seen step by step guide on how to integrate Graph Toolkit in your Teams app and use the available component by just configuration. You can read more about all the components available here

As of today, the below components are available which can be used easily and there are many configurations also available for each component to customize.

 

 

Side Note –

If you want to use MSAL2Provider, you have just made the below changes, everything else should work as it is as we are just changing the provider we are using.

The initialize provider code would look like below “GraphToolkitDemoTab”

   TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsMsal2Provider({
    clientId: '123213-123-4233-232-c72232312345b',
      scopes: ['User.Read','Mail.ReadBasic','Calendars.Read'],
      authPopupUrl:"/auth.html"
  });

Below would be library imports

import {Providers, TeamsProvider} from '@microsoft/mgt'

In your auth.html, there would be below code

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
  </head>

  <body>
    <script>
       mgt.TeamsMsal2Provider.handleAuth();
    </script>
  </body>
</html>

Hope this helps…Happy Coding..!!!

(Visited 1,074 times, 1 visits today)