Microsoft Teams MSAL2-Anbieter

  • Artikel
  • 4 Minuten Lesedauer

Verwenden Sie den Microsoft Teams MSAL2-Anbieter auf Ihrer Microsoft Teams-Registerkarte, um die Authentifizierung und den Zugriff von Microsoft Graph auf alle Komponenten zu erleichtern. Der Anbieter kann für einmaliges Anmelden (Single Sign-On, SSO) oder interaktive Anmeldung verwendet werden.

Weitere Informationen finden Sie unter Anbieter.

Tipp: Ausführliche Informationen zum Erstellen einer Microsoft Teams-Anwendung mit dem Teams MSAL2-Anbieter finden Sie unter Erstellen einer Microsoft Teams-Registerkarte und Erstellen einer Microsoft Teams-Registerkarte mit SSO.

Unterschied zwischen Teams-Anbieter und Teams MSAL2-Anbieter

Im Gegensatz zum Teams-Anbieter unterstützt der Teams MSAL2-Anbieter einmaliges Anmelden (Single Sign-On, SSO) und basiert auf msal-browser für die clientseitige Authentifizierung. msal-browser implementiert den OAuth 2.0-Autorisierungscodeflow mit PKCE. Da der Autorisierungscodeflow für Webanwendungen als sicherer gilt als der Flow für implizite Genehmigungen, empfehlen wir die Verwendung des Teams MSAL2-Anbieters über den Teams-Anbieter. Ausführliche Informationen zu Sicherheitsproblemen im Zusammenhang mit dem Flow für implizite Genehmigungen finden Sie unter Nachteile des impliziten Flusses.

Alle neuen Anwendungen sollten nach Möglichkeit den Microsoft Teams MSAL2-Anbieter verwenden.

Erste Schritte

Der Anbieter kann im interaktiven clientseitigen Authentifizierungsmodus oder im SSO-Modus verwendet werden.

Clientseitige Authentifizierung

Bei der clientseitigen Authentifizierung (oder interaktiven Authentifizierung) wird der Benutzer beim ersten Starten der App zur Authentifizierung aufgefordert. Der Benutzer muss eine Anmeldeschaltfläche verwenden, um den Authentifizierungsflow zu initiieren. Dies kann auf dem Client erfolgen und erfordert keinen Back-End-Dienst.

SSO-Authentifizierung

Um den Benutzer nicht aufzufordern, sich bei der App zu authentifizieren, können Microsoft Teams-Registerkarten auch SSO verwenden , um Benutzer automatisch zu authentifizieren. Dieser Prozess erfordert jedoch einen Back-End-Dienst, der verwendet wird, um das von Microsoft Teams bereitgestellte Token mit einem Zugriffstoken auszutauschen, das für den Zugriff auf Microsoft Graph verwendet werden kann.

Der Teams MSAL2-Anbieter unterstützt den SSO-Modus, der aktiviert wird, wenn ssoUrl \ sso-url auf einen Back-End-Dienst festgelegt ist, der die Token austauschen kann. Der Back-End-Dienst muss eine API (z api/token. B. ) verfügbar machen, die ein Authentifizierungstoken von Microsoft Teams empfängt, und den on-behalf-of Flow verwenden, um das Token gegen ein Zugriffstoken auszutauschen, das auf Microsoft Graph zugreifen kann. Eine Referenzimplementierung eines Knoten-Back-End-Diensts finden Sie im Microsoft Teams Node SSO-Beispiel.

Initialisieren des Anbieters

Bevor Sie den Microsoft Teams MSAL2-Anbieter verwenden, verweisen Sie auf Ihrer Seite auf das Microsoft Teams SDK .

Initialisieren Sie den Microsoft Teams MSAL2-Anbieter in Ihrem Hauptcode.

Stellen Sie beim Initialisieren des Teams MSAL2-Anbieters in JavaScript sicher, dass Sie sowohl das Toolkit als auch das Microsoft Teams SDK installieren.

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

Importieren Sie als Nächstes den Anbieter, und verwenden Sie diesen.

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

TeamsMsal2Provider.microsoftTeamsLib = MicrosoftTeams;

Providers.globalProvider = new TeamsMsal2Provider(config);

wobei config ist

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
}

Erstellen der Popupseite

Um sich mit Ihren Teams-Anmeldeinformationen anzumelden und die Zustimmung zu verarbeiten, müssen Sie eine URL angeben, die die Teams-App in einem Popup öffnet, das dem Authentifizierungsablauf folgt. Erstellen Sie eine neue Seite in Ihrer Anwendung (z. B https://mydomain.com/auth. ), die die Authentifizierungsumleitung behandelt und die TeamsMsal2Provider.handleAuth -Methode aufruft. Das ist das Einzige, was diese Seite tun muss. Beispiel:

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

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

Konfigurieren Ihrer Teams-App

Wenn Sie gerade erst mit Teams-Apps beginnen, lesen Sie Hinzufügen von Registerkarten zu Microsoft Teams-Apps. Sie können das Entwicklerportal für Teams verwenden, um Ihre Anwendung zu konfigurieren, zu verteilen und zu verwalten. Sie können in einem Webbrowser oder als Teams-App auf das Entwicklerportal für Teams zugreifen.

Sie können auch das Teams-Toolkit in Visual Studio Code verwenden, um Ihre Teams-App schnell zu erstellen und bereitzustellen.

Erstellen einer App-/Client-ID

Ausführliche Informationen zum Registrieren einer App und zum Abrufen einer Client-ID für die interaktive Authentifizierung finden Sie unter Erstellen einer Azure Active Directory-App.

Ausführliche Informationen zum Registrieren einer App und zum Abrufen einer Client-ID und eines geheimen Schlüssels für SSO finden Sie unter Erstellen einer Microsoft Teams-Registerkarte mit einmaligem Anmelden.

Migrieren von Teams-Anbieter zu Teams MSAL2-Anbieter

So migrieren Sie eine Anwendung, die Den Teams-Anbieter verwendet, zum Microsoft Teams MSAL2-Anbieter:

  1. Wechseln Sie zum Azure-Portal unter https://portal.azure.com.

  2. Wählen Sie im Menü Azure Active Directory aus.

  3. Wählen Sie im Azure Active Directory-Menü App-Registrierungen aus.

  4. Wählen Sie die App-Registrierung der App aus, die Sie derzeit verwenden.

  5. Wechseln Sie im linken Menü zu Authentifizierung.

  6. Wählen Sie unter Plattformkonfigurationendie Option Plattform hinzufügen und dann Einzelseitenanwendung aus.

  7. Entfernen Sie alle Umleitungs-URIs, die Sie derzeit unter Web registriert haben, und fügen Sie sie stattdessen unter Single-Page-Anwendung hinzu.

  8. Ersetzen Sie in Ihrem Code TeamsProvider durch Teams MSAL2-Anbieter.

    Wenn Sie Ihren Anbieter im JS/TS-Code initialisieren, führen Sie die folgenden Schritte aus:

    Ersetzen Sie die Import-Anweisung für durch mgt-teams-provider .

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

    Ersetzen Sie die Initialisierung von MsalProvider durch.

    Providers.globalProvider = new TeamsMsal2Provider(config);

    Wenn Sie den Anbieter in HTML initialisieren, ersetzen Sie

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

    mit 

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

Siehe auch