Microsoft Graph Toolkit TeamsFx Provider

The Microsoft Graph Toolkit (mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.

The @microsoft/mgt-teamsfx-provider package exposes the TeamsFxProvider class which uses TeamsFx to sign in users and acquire tokens to use with Microsoft Graph.

To learn more about authentication providers, see Providers.

Usage

1. Install the packages

   npm install @microsoft/mgt-element @microsoft/mgt-teamsfx-provider @microsoft/teamsfx

2. Initialize the provider and login to get the required access token

   • Initialize the provider use TeamsUserCredential inside your component.

         // Import the providers and credential at the top of the page
         import {Providers} from '@microsoft/mgt-element';
         import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
         import {TeamsUserCredential, TeamsUserCredentialAuthConfig} from "@microsoft/teamsfx";
     
         const authConfig: TeamsUserCredentialAuthConfig = {
             clientId: process.env.REACT_APP_CLIENT_ID,
             initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
         };
         const scope = ["User.Read"];
     
         const credential = new TeamsUserCredential(authConfig);
         const provider = new TeamsFxProvider(credential, scope);
         Providers.globalProvider = provider;

   • Use the credential.login(scopes) method to get the required access token.

         // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
         await credential.login(this.scope);
         Providers.globalProvider.setState(ProviderState.SignedIn);

3. Now you can add any component in your HTML page or in your render() method when using React and it will use the TeamsFx context to access Microsoft Graph.

       <!-- Using HTML -->
       <mgt-person query="me" view="threelines"></mgt-person>

       // Using React
       public render(): void {
           return (
               <div>
                   <Person personQuery="me" view="threelines"></Person>
               </div>
           );
       }

For a sample that shows you how to initialize the TeamsFx provider, see the Contacts Exporter sample.

See also

• Microsoft Graph Toolkit docs
• Microsoft Graph Toolkit repository
• Microsoft Graph Toolkit playground
• TeamsFx docs
• TeamsFx SDK document