Proveedor de Microsoft Teams

Use teamsProvider dentro de la pestaña Microsoft Teams para facilitar la autenticación y microsoft Graph acceso a todos los componentes.

Para obtener más información sobre los proveedores de autenticación, vea proveedores.

Sugerencia: Para obtener más información acerca de cómo empezar a crear una aplicación Microsoft Teams con el proveedor de Teams, consulte la guía de introducción a la Microsoft Teams crear una aplicación de Microsoft Teams.

Diferencia entre Teams provider y Teams MSAL2 Provider

A diferencia de TeamsProvider, el proveedor Teams MSAL2 admite single Sign-On (SSO) y se basa en msal-browser para la autenticación del lado cliente. msal-browser implementa el código de autorización de OAuth 2.0 Flow con PKCE. El Flow de código de autorización se considera más seguro que el Flow de concesión implícita para aplicaciones web, por lo que se recomienda el uso de Teams proveedor MSAL2 sobre el Teams de administración. Para obtener más información acerca de los problemas de seguridad relacionados con el flujo de concesión implícito, vea Disadvantages of the implicit flow.

Todas las aplicaciones nuevas deben usar el Teams MSAL2 siempre que sea posible. Consulte Teams MSAL2 Provider para obtener documentación sobre la migración.

Comenzar

Antes de usar el Teams, deberá asegurarse de que ha hecho referencia al SDK Microsoft Teams en la página.

Asegúrese de instalar tanto el kit de herramientas como Microsoft Teams SDK.

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

A continuación, importe y use el proveedor.

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

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

donde config está

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

Crear la página emergente

Para iniciar sesión con las credenciales de Teams, debes proporcionar una dirección URL que la aplicación Teams abra en un elemento emergente, que seguirá el flujo de autenticación. Esta dirección URL debe estar en su dominio y debe llamar al TeamsProvider.handleAuth(); método. Eso es lo único que necesita hacer esta página. Por ejemplo:

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

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

Configurar URI de redireccionamiento

Después de publicar la página emergente en su sitio web, debe usar la dirección URL en la auth-popup-url/authPopupUrl propiedad. Esta dirección URL también debe configurarse como un URI de redireccionamiento válido en la configuración de la aplicación en el portal de Azure AD.

Configurar la aplicación Teams aplicación

Si estás empezando a usar Teams aplicaciones, consulta Agregar pestañasa Microsoft Teams aplicaciones . También puedes usar App Studio para desarrollar rápidamente el manifiesto de la aplicación.

Creación de un identificador de aplicación o cliente

Para obtener un identificador de cliente, debe registrar la aplicación en Azure AD.

Nota: MSAL solo admite el Flow implícito para OAuth. Asegúrese de habilitar los Flow implícitos en la aplicación en Azure Portal (no está habilitado de forma predeterminada). En Autenticación, busque la sección Concesión implícita y seleccione las casillas de los tokens de Access y los tokens de id..

Vea también