Edit

Microsoft Teams provider

  • Article
  • 3 minutes to read

Use the TeamsProvider inside your Microsoft Teams tab to facilitate authentication and Microsoft Graph access to all components.

To learn more about authentication providers, see providers.

Tip: For details about how to get started with creating a Microsoft Teams application with the Teams Provider, see the Build a Microsoft Teams tab getting started guide.

Difference between Teams Provider and Teams MSAL2 Provider

Unlike TeamsProvider, the Teams MSAL2 Provider support Single Sign-On (SSO) and is built on top of msal-browser for client side authentication. msal-browser implements the OAuth 2.0 Authorization Code Flow with PKCE. Authorization Code Flow is deemed more secure than Implicit Grant Flow for web applications, so we recommend usage of Teams MSAL2 Provider over the Teams Provider. For details about security issues related to implicit grant flow, see Disadvantages of the implicit flow.

All new applications should use the Teams MSAL2 Provider whenever possible. See Teams MSAL2 Provider for migration documentation.

Get started

Before using the Teams provider, you will need to make sure you have referenced the Microsoft Teams SDK in your page.

Make sure to install both the toolkit and the Microsoft Teams SDK.

npm install @microsoft/mgt @microsoft/teams-js

Next, import and use the provider.

import * as microsoftTeams from "@microsoft/teams-js";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsProvider(config);

where config is

export interface TeamsConfig {
  clientId: string;
  authPopupUrl: string; // see below for creating the popup page
  scopes?: string[];
  msalOptions?: Configuration;
}

Create the popup page

In order to sign in with your Teams credentials, you need to provide a URL that the Teams app will open in a popup, which will follow the authentication flow. This URL needs to be in your domain, and it needs to call the TeamsProvider.handleAuth(); method. That's the only thing that this page needs to do. For example:

import * as microsoftTeams from "@microsoft/teams-js";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
TeamsProvider.handleAuth();

Configure redirect URIs

After you publish the popup page on your website, you need to use the URL in the auth-popup-url/authPopupUrl property. This URL also needs to be configured as a valid redirect URI in your app configuration in the Azure AD portal.

Configure your Teams app

If you're just getting started with Teams apps, see Add tabs to Microsoft Teams apps. You can use the Developer Portal for Teams to configure, distribute, and manage your application. You can access the Developer Portal for Teams in a web browser or as a Teams App.

You can also use the Teams Toolkit in Visual Studio Code to quickly create and deploy your Teams app.

Creating an app/client ID

In order to get a client ID, you need to register your application in Azure AD.

Note: MSAL only supports the Implicit Flow for OAuth. Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

See also