Freigeben über

Aktivieren des einmaligen Anmeldens für die Teams-App

Microsoft Teams bietet eine Funktion für einmaliges Anmelden (Single Sign-On, SSO) für eine App, um ein angemeldetes Teams-Benutzertoken für den Zugriff auf Microsoft Graph und andere APIs abzurufen. Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) optimiert den Prozess, indem bestimmte Microsoft Entra Workflows und Integrationen in einfache, allgemeine APIs integriert werden. Daher können Sie SSO-Funktionen mühelos in Ihre Teams-App integrieren. Weitere Informationen finden Sie unter Authentifizieren von Benutzern in Microsoft Teams.

Schlüsselkonfigurationen

Um einmaliges Anmelden zu aktivieren, konfigurieren Sie Ihre Teams-App wie folgt:

  • Microsoft Entra App-Manifest: Stellen Sie sicher, dass Sie URIs definieren, einschließlich des URI, der die Microsoft Entra Authentifizierungs-App identifiziert, und den Umleitungs-URI, der das Token zurückgibt.

  • Teams-App-Manifest: Verbinden Sie Ihre SSO-App mit Ihrer Teams-App, indem Sie die richtige Konfiguration integrieren.

  • Agents Toolkit-Konfiguration und Infrastrukturdateien: Stellen Sie sicher, dass die erforderlichen Konfigurationen vorhanden sind, um einmaliges Anmelden für Ihre Teams-App zu aktivieren.

  • SSO-App-Informationen in Agents Toolkit-Konfigurationsdateien: Stellen Sie sicher, dass die Authentifizierungs-App beim Back-End-Dienst registriert und das Agents Toolkit sie während des Debuggens oder der Vorschau der Teams-App initiiert.

Erstellen Microsoft Entra App-Manifests

  1. Laden Sie die Microsoft Entra-App-Manifestvorlage herunter.

  2. Fügen Sie den heruntergeladenen App-Manifestvorlagencode zur Datei hinzu ./aad.manifest.json . Auf diese Weise können Sie verschiedene Aspekte Ihrer App-Registrierung anpassen und das Manifest nach Bedarf aktualisieren. Weitere Informationen finden Sie unter App-Manifest.

Aktualisieren des Teams-App-Manifests

Fügen Sie in der ./appPackages/manifest.json Datei den folgenden Code hinzu:

"webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
}

webApplicationInfostellt Ihre Microsoft Entra App-ID und Microsoft Graph-Informationen bereit, um Benutzern bei der Anmeldung bei Ihrer App zu helfen.

Hinweis

Sie können verwenden {{ENV_NAME}} , um auf Variablen in der env/.env.{TEAMSFX_ENV} Datei zu verweisen.

Aktualisieren der Konfigurationsdateien des Agents-Toolkits

  1. Suchen Sie Ihre Agents Toolkit-Konfigurationsdateien, z ./m365agents.yml . B. und ./m365agents.local.yml. Aktualisieren Sie die erforderlichen Konfigurationen im Zusammenhang mit Microsoft Entra in diesen Dateien.

  2. Fügen Sie die aadApp/create Aktion unter und ./m365agents.local.yml hinzu provision./m365agents.yml, um eine neue Microsoft Entra App zu erstellen, die für einmaliges Anmelden verwendet wird:

    - uses: aadApp/create
  with:
    name: "YOUR_AAD_APP_NAME"
    generateClientSecret: true
    signInAudience: "AzureADMyOrg"
  writeToEnvironmentFile:
      clientId: AAD_APP_CLIENT_ID
      clientSecret: SECRET_AAD_APP_CLIENT_SECRET
      objectId: AAD_APP_OBJECT_ID
      tenantId: AAD_APP_TENANT_ID
      authority: AAD_APP_OAUTH_AUTHORITY

    Hinweis

    Ersetzen Sie den name Wert durch den gewünschten Namen für Ihre Teams-App.

    Weitere Informationen finden Sie unter aadApp/create.

  3. Fügen Sie die aadApp/update Aktion unter und ./m365agents.local.yml hinzu provision./m365agents.yml, um Ihre Microsoft Entra-App zu aktualisieren:

    - uses: aadApp/update
  with:
    manifestPath: "./aad.manifest.json"
    outputFilePath: "./build/aad.manifest.${{TEAMSFX_ENV}}.json"

    Hinweis

    • Aktualisieren Sie den manifestPath Wert in den relativen Pfad der Microsoft Entra App-Manifestvorlageaad.manifest.json, wenn Sie den Pfad der Datei geändert haben.
    • Positionieren Sie in einem lokalen Setup den aad/update nach der file/createOrUpdateEnvironmentFile Aktion. Dies ist erforderlich, da aad/update die Ausgabe von file/createOrUpdateEnvironmentFileverwendet wird.

    Weitere Informationen finden Sie unter aadApp/update.

  4. Aktualisieren cli/runNpmCommand Sie für ein React-Projekt unter deploy.

  5. Wenn Sie eine Registerkarten-App mit dem React Framework in der CLI erstellen, suchen Sie die cli/runNpmCommand Aktion mit build app in der m365agents.yml Datei, und fügen Sie die folgenden Umgebungsvariablen hinzu:

    env:
  REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
  REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html

  6. Wenn Sie eine Registerkarten-App mit React Framework erstellen, suchen Sie die Aktion für die Bereitstellung in m365agents.local.yml der file/createOrUpdateEnvironmentFile Datei, und fügen Sie die folgenden Umgebungsvariablen hinzu:

    envs:
  ...
  REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
  REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html

Aktualisieren des Quellcodes

Nachdem die oben genannten Änderungen implementiert wurden, ist Ihre Umgebung vorbereitet. Sie können jetzt Ihren Code aktualisieren, um SSO in Ihre Teams-App zu integrieren.

Vanilla JavaScript

Verwenden Sie für eine Registerkarten-App, die nicht React verwendet, den folgenden Code als einfaches Beispiel, um das SSO-Token abzurufen:

function getSSOToken() {
  return new Promise((resolve, reject) => {
    microsoftTeams.authentication.getAuthToken()
      .then((token) => resolve(token))
      .catch((error) => reject("Error getting token: " + error));
  });
}

function getBasicUserInfo() {
  getSSOToken().then((ssoToken) => {
    const tokenObj = JSON.parse(window.atob(ssoToken.split(".")[1]));
    console.log(`username: ${tokenObj.name}`);
    console.log(`user email: ${tokenObj.preferred_username}`);
  });
}

React

Stellen Sie für React Projekte sicher, dass die folgenden Umgebungsvariablen im Bereitstellungsprozess festgelegt sind:

Führen Sie die folgenden Schritte aus, um Ihren Quellcode zu aktualisieren:

  1. Verschieben Sie die auth-start.html Dateien und auth-end.html aus dem auth/public Ordner in den public/ Ordner. Diese HTML-Dateien dienen der Verarbeitung von Authentifizierungsumleitungen.

  2. Verschieben Sie sso den Ordner unter in auth/src/sso/.

    1. InitTeamsFx: Diese Datei führt eine Funktion aus, die das TeamsFx SDK initialisiert. Nach der SDK-Initialisierung wird die GetUserProfile Komponente geöffnet.
    2. GetUserProfile: Diese Datei führt eine Funktion aus, um Benutzerinformationen durch Aufrufen des Microsoft-Graph-API abzurufen.

  3. Importieren Sie , und fügen Sie sie hinzu InitTeamsFxWelcome.*.

Weitere Informationen finden Sie unter SSO-aktivierte Registerkarten-App.

Debuggen Ihrer App

Um Ihre App zu debuggen, drücken Sie die Taste F5 . Agents Toolkit verwendet das Microsoft Entra-Manifest, um eine SSO-fähige App zu registrieren. Weitere Informationen finden Sie unter Lokales Debuggen Ihrer Teams-App.

Anpassen Microsoft Entra Apps

Mit dem Teams-App-Manifest können Sie verschiedene Aspekte Ihrer App-Registrierung anpassen. Sie können das Manifest nach Bedarf aktualisieren.

Weitere API-Berechtigungen für den Zugriff auf die gewünschten APIs finden Sie unter Bearbeiten Microsoft Entra Manifests.

Informationen zum Anzeigen Ihrer Microsoft Entra-App in Azure-Portal finden Sie unter Bearbeiten Microsoft Entra Manifests.

Siehe auch