Aktivieren des einmaligen Anmeldens für die Teams-App

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.

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:

• Ein JavaScript-Projekt finden Sie auf der Registerkarte JavaScript-Beispiel.

• Informationen zu einem TypeScript-Projekt finden Sie unter TypeScript-Beispiel auf der Registerkarte.

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.

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

1. 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.

2. Registrieren Sie mindestens einen Befehl in commandLists.

   Enthält commandLists Befehle, die Ihr Bot Benutzern vorschlagen kann. Wenn Sie die teamsFx Botvorlage verwenden, legen Sie die folgenden Werte fest:

   {
     "title": "profile",
     "description": "Show user profile using Single Sign On feature"
   }
   

3. Das validDomains Feld enthält die Domänen für Websites, die die App innerhalb des Teams-Clients lädt. Aktualisieren Sie den folgenden Wert:

   "validDomains": [
   "${{BOT_DOMAIN}}"
   ]
   

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 den folgenden Code aadApp/create unter und ./m365agents.local.yml hinzu provision./m365agents.yml, um neue Microsoft Entra-Apps zu erstellen, die für einmaliges Anmelden verwendet werden:

   - 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
         authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST
   

   Hinweis

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

   Weitere Informationen finden Sie unter aadApp/create.

3. Fügen Sie den folgenden Code aadApp/update unter ./m365agents.ymlprovision und ./m365agents.local.yml hinzu, 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.

   Weitere Informationen finden Sie unter aadApp/update.

4. Suchen Sie die Aktion in m365agents.local.yml der createOrUpdateEnvironmentFile Datei, und fügen Sie die folgenden Umgebungsvariablen hinzu:

   envs:
     ...
     M365_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
     M365_CLIENT_SECRET: ${{SECRET_AAD_APP_CLIENT_SECRET}}
     M365_TENANT_ID: ${{AAD_APP_TENANT_ID}}
     INITIATE_LOGIN_ENDPOINT: ${{BOT_ENDPOINT}}/auth-start.html
     M365_AUTHORITY_HOST: ${{AAD_APP_OAUTH_AUTHORITY_HOST}}
     M365_APPLICATION_ID_URI: api://botid-${{BOT_ID}}
   

Aktualisieren der Infrastruktur

Aktualisieren Sie Microsoft Entra konfigurationen in Ihrem Remotedienst. Das folgende Beispiel zeigt die Konfigurationseinstellungen für eine Azure-Web-App:

• M365_CLIENT_ID: Microsoft Entra App-Client-ID
• M365_CLIENT_SECRET: Microsoft Entra geheimer Clientschlüssel der App
• M365_TENANT_ID: Mandanten-ID der Microsoft Entra-App
• INITIATE_LOGIN_ENDPOINT: Anmeldestartseite für die Authentifizierung
• M365_AUTHORITY_HOST: Microsoft Entra App-OAuth-Autoritätshost
• M365_APPLICATION_ID_URI: Bezeichner-URI für Microsoft Entra App

Führen Sie die folgenden Schritte aus, um die teamsFx Registerkarten- oder Botvorlage zu verwenden:

1. Öffnen Sie die infra/azure.parameters.json Datei, und fügen Sie den folgenden Code hinzu:

   "m365ClientId": {
     "value": "${{AAD_APP_CLIENT_ID}}"
   },
   "m365ClientSecret": {
     "value": "${{SECRET_AAD_APP_CLIENT_SECRET}}"
   },
   "m365TenantId": {
     "value": "${{AAD_APP_TENANT_ID}}"
   },
   "m365OauthAuthorityHost": {
     "value": "${{AAD_APP_OAUTH_AUTHORITY_HOST}}"
   }
   

2. Öffnen Sie infra/azure.bicep die Datei, und fügen Sie den folgenden Code nach hinzu param location string = resourceGroup().location:

   param m365ClientId string
   param m365TenantId string
   param m365OauthAuthorityHost string
   param m365ApplicationIdUri string = 'api://botid-${botAadAppClientId}'
   @secure()
   param m365ClientSecret string
   

3. Fügen Sie den folgenden Code in der infra/azure.bicep Datei hinzuoutput:

   resource webAppSettings 'Microsoft.Web/sites/config@2021-02-01' = {
     name: '${webAppName}/appsettings'
     properties: {
       M365_CLIENT_ID: m365ClientId
       M365_CLIENT_SECRET: m365ClientSecret
       INITIATE_LOGIN_ENDPOINT: uri('https://${webApp.properties.defaultHostName}', 'auth-start.html')
       M365_AUTHORITY_HOST: m365OauthAuthorityHost
       M365_TENANT_ID: m365TenantId
       M365_APPLICATION_ID_URI: m365ApplicationIdUri
       BOT_ID: botAadAppClientId
       BOT_PASSWORD: botAadAppClientSecret
       RUNNING_ON_AZURE: '1'
     }
   }
   

   Hinweis

   • Um ihrer Azure-Web-App zusätzliche Konfigurationen hinzuzufügen, fügen Sie die Konfigurationen in hinzu webAppSettings.
   • Möglicherweise müssen Sie auch die Standardknotenversion definieren, indem Sie die folgende Konfiguration hinzufügen: bash WEBSITE_NODE_DEFAULT_VERSION: '14.20.0'

   Aktualisieren des Quellcodes

   • Bot:
   • Nachrichtenerweiterung

   1. Verschieben Sie die Dateien im auth/sso Ordner in src. Die ProfileSsoCommandHandler -Klasse dient als SSO-Befehlshandler zum Abrufen von Benutzerinformationen mithilfe eines SSO-Tokens. Sie können diese Methode verwenden, um Ihren eigenen SSO-Befehlshandler zu entwickeln.

   2. Verschieben Sie den auth/public Ordner in src/public. Dieser Ordner enthält HTML-Seiten für die Bot-App. Beim Initiieren von SSO-Flows mit Microsoft Entra wird der Benutzer zu diesen Seiten umgeleitet.

   3. Führen Sie den folgenden Befehl im ./ Ordner aus:

      npm install copyfiles --save-dev
      

   4. Aktualisieren Sie den folgenden Befehl in der package.json Datei:

      "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",
      

      Die html-Seiten, die für die Authentifizierungsumleitung verwendet werden, werden beim Erstellen dieses Botprojekts kopiert.

   5. src/index Fügen Sie in der Datei den folgenden Befehl hinzu, um zu importierenisomorphic-fetch:

       require("isomorphic-fetch");
      

   6. Fügen Sie den folgenden Befehl hinzu, um zu Authentifizierungsseiten umzuleiten:

      server.get(
          "/auth-:name(start|end).html",
          restify.plugins.serveStatic({
            directory: path.join(__dirname, "public"),
          })
      );
      

   7. Aktualisieren Sie commandApp.requestHandler , um sicherzustellen, dass die Authentifizierung mit dem folgenden Code funktioniert:

      await commandApp.requestHandler(req, res).catch((err) => {
          // Error message including "412" means it is waiting for user's consent, which is a normal process of SSO, sholdn't throw this error.
          if (!err.message.includes("412")) {
          throw err;
          }
      });
      

   8. Fügen Sie und ssoCommands in src/internal/initializeConversationBot hinzussoConfig:

      import { ProfileSsoCommandHandler } from "../profileSsoCommandHandler";
      
      export const commandBot = new ConversationBot({
          ...
          // To learn more about ssoConfig, please refer atk sdk document: https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk
          ssoConfig: {
          aad :{
            scopes:["User.Read"],
          },
          },
          command: {
          enabled: true,
          commands: [new HelloWorldCommandHandler() ],
          ssoCommands: [new ProfileSsoCommandHandler()],
          },
      });