@vonrehberg.consulting/mgt-teamsfx-provider v2.10.0

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 @vonrehberg.consulting/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 @vonrehberg.consulting/mgt-element @vonrehberg.consulting/mgt-teamsfx-provider @microsoft/teamsfx

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

   Use TeamsUserCredential (Recommended)

   1. Initialize the provider inside your component.

          // Import the providers and credential at the top of the page
          import {Providers} from '@vonrehberg.consulting/mgt-element';
          import {TeamsFxProvider} from '@vonrehberg.consulting/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;

   2. 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);

   Use TeamsFx class

   Note: TeamsFx class will be deprecated and removed from future release of TeamsFx SDK, and it is recommended to use TeamsUserCredential instead

   1. Initialize the provider inside your component.

          // Import the providers and credential at the top of the page
          import {Providers} from '@vonrehberg.consulting/mgt-element';
          import {TeamsFxProvider} from '@vonrehberg.consulting/mgt-teamsfx-provider';
          import {TeamsUserCredential} from "@microsoft/teamsfx";
      
          const scope = ["User.Read"];
          const teamsfx = new TeamsFx();
          const provider = new TeamsFxProvider(teamsfx, scope);
          Providers.globalProvider = provider;

   2. Use the teamsfx.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 teamsfx.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={PersonViewType.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