Habilitar logon único para o aplicativo do Teams

Criar manifesto do aplicativo Microsoft Entra

1. Baixe o modelo de manifesto do aplicativo Microsoft Entra.

2. Adicione o código do modelo de manifesto do aplicativo baixado ao ./aad.manifest.json arquivo. Isso permite que você personalize diferentes aspectos do registro do aplicativo e atualize o manifesto conforme necessário. Para obter mais informações, consulte o manifesto do aplicativo.

Atualizar manifesto do aplicativo Teams

No ./appPackages/manifest.json arquivo, adicione o seguinte código:

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

webApplicationInfofornece a ID do aplicativo Microsoft Entra e as informações do Microsoft Graph para ajudar os usuários a entrar no seu aplicativo.

Arquivos de configuração do Kit de Ferramentas de Agentes de Atualização

1. Localize os arquivos de configuração do Agents Toolkit, como ./m365agents.yml e ./m365agents.local.yml. Atualize as configurações necessárias relacionadas ao Microsoft Entra nesses arquivos.

2. Adicione a ação em provision e ./m365agents.yml./m365agents.local.yml crie o aadApp/create novo aplicativo do Microsoft Entra usado para SSO:

   - 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
   

   Observação

   Substitua o name valor pelo nome desejado para o aplicativo do Teams.

   Para obter mais informações, consulte aadApp/create.

3. Adicione a aadApp/update ação em provision e ./m365agents.yml./m365agents.local.yml para atualizar seu aplicativo Microsoft Entra:

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

   Observação

   • Atualize o manifestPath valor para o caminho relativo do modelo aad.manifest.jsonde manifesto do aplicativo Microsoft Entra, se você alterou o caminho do arquivo.
   • Em uma configuração local, posicione o aad/update após a file/createOrUpdateEnvironmentFile ação. Isso é necessário porque aad/update usa a saída de file/createOrUpdateEnvironmentFile.

   Para obter mais informações, veja aadApp/update

4. Para um projeto do React, atualize cli/runNpmCommand em deploy.

5. Se você estiver criando um aplicativo de guia usando a estrutura do React na CLI, encontre a cli/runNpmCommand ação no build appm365agents.yml arquivo e adicione as seguintes variáveis de ambiente:

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

6. Se você estiver criando um aplicativo de guia com a estrutura do React, localize a file/createOrUpdateEnvironmentFile ação para implantação no m365agents.local.yml arquivo e adicione as seguintes variáveis de ambiente:

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

Atualizar código-fonte

Com as alterações acima implementadas, seu ambiente está preparado. Agora você pode atualizar seu código para incorporar o SSO no aplicativo Teams.

Vanilla JavaScript

Para um aplicativo de guia que não usa o React, use o código a seguir como um exemplo básico para obter o token SSO:

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

Reagir

Para projetos do React, verifique se as seguintes variáveis de ambiente estão definidas no processo de implantação:

• Para um projeto JavaScript, consulte a guia Exemplo de JavaScript.

• Para um projeto TypeScript, consulte a guia Exemplo de TypeScript.

Para atualizar o código-fonte, siga estas etapas:

1. Mova os auth-start.html arquivos auth/public and auth-end.html da pasta para a public/ pasta. Esses arquivos HTML servem ao propósito de lidar com redirecionamentos de autenticação.

2. Mover sso pasta para src/sso/.auth/

   1. InitTeamsFx: Este arquivo executa uma função que inicializa o SDK do TeamsFx. Após a inicialização do SDK, o componente é aberto GetUserProfile .
   2. GetUserProfile: Este arquivo executa uma função para recuperar informações do usuário invocando a API do Graph.

3. Importar e adicionar InitTeamsFxWelcome.*.

Para obter mais informações, consulte Aplicativo de guia SSO habilitado.

Criar manifesto do aplicativo Microsoft Entra

1. Baixe o modelo de manifesto do aplicativo Microsoft Entra.

2. Adicione o código do modelo de manifesto do aplicativo baixado ao ./aad.manifest.json arquivo. Isso permite que você personalize diferentes aspectos do registro do aplicativo e atualize o manifesto conforme necessário. Para obter mais informações, consulte o manifesto do aplicativo.

Atualizar manifesto do aplicativo Teams

1. No ./appPackages/manifest.json arquivo, adicione o seguinte código:

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

   webApplicationInfofornece a ID do aplicativo Microsoft Entra e as informações do Microsoft Graph para ajudar os usuários a entrar no seu aplicativo.

   Observação

   Você pode usar {{ENV_NAME}} para fazer referência a variáveis no env/.env.{TEAMSFX_ENV} arquivo.

2. Registre um ou mais comandos no commandLists.

   Inclui commandLists comandos que seu bot pode sugerir aos usuários. Se você estiver usando o teamsFx modelo de bot, defina os seguintes valores:

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

3. O validDomains campo inclui os domínios para sites que o aplicativo carrega no cliente do Teams. Atualize o seguinte valor:

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

Arquivos de configuração do Kit de Ferramentas de Agentes de Atualização

1. Localize os arquivos de configuração do Agents Toolkit, como ./m365agents.yml e ./m365agents.local.yml. Atualize as configurações necessárias relacionadas ao Microsoft Entra nesses arquivos.

2. Adicione o seguinte código aadApp/create em provision./m365agents.yml e ./m365agents.local.yml para criar novos aplicativos do Microsoft Entra usados para SSO:

   - 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 name valor pelo nome desejado para seu aplicativo Microsoft Teams.

   Para obter mais informações, consulte aadApp/create.

3. Adicione o seguinte código aadApp/update em provision./m365agents.yml e ./m365agents.local.yml para atualizar seu aplicativo Microsoft Entra:

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

   Observação

   Atualize o manifestPath valor para o caminho relativo do modelo aad.manifest.jsonde manifesto do aplicativo Microsoft Entra, se você alterou o caminho do arquivo.

   Para obter mais informações, veja aadApp/update

4. Localize a createOrUpdateEnvironmentFile ação no m365agents.local.yml arquivo e adicione as seguintes variáveis de ambiente:

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

Infraestrutura de Atualização

Atualize as configurações relacionadas ao Microsoft Entra em seu serviço remoto. O exemplo a seguir mostra as definições de configuração em um Aplicativo Web do Azure:

• M365_CLIENT_ID: ID de cliente do aplicativo Microsoft Entra
• M365_CLIENT_SECRET: Segredo do cliente do aplicativo Microsoft Entra
• M365_TENANT_ID: ID do locatário do aplicativo Microsoft Entra
• INITIATE_LOGIN_ENDPOINT: Página inicial de logon para autenticação
• M365_AUTHORITY_HOST: Host de autoridade OAuth do aplicativo Microsoft Entra
• M365_APPLICATION_ID_URI: URI do identificador do aplicativo Microsoft Entra

Para usar o modelo de teamsFx guia ou bot, siga estas etapas:

1. Abra o infra/azure.parameters.json arquivo e adicione o seguinte código:

   "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. Abra infra/azure.bicep o arquivo e adicione o seguinte código após 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. Adicione o seguinte código antes output no infra/azure.bicep arquivo:

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

   Observação

   • Para adicionar configurações adicionais ao seu Aplicativo Web do Azure, adicione as configurações no webAppSettings.
   • Você também pode precisar definir a versão do nó padrão adicionando a seguinte configuração: bash WEBSITE_NODE_DEFAULT_VERSION: '14.20.0'

   Atualizar código-fonte

   • Bot
   • Extensão de mensagem

   1. Mova os arquivos localizados na pasta para src.auth/sso A ProfileSsoCommandHandler classe serve como um manipulador de comandos SSO, projetado para recuperar informações do usuário usando um token SSO. Você pode adotar esse método para desenvolver seu próprio manipulador de comandos SSO.

   2. Mova a auth/public pasta para src/public. Esta pasta contém páginas HTML para o aplicativo bot. Ao iniciar fluxos de SSO com o Microsoft Entra, o usuário é redirecionado para essas páginas.

   3. Execute o seguinte comando na ./ pasta:

      npm install copyfiles --save-dev
      

   4. Atualize o seguinte comando no package.json arquivo:

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

      As páginas HTML usadas para redirecionamento de autenticação são copiadas ao criar este projeto de bot.

   5. No src/index arquivo, adicione o seguinte comando para importar isomorphic-fetch:

       require("isomorphic-fetch");
      

   6. Adicione o seguinte comando para redirecionar para as páginas de autenticação:

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

   7. Atualize commandApp.requestHandler para garantir que a autenticação funcione com o seguinte código:

      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. Adicionar ssoConfig e ssoCommands entrar ConversationBot em src/internal/initialize:

      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()],
          },
      });