Freigeben über

Hinzufügen des einmaligen Anmeldens zu Ihrer Teams-App

  • Artikel

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. Teams Toolkit erleichtert die Interaktion, indem einige der Microsoft Entra ID-Flows und Integrationen hinter einigen einfachen APIs abstrahiert werden. Dadurch können Sie Ihrer Teams-App ganz einfach SSO-Features hinzufügen.

Aktivieren des einmaligen Anmeldens im Teams Toolkit für Visual Studio

Teams bietet die SSO-Funktion für eine App mithilfe des Microsoft Teams-Toolkits für Microsoft Visual Studio.

  1. Öffnen Sie Visual Studio.

  2. Wählen Sie Project>Teams Toolkit>Authentifizierungscode hinzufügen aus.

    Screenshot: Option zum Hinzufügen von Authentifizierungscode

Das Teams Toolkit unterstützt Sie beim Generieren der Authentifizierungsdateien im Ordner TeamsFx-Auth , einschließlich der App-Manifest-Vorlagendatei (früher als Teams-App-Manifest bezeichnet) für die Microsoft Entra-Anwendung und die Umleitungsseiten der Authentifizierung. Verknüpfen Sie die Dateien mit Ihrer Teams-Anwendung, indem Sie die Authentifizierungskonfigurationen aktualisieren, um sicherzustellen, dass das einmalige Anmelden für Ihre Anwendung funktioniert.

  • Geben Sie in der Manifestdatei der Microsoft Entra-App die URIs (Uniform Resource Identifier) an, z. B. den URI zum Identifizieren der Microsoft Entra-Authentifizierungs-App und den Umleitungs-URI für die Tokenrückgabe.
  • Fügen Sie in der App-Manifestdatei die SSO-Anwendung hinzu, um sie mit der Teams-Anwendung zu verknüpfen.
  • Fügen Sie SSO-Anwendungsinformationen in Teams Toolkit-Konfigurationsdateien hinzu, um sicherzustellen, dass die Authentifizierungs-App beim Back-End-Dienst registriert werden kann, und starten Sie das Teams Toolkit, wenn Sie die Teams-Anwendung debuggen oder eine Vorschau anzeigen.

Anwendung auf der Registerkarte „Teams“.

  1. Aktualisieren des Microsoft Entra-App-Manifests: TeamsFx-Auth/aad.manifest.template.json Datei ist eine Microsoft Entra-App-Manifestvorlage. Sie können diese Datei kopieren und in einen beliebigen Ordner Ihres Projekts einfügen, als umbenennen aad.manifest.json und sich den Pfad zu dieser Datei notieren. Die folgenden Updates in der Vorlage zum Erstellen/Aktualisieren einer Microsoft Entra-App für SSO:

    • identifierUris: Es wird verwendet, um die Ressource eindeutig zu identifizieren und darauf zuzugreifen. Legen Sie die richtigen Umleitungs-URIs in fest identifierUris , um diese App erfolgreich zu identifizieren. Weitere Informationen finden Sie unter identifierUris-Attribut.

          "identifierUris":[
      "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
    ]

    • replyUrlsWithType: Sie listet registrierte redirect_uri Werte auf, die Microsoft Entra ID bei der Rückgabe von Token als Ziele akzeptiert. Legen Sie die erforderlichen Umleitungs-URIs in fest replyUrlsWithType , um das Token erfolgreich zurückzugeben. Weitere Informationen finden Sie unter replyUrlsWithType-Attribut.

          "replyUrlsWithType":[
  {
    "url": "${{TAB_ENDPOINT}}/auth-end.html",
    "type": "Web"
  }
]

      Hinweis

      Verwenden Sie ${{ENV_NAME}} , um auf Variablen in env/.env.{TEAMSFX_ENV}zu verweisen.

          "replyUrlsWithType":[
  {
    "url": "${{TAB_ENDPOINT}}/auth-end.html",
    "type": "Web"
  },
  {
    "url": "${{TAB_ENDPOINT}}/auth-end.html?clientId=${{AAD_APP_CLIENT_ID}}",
    "type": "Spa"
  },
  {
    "url": "${{TAB_ENDPOINT}}/blank-auth-end.html",
    "type": "Spa"
  }
]

    • "name": Er ersetzt den Wert durch ihren erwarteten Microsoft Entra-App-Namen.

  2. Öffnen Sie die App-Manifestdatei, und fügen Sie die Eigenschaft mit dem Wert Ihrer SSO-App hinzu WebApplicationInfo . Weitere Informationen finden Sie unter webApplicationInfo.

        "webApplicationInfo": {
      "id": "${{AAD_APP_CLIENT_ID}}",
      "resource": "SAME_AS_YOUR_IDENTIFIERURIS"
    }

    Hinweis

    Aktualisieren Sie den Wert der Ressource auf die identifierUris in Schritt 1 konfigurationierte Ressource, und verwenden Sie ${{ENV_NAME}} , um in env/.env.{TEAMSFX_ENV}auf envs zu verweisen.

  3. Öffnen Sie die appPackage/manifest.json Datei, und fügen Sie den folgenden Code hinzu:

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

  4. Aktualisieren Sie die teamsapp.yml Datei und die teamsapp.local.yml Datei.

    Fügen Sie Microsoft Entra-bezogene Änderungen und Konfigurationen zu Ihren yml Dateien hinzu:

    • Fügen Sie unter aadApp/createprovisionhinzu: Erstellen Sie neue Microsoft Entra-Apps, die für einmaliges Anmelden verwendet werden. Weitere Informationen finden Sie unter aadApp/create.

    • Fügen Sie aadApp/update unter provisionhinzu: Aktualisieren Sie Ihre Microsoft Entra-App mit dem Microsoft Entra-App-Manifest in Schritt 1. Weitere Informationen finden Sie unter aadApp/update.

    • Update file/createOrUpdateJsonFile: Fügen Sie beim lokalen Debuggen die folgenden Umgebungsvariablen hinzu:

      1. ClientId: Client-ID der Microsoft Entra-App.
      2. ClientSecret: Geheimer Clientschlüssel der Microsoft Entra-App.
      3. OAuthAuthority: Microsoft Entra app oauth authority.

      Weitere Informationen finden Sie unter file/updateJson.

    • Fügen Sie sowohl in der teamsapp.yml Datei als auch in der teamsapp.local.yml Datei den folgenden Code unter hinzu, um die provision Microsoft Entra-App zu erstellen.

      - 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 Wert von "name" durch den erwarteten Namen der Microsoft Entra-App.

    • Fügen Sie die folgenden Zeilen unter hinzu provision , um die Microsoft Entra-App mit der Microsoft Entra-App-Vorlage in Schritt 1 zu konfigurieren.

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

      Hinweis

      Ersetzen Sie den Wert von manifestPath durch den relativen Pfad des Microsoft Entra-App-Manifests, der in Schritt 1 angegeben wurde. Beispiel: ./aad.manifest.json

    In der teamsapp.local.yml Datei:

    • Fügen Sie den folgenden Code unter hinzu provision , um Microsoft Entra-bezogene Konfigurationen zum lokalen Debugdienst hinzuzufügen.

         - uses: file/createOrUpdateJsonFile
     with:
       target: ./appsettings.Development.json
       appsettings:
         TeamsFx:
           Authentication:
             ClientId: ${{AAD_APP_CLIENT_ID}}
             ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
             InitiateLoginEndpoint: ${{TAB_ENDPOINT}}/auth-start.html
             OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}

  5. Update Infra Microsoft Entra-bezogene Konfigurationen müssen in Ihrem Remotedienst konfiguriert werden. Das folgende Beispiel zeigt die Konfigurationen in der Azure-Web-App.

    1. TeamsFx__Authentication__ClientId: Client-ID der Microsoft Entra-App.
    2. TeamsFx__Authentication__ClientSecret: Geheimer Clientschlüssel der Microsoft Entra-App.
    3. TeamsFx__Authentication__OAuthAuthority: Microsoft Entra app oauth-Autorität.

    Beispiel für die Vorlage "TeamsFx-Registerkarte".

    Öffnen Sie infra/azure.parameters.json die folgenden Zeilen, und fügen Sie sie hinzu parameters:

    "tabAadAppClientId": {
 "value": "${{AAD_APP_CLIENT_ID}}"
},
"tabAadAppClientSecret": {
 "value": "${{SECRET_AAD_APP_CLIENT_SECRET}}"
},
"tabAadAppOauthAuthorityHost": {
 "value": "${{AAD_APP_OAUTH_AUTHORITY_HOST}}"
},
"tabAadAppTenantId": {
 "value": "${{AAD_APP_TENANT_ID}}"
}

    Öffnen Sie die infra/azure.bicep Datei, und suchen Sie den Code:

    param location string = resourceGroup().location

    Aktualisieren Sie den Code wie:

    param tabAadAppClientId string
param tabAadAppOauthAuthorityHost string
param tabAadAppTenantId string
@secure()
param tabAadAppClientSecret string

    Suchen Sie in der infra/azure.bicep Datei nach dem Code:

    resource webApp 'Microsoft.Web/sites@2021-02-01' = {
   kind: 'app'
   location: location
   name: webAppName
   properties: {
     serverFarmId: serverfarm.id
     httpsOnly: true
     siteConfig: {
       appSettings: [
         {
           name: 'WEBSITE_RUN_FROM_PACKAGE'
           value: '1'
         }
       ]
       ftpsState: 'FtpsOnly'
     }
   }
 }

    Aktualisieren Sie den Code wie:

    resource webApp 'Microsoft.Web/sites@2021-02-01' = {
   kind: 'app'
   location: location
   name: webAppName
   properties: {
     serverFarmId: serverfarm.id
     httpsOnly: true
     siteConfig: {
       ftpsState: 'FtpsOnly'
     }
   }
 }

 resource  webAppConfig  'Microsoft.Web/sites/config@2021-02-01' = {
   name: '${webAppName}/appsettings'
   properties: {
     WEBSITE_RUN_FROM_PACKAGE: '1'
     TeamsFx__Authentication__ClientId: tabAadAppClientId
     TeamsFx__Authentication__ClientSecret: tabAadAppClientSecret
     TeamsFx__Authentication__InitiateLoginEndpoint: 'https://${webApp.properties.defaultHostName}/auth-start.html'
     TeamsFx__Authentication__OAuthAuthority: uri(tabAadAppOauthAuthorityHost, tabAadAppTenantId)
   }
 }

  6. Update appsettings.json - und appsettings.Development.json -Dateien für Microsoft Entra-bezogene Konfigurationen müssen für Ihre .NET-Projekteinstellungen konfiguriert werden:

    TeamsFx: {
      Authentication: {
        ClientId: AAD app client id
        ClientSecret: AAD app client secret,
        InitiateLoginEndpoint: Login Endpoint,
        OAuthAuthority: AAD app oauth authority
      }
    }

    Hinweis

    Sie können verwenden $ENV_NAME$ , um auf envs im lokalen/Remotedienst zu verweisen.

    Beispiel für die Vorlage "TeamsFx-Registerkarte".

    Öffnen Sie appsettings.json und appsettings.Development.json Dateien, und aktualisieren Sie den Code:

    "TeamsFx": { 
     "Authentication": { 
       "ClientId": "$clientId$", 
       "ClientSecret": "$client-secret$",
       "InitiateLoginEndpoint": "$TAB_ENDPOINT$/auth-start.html",
       "OAuthAuthority": "$oauthAuthority$"
     } 
   }

  7. Ihre Umgebung ist bereit, und Sie können Ihren Code aktualisieren, um Ihrer Teams-App SSO hinzuzufügen. Beispiele finden Sie hier:

    Beispiel für die Vorlage "TeamsFx-Registerkarte".

    • Erstellen und aktualisieren Sie Config.cs den Code wie:

      using Microsoft.TeamsFx.Configuration;

     namespace {{YOUR_NAMESPACE}}
     {
         public class ConfigOptions
         {
             public TeamsFxOptions TeamsFx { get; set; }
         }
         public class TeamsFxOptions
         {
             public AuthenticationOptions Authentication { get; set; }
         }
     }

      Hinweis

      Sie müssen durch Ihren Namespacenamen ersetzen {{YOUR_NAMESPACE}} .

    • Verschieben Sie die TeamsFx-Auth/Tab/GetUserProfile.razor Datei in Components/.

    • Fügen Sie der Razor-Seite die GetUserProfile Komponente hinzu, z. B.:

      <h1>Hello, World</h1>
<GetUserProfile />

    • Öffnen Sie die Program.cs Datei, und suchen Sie den Code:

      builder.Services.AddScoped<MicrosoftTeams>();

      und aktualisieren Sie den Code wie:

                var config = builder.Configuration.Get<ConfigOptions>();
          builder.Services.AddTeamsFx(config.TeamsFx.Authentication);
    ```

    Hinweis

    Sie müssen den Beispielcode unter der TeamsFx-Auth Datei ausschließen, um Buildfehler zu vermeiden, indem Sie der Datei den .csproj folgenden Code hinzufügen:

        <ItemGroup>
    <Compile Remove="TeamsFx-Auth/**/*" />
    <None Include="TeamsFx-Auth/**/*" />
    <Content Remove="TeamsFx-Auth/Tab/GetUserProfile.razor"/>
  </ItemGroup>
    ```

* Download `auth-start.html` and `auth-end.html` files from [GitHub Repo](https://github.com/OfficeDev/TeamsFx/tree/dev/templates/csharp/sso-tab/wwwroot) to `{ProjectDirectory}/wwwroot`.

  8. Um zu überprüfen, ob die SSO-App wie erwartet funktioniert, führen Sie in Visual Studio aus Local Debug .

  9. Sie können die App auch in der Cloud ausführen, indem Sie und Provision in the cloud dann Deploy to the cloudauswählen.

Teams-Botanwendung

  1. Aktualisieren Sie das Microsoft Entra-App-Manifest in der TeamsFx-Auth/aad.manifest.template.json Datei.

  2. Sie können die Datei in einen beliebigen Ordner Ihres Projekts kopieren und als aad.manifest.json Datei umbenennen und den Pfad zu dieser Datei zur späteren Referenz notieren. Nehmen Sie die folgenden Aktualisierungen in der Vorlage vor, um eine Microsoft Entra-App für einmaliges Anmelden zu erstellen oder zu aktualisieren.

    • identifierUris: Wird verwendet, um die Ressource eindeutig zu identifizieren und darauf zuzugreifen. Sie müssen die richtigen Umleitungs-URIs in "identifierUris" festlegen, um diese App erfolgreich zu identifizieren. Weitere Informationen finden Sie unter identifierUris-Attribut.

    Beispiel für die TeamsFx Bot-Vorlage:

    "identifierUris":[
  "api://botid-${{BOT_ID}}"
]

    Hinweis

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

    • replyUrlsWithType: Sie listet registrierte redirect_uri Werte auf, die Microsoft Entra ID bei der Rückgabe von Token als Ziele akzeptiert. Sie müssen die erforderlichen Umleitungs-URIs in "replyUrlsWithType" festlegen, damit das Token erfolgreich zurückgegeben wird. Weitere Informationen finden Sie unter replyUrlsWithType-Attribut.

    Beispiel:

    "replyUrlsWithType":[
  {
    "url": "https://${{BOT_DOMAIN}}/bot-auth-end.html",
    "type": "Web"
  }
]

    Hinweis

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

    Beispiel:

    "replyUrlsWithType":[
  {
  "url": "https://${{BOT_DOMAIN}}/bot-auth-end.html",
  "type": "Web"
  }
]
    • "name": Ersetzen Sie den Wert durch den erwarteten Namen der Microsoft Entra-App.

  3. App-Manifest aktualisieren.

    • Ihrem App-Manifest muss ein WebApplicationInfo -Objekt hinzugefügt werden, um einmaliges Anmelden in der Teams-App zu aktivieren. Weitere Informationen finden Sie unter webApplicationInfo.

    Beispiel: Öffnen Sie ihre App-Manifestvorlage, und fügen Sie das folgende Objekt im App-Manifest an:

    "webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "SAME_AS_YOUR_IDENTIFIERURIS"
}

    Hinweis

    Sie müssen den Wert der Ressource auf den identifierUris in Schritt 1.i konfigurierten aktualisieren und verwenden ${{ENV_NAME}} , um auf envs in env/.env.{TEAMSFX_ENV}zu verweisen.

    Beispiel für die Vorlage "TeamsFx Bot":

    Öffnen Sie die appPackage/manifest.json Datei, und fügen Sie die folgende Eigenschaft in der App-Manifestdatei hinzu:

    "webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "api://botid-${{BOT_ID}}"
}
    • Sie können Ihren Befehl unter commands in commandLists Ihrem Bot registrieren:
    {
  "title": "YOUR_COMMAND_TITLE",
  "description": "YOUR_COMMAND_DESCRIPTION"
}

    Beispiel für die Vorlage "TeamsFx Bot":

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

    Denken Sie daran, den vorherigen Befehl "helloWorld" zu löschen, da er nicht verwendet wird.

    • Fügen Sie außerdem eine Botdomäne zu hinzu validDomain:
    "validDomains": [
  "${{BOT_DOMAIN}}"
]

  4. Update teamsapp.yml und teamsapp.local.yml Dateien: Microsoft Entra-bezogene Änderungen und Konfigurationen müssen Ihren yml Dateien hinzugefügt werden:

    • Fügen Sie unter provision hinzuaadApp/create, um neue Microsoft Entra-Apps zu erstellen, die für einmaliges Anmelden verwendet werden. Weitere Informationen finden Sie unter Verfügbare Aktionen im Teams-Toolkit.

    • Fügen Sie aadApp/update unter hinzu provision , um Ihre Microsoft Entra-App mit dem Microsoft Entra-App-Manifest in Schritt 1 zu aktualisieren. Weitere Informationen finden Sie unter aadApp/update.

    • Aktualisieren Sie file/createOrUpdateJson die Datei, um die folgenden Umgebungsvariablen während des lokalen Debuggens hinzuzufügen:

      1. ClientId: Client-ID der Microsoft Entra-App.
      2. ClientSecret: Geheimer Clientschlüssel der Microsoft Entra-App.
      3. OAuthAuthority: Microsoft Entra app oauth authority. Weitere Informationen finden Sie unter file/updateJson.

    Beispiel für die Vorlage "TeamsFx Bot"

    Sowohl in - als auch teamsapp.ymlteamsapp.local.yml in -Dateien:

    • Fügen Sie den Code unter hinzu provision , um die Microsoft Entra-App zu erstellen.
    - 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 Wert von "name" durch den erwarteten Namen der Microsoft Entra-App.

    • Fügen Sie den Code unter provision hinzu, um die Microsoft Entra-App mit der Microsoft Entra-App-Vorlage in Schritt 1 zu konfigurieren.

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

      Hinweis

      Ersetzen Sie den Wert von "manifestPath" durch den relativen Pfad des Microsoft Entra-App-Manifests, der in Schritt 1 notiert wurde. Beispiel: "./aad.manifest.json"

    In der teamsapp.local.yml Datei:

    • Aktualisieren Sie file/createOrUpdateJsonFile unter provision , um Microsoft Entra-bezogene Konfigurationen zum lokalen Debugdienst hinzuzufügen.

      - uses: file/createOrUpdateJsonFile
        with:
          target: ./appsettings.Development.json
          appsettings:
            BOT_ID: ${{BOT_ID}}
            BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}
            TeamsFx:
              Authentication:
                ClientId: ${{AAD_APP_CLIENT_ID}}
                ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
                OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}/${{AAD_APP_TENANT_ID}}
                ApplicationIdUri: api://botid-${{BOT_ID}}
                Bot:
                  InitiateLoginEndpoint: https://${{BOT_DOMAIN}}/bot-auth-start

  5. Aktualisieren Sie infra Microsoft Entra-bezogene Konfigurationen, um den Remotedienst zu konfigurieren. Das folgende Beispiel zeigt die Konfigurationen in der Azure-Web-App.

    1. TeamsFx__Authentication__ClientId: Client-ID der Microsoft Entra-App.
    2. TeamsFx__Authentication__ClientSecret: Geheimer Clientschlüssel der Microsoft Entra-App.
    3. TeamsFx__Authentication__OAuthAuthority: Microsoft Entra app oauth-Autorität.
    4. TeamsFx__Authentication__Bot__InitiateLoginEndpoint: Authentifizierungsstartseite für Bot.
    5. TeamsFx__Authentication__ApplicationIdUri: Die Microsoft Entra-App identifiziert URIs.

    Beispiel für die Vorlage "TeamsFx Bot":

    Öffnen Sie die infra/azure.parameters.jsonDatei, und fügen Sie den Code zu parametershinzu:

    "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}}"
}

    Öffnen Sie die infra/azure.bicep Datei, und suchen Sie den Code:

    param location string = resourceGroup().location

    Aktualisieren Sie den Code wie:

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

    Fügen Sie den Code vor der Ausgabe hinzu:

    resource webAppSettings 'Microsoft.Web/sites/config@2021-02-01' = {
  name: '${webAppName}/appsettings'
  properties: {
      TeamsFx__Authentication__ClientId: m365ClientId
      TeamsFx__Authentication__ClientSecret: m365ClientSecret
      TeamsFx__Authentication__Bot__InitiateLoginEndpoint: uri('https://${webApp.properties.defaultHostName}', 'bot-auth-start')
      TeamsFx__Authentication__OAuthAuthority: uri(m365OauthAuthorityHost, m365TenantId)
      TeamsFx__Authentication__ApplicationIdUri: m365ApplicationIdUri
      BOT_ID: botAadAppClientId
      BOT_PASSWORD: botAadAppClientSecret
      RUNNING_ON_AZURE: '1'
  }
}

    Hinweis

    Wenn Sie Ihrer Azure-Web-App zusätzliche Konfigurationen hinzufügen möchten, fügen Sie die Konfigurationen in webAppSettings hinzu.

  6. Aktualisieren Sie die appsettings.json Datei und die appsettings.Development.json Datei für Microsoft Entra-bezogene Konfigurationen, die für Ihre .NET-Projekteinstellungen konfiguriert werden müssen:

    TeamsFx: {
  Authentication: {
    ClientId: AAD app client id
    ClientSecret: AAD app client secret,
    OAuthAuthority: AAD app oauth authority,
    ApplicationIdUri: AAD app identify uri,
    Bot: {
      InitiateLoginEndpoint: Auth start page for Bot
    }
  }
}

    Hinweis

    Sie können verwenden $ENV_NAME$ , um auf envs im lokalen/Remotedienst zu verweisen.

    Beispiel für die Vorlage "TeamsFx Bot":

    Öffnen Sie appsettings.json die Dateien und appsettings.Development.json , und fügen Sie den Code hinzu:

    "TeamsFx": {
  "Authentication": {
    "ClientId": "$clientId$",
    "ClientSecret": "$client-secret$",
    "OAuthAuthority": "$oauthAuthority$",
    "ApplicationIdUri": "$applicationIdUri$",
    "Bot": {
      "InitiateLoginEndpoint": "$initiateLoginEndpoint$"
    }
  }
}

  7. Aktualisieren Sie Ihren Code, um Ihrer Teams-App SSO hinzuzufügen.

    Sie finden Beispielcode:

    Beispiel für die Vorlage "TeamsFx Bot":

    • Öffnen Sie Config.cs den Code, und ersetzen Sie den Code:
    using Microsoft.TeamsFx.Configuration;

namespace {{YOUR_NAMESPACE}}
{
    public class TeamsFxOptions
    {
        public AuthenticationOptions Authentication { get; set; }
    }

    public class ConfigOptions
    {
        public string BOT_ID { get; set; }
        public string BOT_PASSWORD { get; set; }
        public TeamsFxOptions TeamsFx { get; set; }
    }
}

    Hinweis

    Ersetzen Sie die {{YOUR_NAMESPACE}} Eigenschaft durch Ihren Namespacenamen.

    • Verschieben Sie TeamsFx-Auth/Bot/SSO die Dateien und TeamsFx-Auth/Bot/Pages in /.

      Hinweis

      Denken Sie daran, durch Ihren Projektnamespace zu ersetzen {{YOUR_NAMESPACE}} .

    • Öffnen Sie die Program.cs Datei, und suchen Sie den Code:

    builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>();

    Aktualisieren Sie den Code wie:

    builder.Services.AddRazorPages();

// Create the Bot Framework Adapter with error handling enabled.                                        
builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>();

builder.Services.AddSingleton<IStorage, MemoryStorage>();
// Create the Conversation state. (Used by the Dialog system itself.)
builder.Services.AddSingleton<ConversationState>();

// The Dialog that will be run by the bot.
builder.Services.AddSingleton<SsoDialog>();

// Create the bot as a transient. In this case the ASP Controller is expecting an IBot.
builder.Services.AddTransient<IBot, TeamsSsoBot<SsoDialog>>();

builder.Services.AddOptions<BotAuthenticationOptions>().Configure(options =>
{
  options.ClientId = config.TeamsFx.Authentication.ClientId;
  options.ClientSecret = config.TeamsFx.Authentication.ClientSecret;
  options.OAuthAuthority = config.TeamsFx.Authentication.OAuthAuthority;
  options.ApplicationIdUri = config.TeamsFx.Authentication.ApplicationIdUri;
  options.InitiateLoginEndpoint = config.TeamsFx.Authentication.Bot.InitiateLoginEndpoint;
});

    Suchen Sie den Code:

    builder.Services.AddSingleton<HelloWorldCommandHandler>();
builder.Services.AddSingleton(sp =>
{
  var options = new ConversationOptions()
  {
    Adapter = sp.GetService<CloudAdapter>(),
    Command = new CommandOptions()
    {
      Commands = new List<ITeamsCommandHandler> { sp.GetService<HelloWorldCommandHandler>() }
    }
  };

  return new ConversationBot(options);
});

    Aktualisieren Sie den Code wie:

    builder.Services.AddSingleton(sp =>
{
  var options = new ConversationOptions()
  {
    Adapter = sp.GetService<CloudAdapter>(),
    Command = new CommandOptions()
    {
      Commands = new List<ITeamsCommandHandler> { }
    }
  };

  return new ConversationBot(options);
});

    Suchen und Löschen des Codes:

    // Create the bot as a transient. In this case the ASP Controller is expecting an IBot.
builder.Services.AddTransient<IBot, TeamsBot>();

    Suchen Sie den Code:

    app.UseEndpoints(endpoints =>
{
  endpoints.MapControllers();
});

    Aktualisieren Sie den Code wie:

    app.UseEndpoints(endpoints =>
{
  endpoints.MapControllers();
  endpoints.MapRazorPages();
});

    Hinweis

    Sie müssen den Beispielcode unter TeamsFx-Auth ausschließen, um Buildfehler zu vermeiden, indem Sie den folgenden Code zur .csproj Datei hinzufügen:

    <ItemGroup>
  <Compile Remove="TeamsFx-Auth/**/*" />
  <None Include="TeamsFx-Auth/**/*" />
  <Content Remove="TeamsFx-Auth/Tab/GetUserProfile.razor"/>
</ItemGroup>

  8. Führen Sie in Visual Studio aus, um zu überprüfen, ob die Local Debug SSO-App wie erwartet funktioniert.

  9. Sie können die App auch in der Cloud ausführen, indem Sie Provision in the cloud und dann Deploy to the cloud auswählen, um Ihre App zu aktualisieren.

Siehe auch