Adicionar logon único ao aplicativo do Teams

  • Artigo

O Microsoft Teams fornece uma função SSO (logon único) para um aplicativo obter o token de usuário do Teams conectado para acessar o Microsoft Graph e outras APIs. O Teams Toolkit facilita a interação abstraindo alguns dos fluxos e integrações de Microsoft Azure Active Directory (Azure AD) por trás de algumas APIs simples. Isso permite que você adicione recursos de SSO facilmente ao seu aplicativo teams.

Habilitar logon único no Teams Toolkit para Visual Studio

O Teams fornece a função SSO para um aplicativo usando o Kit de Ferramentas do Teams para o Microsoft Visual Studio.

  1. Abra o Visual Studio.

  2. Selecione Project>Teams Toolkit>Add Authentication Code.

    A captura de tela mostra o código de adição de autenticação.

O Teams Toolkit ajuda você a gerar os arquivos de autenticação na pasta TeamsFx-Auth, incluindo o manifesto do aplicativo (anteriormente chamado de manifesto de aplicativo do Teams) para Azure AD páginas de redirecionamento de aplicativo e autenticação. Vincule os arquivos ao aplicativo teams atualizando as configurações de autenticação para garantir que o SSO funcione para seu aplicativo.

  • No arquivo de manifesto do aplicativo Azure AD, especifique as URIs como o URI para identificar o aplicativo de autenticação Azure AD e o URI de redirecionamento para o token de retorno.
  • No arquivo de manifesto do aplicativo, adicione o aplicativo SSO para vinculá-lo ao aplicativo teams.
  • Adicione informações de aplicativo SSO nos arquivos de configuração do Teams Toolkit para garantir que o aplicativo de autenticação possa ser registrado no serviço de back-end e iniciar o Teams Toolkit quando você estiver depurando ou visualizando o aplicativo teams.

Aplicativo de guia do Teams

  1. Atualizar Azure AD manifesto do aplicativo: TeamsFx-Auth/aad.manifest.template.json o arquivo é um modelo de manifesto de aplicativo Azure AD. Você pode copiar e colar esse arquivo em qualquer pasta do seu projeto e renomear como aad.manifest.json e tomar nota do caminho para este arquivo. As atualizações a seguir no modelo para criar/atualizar um aplicativo Azure AD para SSO:

    • identifierUris: ele é usado para identificar e acessar exclusivamente o recurso. Defina a Uris de redirecionamento correta para identifierUris identificar esse aplicativo com êxito. Para obter mais informações, consulte atributo identifierUris.

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

    • replyUrlsWithType: ele lista valores redirect_uri registrados que Azure AD aceita como destinos ao retornar tokens. Defina a Uris de redirecionamento necessária para replyUrlsWithType retornar com êxito o token. Para obter mais informações, consulte atributo replyUrlsWithType.

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

      Observação

      Use ${{ENV_NAME}} para referenciar variáveis em env/.env.{TEAMSFX_ENV}.

          "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": ele substitui o valor pelo nome do aplicativo Azure AD esperado.

  2. Abra o arquivo de manifesto do aplicativo, adicione WebApplicationInfo a propriedade com o valor do aplicativo SSO. Para obter mais informações, consulte webApplicationInfo.

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

    Observação

    Atualize o valor do recurso para o identifierUris configurado na etapa 1 e use ${{ENV_NAME}} para fazer referência a envs no env/.env.{TEAMSFX_ENV}.

  3. Abra o appPackage/manifest.json arquivo e adicione o seguinte código:

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

  4. Atualize o teamsapp.yml arquivo e o teamsapp.local.yml arquivo.

    Adicione Azure AD alterações e configurações relacionadas aos seus yml arquivos:

    • Adicionar aadApp/create em provision: Criar novos aplicativos de Azure AD usados para SSO. Para obter mais informações, consulte aadApp/create.

    • Adicione aadApp/update em provision: atualize seu aplicativo Azure AD com Azure AD manifesto do aplicativo na etapa 1. Para obter mais informações, consulte aadApp/update.

    • Atualização file/createOrUpdateJsonFile: Adicione as seguintes variáveis de ambiente ao depurar localmente:

      1. ClientId: Azure AD ID do cliente do aplicativo.
      2. ClientSecret: Azure AD segredo do cliente do aplicativo.
      3. OAuthAuthority: Azure AD autoridade de oauth do aplicativo.

      Para obter mais informações, consulte arquivo/atualizaçãoJson.

    • teamsapp.yml No arquivo e no teamsapp.local.yml arquivo, adicione o código a provision seguir no para criar Azure AD aplicativo.

      - 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

      Observação

      Substitua o valor de "nome" pelo nome do aplicativo Azure AD esperado.

    • Adicione as linhas a seguir provision para configurar Azure AD aplicativo com Azure AD modelo de aplicativo na etapa 1.

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

      Observação

      Substitua o valor do manifestPath pelo caminho relativo de Azure AD manifesto do aplicativo anotado na etapa 1. Por exemplo: ./aad.manifest.json

    teamsapp.local.yml No arquivo:

    • Adicione o código a seguir provision para adicionar Azure AD configurações relacionadas ao serviço de depuração local.

         - 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. Atualizar configurações relacionadas ao Infra Azure AD precisam ser configuradas em seu serviço remoto. O exemplo a seguir mostra as configurações no Webapp do Azure.

    1. TeamsFx__Authentication__ClientId: Azure AD ID do cliente do aplicativo.
    2. TeamsFx__Authentication__ClientSecret: Azure AD segredo do cliente do aplicativo.
    3. TeamsFx__Authentication__OAuthAuthority: Azure AD autoridade de oauth do aplicativo.

    Exemplo para o modelo do TeamsFx Tab.

    Abra infra/azure.parameters.json e adicione as seguintes linhas em 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}}"
}

    Abra o infra/azure.bicep arquivo, localize o código:

    param location string = resourceGroup().location

    Atualize o código como:

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

    infra/azure.bicep No arquivo, localize o código:

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

    Atualize o código como:

    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. Atualizar appsettings.json e appsettings.Development.json arquivos para Azure AD configurações relacionadas precisa ser configurada para as configurações do projeto .Net:

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

    Observação

    Você pode usar para fazer $ENV_NAME$ referência a envs no serviço local/remoto.

    Exemplo para o modelo do TeamsFx Tab.

    Abra appsettings.json e appsettings.Development.json os arquivos e atualize o código:

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

  7. Seu ambiente está pronto e você pode atualizar seu código para adicionar SSO ao seu aplicativo teams. Você pode encontrar exemplos:

    Exemplo para o modelo do TeamsFx Tab.

    • Crie Config.cs e atualize o código como:

      using Microsoft.TeamsFx.Configuration;

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

      Observação

      Você precisa substituir {{YOUR_NAMESPACE}} pelo nome do namespace.

    • Mova o TeamsFx-Auth/Tab/GetUserProfile.razor arquivo para Components/.

    • Adicione o GetUserProfile componente à sua página razor, por exemplo:

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

    • Abra o Program.cs arquivo, localize o código:

      builder.Services.AddScoped<MicrosoftTeams>();

      e atualize o código como:

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

    Observação

    Você precisa excluir o código de exemplo no TeamsFx-Auth arquivo para evitar falha de build adicionando o seguinte código ao .csproj arquivo:

        <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. Para marcar o aplicativo SSO funciona conforme o esperado, execute o Local Debug no Visual Studio.

  9. Você também pode executar o aplicativo na nuvem selecionando o Provision in the cloud e, em seguida, Deploy to the cloud.

Aplicativo bot do Teams

  1. Atualize Azure AD manifesto do aplicativo no TeamsFx-Auth/aad.manifest.template.json arquivo.

  2. Você pode copiar o arquivo para qualquer pasta do seu projeto e renomear como o aad.manifest.json arquivo e observar o caminho para este arquivo para referência posterior. Faça as atualizações a seguir no modelo para criar/atualizar um aplicativo Azure AD para SSO.

    • identifierUris: usado para identificar e acessar exclusivamente o recurso. Você precisa definir a Uris de Redirecionamento correta em "identifierUris" para identificar este aplicativo com êxito. Para obter mais informações, consulte atributo identifierUris.

    Exemplo para o Modelo de Bot do TeamsFx:

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

    Observação

    Você pode usar para referenciar ${{ENV_NAME}} variáveis no env/.env.{TEAMSFX_ENV} arquivo.

    • replyUrlsWithType: ele lista valores redirect_uri registrados que Azure AD aceita como destinos ao retornar tokens. Você precisa definir a Uris de Redirecionamento necessária em "replyUrlsWithType" para retornar com êxito o token. Para obter mais informações, consulte atributo replyUrlsWithType.

    Exemplo:

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

    Observação

    Você pode usar para fazer ${{ENV_NAME}} referência a envs no env/.env.{TEAMSFX_ENV} arquivo.

    Exemplo:

    "replyUrlsWithType":[
  {
  "url": "https://${{BOT_DOMAIN}}/bot-auth-end.html",
  "type": "Web"
  }
]
    • "name": substitua o valor pelo nome do aplicativo Azure AD esperado.

  3. Atualizar manifesto do aplicativo.

    • Um WebApplicationInfo objeto precisa ser adicionado ao manifesto do aplicativo para habilitar o SSO no aplicativo teams. Para obter mais informações, consulte webApplicationInfo.

    Por exemplo: abra o modelo de manifesto do aplicativo e anexe o seguinte objeto no manifesto do aplicativo:

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

    Observação

    Você precisa atualizar o valor do recurso para o identifierUris configurado na etapa 1.i e usar ${{ENV_NAME}} para referenciar envs no env/.env.{TEAMSFX_ENV}.

    Exemplo para o modelo do TeamsFx Bot:

    Abra o appPackage/manifest.json arquivo e adicione a seguinte propriedade no arquivo de manifesto do aplicativo:

    "webApplicationInfo": {
  "id": "${{AAD_APP_CLIENT_ID}}",
  "resource": "api://botid-${{BOT_ID}}"
}
    • Você pode registrar seu comando commands no commandLists bot:
    {
  "title": "YOUR_COMMAND_TITLE",
  "description": "YOUR_COMMAND_DESCRIPTION"
}

    Exemplo para o modelo do TeamsFx Bot:

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

    Lembre-se de excluir o comando anterior 'helloWorld', pois ele não é usado.

    • Adicione também o domínio do bot a validDomain:
    "validDomains": [
  "${{BOT_DOMAIN}}"
]

  4. Atualizar teamsapp.yml e teamsapp.local.yml arquivos: Azure AD alterações e configurações relacionadas precisam ser adicionadas aos seus yml arquivos:

    • Adicione aadApp/create em provision para criar novos aplicativos Azure AD usados para SSO. Para obter mais informações, confira ações disponíveis no Teams Toolkit.

    • Adicione aadApp/update em provision para atualizar seu aplicativo Azure AD com Azure AD manifesto do aplicativo na etapa 1. Para obter mais informações, consulte aadApp/update.

    • Atualizar file/createOrUpdateJson arquivo para adicionar as seguintes variáveis de ambiente durante a depuração local:

      1. ClientId: Azure AD ID do cliente do aplicativo.
      2. ClientSecret: Azure AD segredo do cliente do aplicativo.
      3. OAuthAuthority: Azure AD autoridade de oauth do aplicativo. Para obter mais informações, consulte arquivo/atualizaçãoJson.

    Exemplo para o modelo do TeamsFx Bot

    Em arquivos teamsapp.yml e teamsapp.local.yml em:

    • Adicione o código em provision para criar Azure AD aplicativo.
    - 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

    Observação

    Substitua o valor de "nome" pelo nome do aplicativo Azure AD esperado.

    • Adicione o código provision em para configurar Azure AD aplicativo com Azure AD modelo de aplicativo na etapa 1.

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

      Observação

      Substitua o valor de "manifestPath" pelo caminho relativo de Azure AD manifesto do aplicativo anotado na etapa 1. Por exemplo, './aad.manifest.json'

    teamsapp.local.yml No arquivo:

    • provision Atualize file/createOrUpdateJsonFile em para adicionar Azure AD configurações relacionadas ao serviço de depuração local.

      - 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. Atualize o Infra Azure AD configurações relacionadas para configurar o serviço remoto. O exemplo a seguir mostra as configurações no Webapp do Azure.

    1. TeamsFx__Authentication__ClientId: Azure AD ID do cliente do aplicativo.
    2. TeamsFx__Authentication__ClientSecret: Azure AD segredo do cliente do aplicativo.
    3. TeamsFx__Authentication__OAuthAuthority: Azure AD autoridade de oauth do aplicativo.
    4. TeamsFx__Authentication__Bot__InitiateLoginEndpoint: página inicial do Auth para Bot.
    5. TeamsFx__Authentication__ApplicationIdUri: Azure AD aplicativo identificar uris.

    Exemplo para o modelo do TeamsFx Bot:

    Abra o infra/azure.parameters.jsonarquivo, adicione o código a parameters:

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

    Abra o infra/azure.bicep arquivo e localize o código:

    param location string = resourceGroup().location

    Atualize o código como:

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

    Adicione o código antes da saída:

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

    Observação

    Se você quiser adicionar configurações adicionais ao seu Webapp do Azure, adicione as configurações no WebAppSettings.

  6. Atualize o appsettings.json arquivo e o appsettings.Development.json arquivo para Azure AD configurações relacionadas que precisam ser configuradas para as configurações do projeto .Net:

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

    Observação

    Você pode usar para fazer $ENV_NAME$ referência a envs no serviço local/remoto.

    Exemplo para o modelo do TeamsFx Bot:

    Abra appsettings.json e appsettings.Development.json os arquivos e adicione o código:

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

  7. Atualize seu código para adicionar SSO ao aplicativo do Teams.

    Você pode encontrar o código de exemplos:

    Exemplo para o modelo do TeamsFx Bot:

    • Abra Config.cs e substitua o código:
    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; }
    }
}

    Observação

    Substitua a {{YOUR_NAMESPACE}} propriedade pelo nome do namespace.

    • Mover TeamsFx-Auth/Bot/SSO e TeamsFx-Auth/Bot/Pages arquivos para /.

      Observação

      Lembre-se de substituir {{YOUR_NAMESPACE}} pelo namespace do projeto.

    • Abra o Program.cs arquivo e localize o código:

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

    Atualize o código como:

    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;
});

    Localize o código:

    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);
});

    Atualize o código como:

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

  return new ConversationBot(options);
});

    Localizar e excluir o código:

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

    Localize o código:

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

    Atualize o código como:

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

    Observação

    Você precisa excluir o código TeamsFx-Auth de exemplo em para evitar falha de build adicionando o seguinte código ao .csproj arquivo:

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

  8. Para marcar se o aplicativo SSO funcionar conforme o esperado, execute o Local Debug no Visual Studio.

  9. Você também pode executar o aplicativo na nuvem selecionando Provision in the cloud e, em seguida, selecione Deploy to the cloud para atualizar seu aplicativo.

Confira também

Adicionar SSO ao aplicativo Teams no Visual Studio

Para aplicativos que interagem com o usuário em um chat, Equipe ou canal, o SSO se manifesta como um Cartão Adaptável, com o qual o usuário pode interagir para invocar o fluxo de consentimento Azure AD.

Vantagens

Veja a seguir as vantagens do SSO no Teams:

  • O SSO com Azure AD atualiza o token de autenticação em segundo plano, o que minimiza o número de vezes que os usuários precisam inserir suas credenciais de entrada.

  • O SSO entra automaticamente no usuário em diferentes dispositivos enquanto usa o aplicativo.

As guias e bots do Teams têm fluxo semelhante para suporte ao SSO, para obter mais informações, confira:

  1. Autenticação SSO em Guias
  2. Autenticação SSO em Bots

Habilitar o suporte ao SSO

O Teams Toolkit ajuda você a adicionar o SSO aos seguintes recursos do Teams no Visual Studio:

  • Tab
  • Bot de notificação: servidor Restify
  • Bot de comando

Adicionar SSO usando o Visual Studio

Você pode executar as seguintes etapas para adicionar o SSO usando o Teams Toolkit no Visual Studio:

  1. Abra o Visual Studio.

  2. Selecione Criar um novo projeto em Introdução.

    abrir o visual studio code para criar um novo projeto

  3. Insira o Teams na caixa de pesquisa e, na lista, selecione Aplicativo do Microsoft Teams.

  4. Selecione Avançar.

    Selecione um projeto do Microsoft Teams procurando equipes.

    A janela Configurar seu novo projeto é exibida.

  5. Insira o nome do projeto.

    Observação

    O nome do projeto que você está inserindo também é preenchido automaticamente no nome da solução. Se desejar, você pode alterar o nome da solução sem afetar o nome do projeto.

  6. Selecione Criar.

    Observação

    Você pode alterar o local padrão do projeto selecionando ●●●.

    inserir o nome do projeto e da solução

    A janela Criar um novo aplicativo do Teams é exibida.

  7. Selecione o tipo de aplicativo necessário em Criar um novo aplicativo do Teams, desmarque a caixa Configurar com logon único marcar.

  8. Selecione Criar.

    selecione o aplicativo teams a ser criado e desmarque a caixa sso marcar

  9. Depois que o projeto for criado, selecione Project>Teams Toolkit>Add Authentication Code.

    Adicionar código de autenticação

Personalizar seu projeto usando o Teams Toolkit

A tabela a seguir lista as alterações do Teams Toolkit:

Tipo Arquivo Objetivo
Criar aad.template.json Sob template\appPackage Azure AD manifesto do aplicativo representa seu aplicativo Azure AD. template\appPackageajuda você a registrar um aplicativo Azure AD durante a depuração ou provisionamento local.
Modificar manifest.template.json Sob template\appPackage webApplicationInfo o objeto é adicionado ao seu manifesto de aplicativo (anteriormente chamado de manifesto de aplicativo do Teams). O Teams requer esse campo para habilitar o SSO. Quando a depuração ou provisionamento local é disparada, você pode ver a alteração.
Modificar appsettings.json e appsettings.Development.json As configurações são adicionadas e usadas pelo SDK do TeamsFx às configurações do aplicativo. Você pode atualizar e adicionar o TeamsFx objeto se tiver outros appsettings arquivos.
Criar Auth\tab Código de referência, páginas de redirecionamento de auth e um README.md arquivo são gerados na pasta Auth\tab para um projeto de guia.
Criar Auth\bot Código de referência, páginas de redirecionamento de auth e um README.md arquivo são gerados na pasta Auth\bot para um projeto de bot.

Observação

O Teams Toolkit não faz alterações na nuvem adicionando SSO até disparar uma depuração local. Você pode atualizar seu código para garantir que o SSO esteja funcionando no projeto.

Atualizar seu aplicativo para usar o SSO

As seguintes etapas ajudam você a habilitar o SSO em seu aplicativo:

Observação

As alterações são baseadas nos modelos de scaffold.



Projeto Tab

  1. Você pode mover GetUserProfile.razor o Auth\tab arquivo da pasta para aComponents\ pasta. GetUserProfileo arquivo implementa uma função que usa o SDK do TeamsFx para chamar a Microsoft API do Graph para obter as informações do usuário.

  2. Depois de obter as informações do usuário, você pode substituir <AddSSO /><GetUserProfile /> no Components/Welcome.razor arquivo.

Projeto de bot de comando

  1. Certifique-se de atualizar sua versão do SDK para:

    • TeamsFx, versão 1.1.0 ou posterior.
    • Microsoft.Bot.Builder, versão 4.17.1 ou posterior.

  2. Crie uma Pages pasta e mova arquivos para o Auth\bot\Pages, que contém páginas HTML hospedadas pelo aplicativo bot. Quando o processo de autenticação do SSO é iniciado com Azure AD, eles redirecionam o usuário para as páginas HTML.

  3. Depois que o usuário for redirecionado para as páginas HTML, você poderá criar SSO pasta e mover arquivos em Auth\bot\SSO. Esta pasta contém três arquivos como referência para a implementação do SSO:

    • SsoDialog.cs: este arquivo cria um ComponentDialog que é usado para SSO.

    • SsoOperations.cs: este arquivo implementa uma classe na função para obter informações do usuário com o token SSO. Você pode seguir o método definido em SsoOperations.cs e criar seu próprio método que requer token SSO.

    • TeamsSsoBot.cs: este arquivo cria um TeamsActivityHandler com SsoDialog que adiciona e dispara um comando showUserInfo.

      Observação

      Certifique-se de substituir {Your_NameSpace} pelo namespace do projeto nos três arquivos (SsoDialog.cs, SsoOperations.cse TeamsSsoBot.cs).

      Substituir o espaço de nome pelo espaço de nome

  4. Agora você pode atualizar Program.cs.

    1. Você pode encontrar o seguinte código no arquivo Program.cse adicionar os blocos de código na etapa b:

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

    2. Adicione os seguintes blocos de código:

       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<AuthenticationOptions>().Bind(builder.Configuration.GetSection("TeamsFx").GetSection(AuthenticationOptions.Authentication)).ValidateDataAnnotations();
   builder.Services.AddOptions<BotAuthenticationOptions>().Configure<IOptions<AuthenticationOptions>>((botAuthOption, authOptions) => {
       AuthenticationOptions authOptionsValue = authOptions.Value;
       botAuthOption.ClientId = authOptionsValue.ClientId;
       botAuthOption.ClientSecret = authOptionsValue.ClientSecret;
       botAuthOption.OAuthAuthority = authOptionsValue.OAuthAuthority;
       botAuthOption.ApplicationIdUri = authOptionsValue.ApplicationIdUri;
       botAuthOption.InitiateLoginEndpoint = authOptionsValue.Bot.InitiateLoginEndpoint;
   }).ValidateDataAnnotations();

    3. Depois de adicionar os blocos de código, você pode localizar e excluir o seguinte código no arquivo:

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

    4. Localize o seguinte código e substitua-o pelos códigos fornecidos na etapa e:

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

    5. Substitua os códigos na etapa d pelos seguintes códigos:

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

  5. Você pode abrir Templates\appPackage\manifest.template.jsone adicionar as seguintes linhas command no commandLists bot para registrar seu comando no manifesto do aplicativo:

    {
    "title": "show",
    "description": "Show user profile using Single Sign On feature"
}
Adicionar um novo comando ao bot

As etapas a seguir ajudam a adicionar um novo comando, depois de adicionar o SSO em seu projeto:

Observação

As instruções se aplicam apenas ao bot de comando.

  1. Você pode criar um novo método na SSO/SsoOperations classe SsoOperations e adicionar sua própria lógica de negócios para chamar API do Graph:

    public static async Task GetUserImageInfo(ITurnContext stepContext, string token, BotAuthenticationOptions botAuthOptions)
{
    await stepContext.SendActivityAsync("Retrieving user information from Microsoft Graph ...");
    var authProvider = new DelegateAuthenticationProvider((request) =>
    {
        request.Headers.Authorization =
            new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
        return Task.CompletedTask;
    });
    var graphClient = new GraphServiceClient(authProvider);
    // You can add following code to get your photo size:
    // var photo = await graphClient.Me.Photo.Request().GetAsync();
    // await stepContext.SendActivityAsync($"Size of your photo is: {photo.Width} * {photo.Height}");
}

  2. Localize a seguinte linha para registrar um novo comando:

       ((SsoDialog)_dialog).addCommand("showUserInfo", "show", SsoOperations.ShowUserInfo);

  3. Você pode registrar o novo comando "photo" para configurar o método 'GetUserImageInfo' adicionando o seguinte código:

       ((SsoDialog)_dialog).addCommand("getUserImageInfo", "photo", SsoOperations.GetUserImageInfo);

  4. Abra o arquivo templates\appPackage\manifest.template.jsone adicione as seguintes linhas command no commandLists bot para registrar seu comando no manifesto do aplicativo:

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

Observação

O Teams Toolkit usa o arquivo de manifesto do aplicativo Azure AD para registrar um aplicativo Azure AD para SSO. Você precisa pressionar f5 para depurar seu aplicativo e testar sua configuração de SSO.

Personalizar Azure AD registro de aplicativo

O manifesto do aplicativo Azure AD permite personalizar vários aspectos do registro do aplicativo. Você pode atualizar o arquivo de manifesto do aplicativo conforme necessário. Se você precisar incluir mais permissões de API para acessar suas APIs necessárias, consulte permissões de API para acessar as APIs desejadas. Para obter mais informações sobre como exibir seu aplicativo Azure AD no portal do Azure, confira como exibir Azure AD aplicativo no portal do Azure.

SSO simplificado com o TeamsFx

O TeamsFx ajuda a reduzir suas tarefas usando o SSO e acessando recursos de nuvem até instruções de linha única sem configuração. Com o SDK do TeamsFx, você pode gravar o código de autenticação do usuário com a identidade TeamsUserCredentialdo usuário , como em um ambiente de navegador.

Para obter mais informações sobre o SDK do TeamsFx, confira:

Como usar um aplicativo de Azure AD existente

Para obter mais informações sobre como usar um aplicativo Azure AD existente em seu projeto do TeamsFx, confira as etapas.

Confira também