Microsoft Teams Proveedor MSAL2

Use el Microsoft Teams MSAL2 dentro de la pestaña Microsoft Teams para facilitar la autenticación y microsoft Graph acceso a todos los componentes. El proveedor puede usarse para el inicio de sesión único (SSO) o el inicio de sesión interactivo.

Para obtener más información, vea proveedores.

Sugerencia: Para obtener más información acerca de cómo crear una aplicación Microsoft Teams con el proveedor de MSAL2 de Teams, vea Build a Microsoft Teams tab y Build a Microsoft Teams tab with SSO.

Diferencia entre Teams provider y Teams MSAL2 Provider

A diferencia del proveedor Teams, el proveedor MSAL2 de Teams admite el inicio de sesión único (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. Dado que el Flow de código de autorización se considera más seguro que el Flow de concesión implícita para aplicaciones web, se recomienda usar 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 Teams proveedor MSAL2 siempre que sea posible.

Comenzar

El proveedor se puede usar en modo de autenticación del lado cliente interactivo o en modo SSO.

Autenticación del lado cliente

En la autenticación del lado cliente (o autenticación interactiva), se pedirá al usuario que se autentique cuando inicie la aplicación por primera vez. El usuario tendrá que usar un botón de inicio de sesión para iniciar el flujo de autenticación. Esto se puede hacer en el cliente y no requiere un servicio back-end.

Autenticación SSO

Para evitar pedir al usuario que se autentique en la aplicación, Microsoft Teams pestañas también pueden usar SSO para autenticar automáticamente a los usuarios. Sin embargo, este proceso requiere un servicio back-end que se usa para intercambiar el token proporcionado por Microsoft Teams con un token de acceso que se puede usar para obtener acceso a Microsoft Graph.

Teams El proveedor MSAL2 admite el modo SSO, que se habilita cuando se establece en un servicio back-end que es capaz de intercambiar ssoUrl \ sso-url los tokens. El servicio back-end es necesario para exponer una API (como ) que recibirá un token de autenticación de Microsoft Teams y usar el flujo para intercambiar el token por un token de acceso que pueda tener acceso api/token a on-behalf-of Microsoft Graph. Para obtener una implementación de referencia de un servicio back-end de nodo, vea Microsoft Teams ejemplo de SSO de nodo.

Inicializar el proveedor

Antes de usar el Teams MSAL2, asegúrese de hacer referencia al SDK Microsoft Teams en la página.

Inicializa el Teams MSAL2 en el código principal.

Al inicializar el Teams MSAL2 en JavaScript, asegúrese de instalar el kit de herramientas y Microsoft Teams SDK.

npm install @microsoft/teams-js @microsoft/mgt-element @microsoft/mgt-teams-msal2-provider

A continuación, importe y use el proveedor.

import {Providers} from '@microsoft/mgt-element';
import {TeamsMsal2Provider} from '@microsoft/mgt-teams-msal2-provider';
import * as MicrosoftTeams from "@microsoft/teams-js";

TeamsProvider.microsoftTeamsLib = MicrosoftTeams;

Providers.globalProvider = new TeamsMsal2Provider(config);

donde config está

export interface TeamsMsal2Config {
  clientId: string;
  authPopupUrl: string; // see below for creating the popup page
  scopes?: string[];
  msalOptions?: Configuration;
  ssoUrl?: string; // ex: '/api/token',
  autoConsent?: boolean,
  httpMethod: HttpMethod; //ex HttpMethod.POST
}

Crear la página emergente

Para iniciar sesión con las Teams y controlar el consentimiento, debes proporcionar una dirección URL que la aplicación Teams abra en un elemento emergente, que seguirá el flujo de autenticación. Cree una nueva página en la aplicación (por ejemplo, que controlará el redireccionamiento de https://mydomain.com/auth) autenticación y llamará al TeamsMsal2Provider.handleAuth método. Eso es lo único que necesita hacer esta página. Por ejemplo:

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {TeamsMsal2Provider} from '@microsoft/mgt-teams-msal2-provider';

TeamsMsal2Provider.microsoftTeamsLib = MicrosoftTeams;
TeamsMsal2Provider.handleAuth();

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 el manifiesto de la aplicación.

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

Para obtener más información sobre cómo registrar una aplicación y obtener un identificador de cliente para la autenticación interactiva, consulta Crear una Azure Active Directory aplicación.

Para obtener más información acerca de cómo registrar una aplicación y obtener un identificador de cliente y un secreto para SSO, consulte Build a Microsoft Teams tab with Single Sign-On.

Migración de un Teams a Teams MSAL2

Para migrar una aplicación que usa Teams proveedor al Teams MSAL2:

  1. Vaya a Azure Portal en https://portal.azure.com .

  2. En el menú, seleccione Azure Active Directory.

  3. En el Azure Active Directory, seleccione Registros de aplicaciones.

  4. Selecciona el registro de la aplicación de la aplicación que estás usando actualmente.

  5. En el menú de la izquierda, vaya a Autenticación.

  6. En Configuraciones de plataforma, elija Agregar una plataforma y seleccione Aplicación de página única.

  7. Quite todos los URI de redireccionamiento que haya registrado actualmente en Web y, en su lugar, agrégrelos en Aplicación de página única.

  8. En el código, reemplace TeamsProvider por Teams MSAL2 Provider.

    Si está inicializando su proveedor en el código JS/TS, siga estos pasos:

    Reemplazar la instrucción import por mgt-teams-provider por

    import {TeamsMsal2Provider} from '@microsoft/mgt-teams-msal2-provider';
    

    Reemplazar la inicialización de MsalProvider por

    Providers.globalProvider = new TeamsMsal2Provider(config);
    

    Si va a inicializar el proveedor en HTML, reemplace

    <mgt-teams-provider client-id="<YOUR_CLIENT_ID>" auth-popup-url="/AUTH-PATH" ... ></mgt-teams-provider>
    

    con

    <mgt-teams-msal2-provider client-id="<YOUR_CLIENT_ID>" auth-popup-url="/AUTH-PATH" ... ></mgt-teams-msal2-provider>
    

Vea también