@mattbillfred/mgt-teamsfx-provider NPM

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

Install the packages

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

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

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.

@mattbillfred/mgt-teamsfx-provider v3.1.3-next.mgt-chat.a661926e2

Microsoft Graph Toolkit TeamsFx Provider

Usage

See also