Microsoft Teams-Anbieter

  • Artikel
  • 2 Minuten Lesedauer

Verwenden Sie teamsProvider auf Ihrer Microsoft Teams-Registerkarte, um die Authentifizierung und den Zugriff von Microsoft Graph auf alle Komponenten zu erleichtern.

Weitere Informationen zu Authentifizierungsanbietern finden Sie unter Anbieter.

Tipp: Ausführliche Informationen zu den ersten Schritten bei der Erstellung einer Microsoft Teams-Anwendung mit dem Teams-Anbieter finden Sie im Leitfaden zu den ersten Schritten unter Erstellen einer Microsoft Teams-Registerkarte .

Unterschied zwischen Teams-Anbieter und Teams MSAL2-Anbieter

Im Gegensatz zu TeamsProvider unterstützt der Teams MSAL2-Anbieter Single Sign-On (SSO) und basiert auf msal-browser für die clientseitige Authentifizierung. msal-browser implementiert den OAuth 2.0-Autorisierungscodeflow mit PKCE. Der Autorisierungscodeflow gilt als sicherer als der Flow für implizite Genehmigungen für Webanwendungen. Daher 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. Die Dokumentation zur Migration finden Sie unter Microsoft Teams MSAL2-Anbieter .

Erste Schritte

Bevor Sie den Teams-Anbieter verwenden, müssen Sie sicherstellen, dass Sie auf Ihrer Seite auf das Microsoft Teams SDK verwiesen haben.

Stellen Sie sicher, dass Sie sowohl das Toolkit als auch das Microsoft Teams SDK installieren.

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

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

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

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

wobei config ist

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

Erstellen der Popupseite

Um sich mit Ihren Teams-Anmeldeinformationen anzumelden, müssen Sie eine URL angeben, die die Teams-App in einem Popup öffnet, das dem Authentifizierungsablauf folgt. Diese URL muss sich in Ihrer Domäne befinden und die TeamsProvider.handleAuth(); -Methode aufrufen. Das ist das Einzige, was diese Seite tun muss. Zum Beispiel: 

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

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

Konfigurieren von Umleitungs-URIs

Nachdem Sie die Popupseite auf Ihrer Website veröffentlicht haben, müssen Sie die URL in der auth-popup-url/authPopupUrl -Eigenschaft verwenden. Diese URL muss auch als gültiger Umleitungs-URI in Ihrer App-Konfiguration im Azure AD-Portal konfiguriert werden.

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

Um eine Client-ID zu erhalten, müssen Sie Ihre Anwendung in Azure AD registrieren.

Hinweis: MSAL unterstützt nur den impliziten Fluss für OAuth. Stellen Sie sicher, dass Sie impliziten Fluss in Ihrer Anwendung im Azure-Portal aktivieren (standardmäßig nicht aktiviert). Navigieren Sie unter Authentifizierung zum Abschnitt Implizite Genehmigung , und aktivieren Sie die Kontrollkästchen für Zugriffstoken und ID-Token.

Siehe auch