Dados organizacionais: criando um registro de aplicativo do Microsoft Entra ID

Aumente a produtividade do usuário integrando dados organizacionais (e-mails, arquivos, bate-papos e eventos de calendário) diretamente em seus aplicativos personalizados. Usando as APIs do Microsoft Graph e a ID do Microsoft Entra, você pode recuperar e exibir dados relevantes em seus aplicativos, reduzindo a necessidade de os usuários alternarem o contexto. Seja fazendo referência a um email enviado a um cliente, revisando uma mensagem do Teams ou acessando um arquivo, os usuários podem encontrar rapidamente as informações de que precisam sem sair do aplicativo, simplificando o processo de tomada de decisão.

Neste exercício, você vai:

• Crie um registro de aplicativo de ID do Microsoft Entra para que o Microsoft Graph possa acessar dados organizacionais e trazê-los para o aplicativo.
• Localize team e channel IDs do Microsoft Teams que são necessários para enviar mensagens de chat para um canal específico.
• Atualize o arquivo .env do projeto com valores do registro do aplicativo Microsoft Entra ID.

Criar um registro de aplicativo do Microsoft Entra ID

1. Acesse o portal do Azure e selecione a ID do Microsoft Entra.

2. Selecione Gerenciar -->Registros de aplicativo seguidospor + Novo registro.

3. Preencha os detalhes do novo formulário de registro do aplicativo, conforme mostrado abaixo, e selecione Registrar:

   • Nome: microsoft-graph-app
   • Tipos de conta com suporte: contas em qualquer diretório organizacional (qualquer locatário da ID do Microsoft Entra – Multilocatário)
   • URI de Redirecionamento:
     • Selecione SPA (aplicativo de página única) e insira http://localhost:4200 o campo URI de Redirecionamento .
   • Selecione Registrar para criar o registro do aplicativo.

   

1. Selecione Visão geral no menu de recursos e copie o Application (client) ID valor para a área de transferência.

   

Atualizar o arquivo .env do projeto

1. Abra o arquivo .env em seu editor e atribua o Application (client) ID valor a ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Se você quiser habilitar a capacidade de enviar uma mensagem do aplicativo para um Canal do Teams, entre no Microsoft Teams usando sua conta de locatário de desenvolvimento do Microsoft 365 (isso é mencionado nos pré-requisitos para o tutorial).

3. Depois de fazer login, expanda uma equipe e encontre um canal para o qual deseja enviar mensagens no aplicativo. Por exemplo, você pode selecionar a equipe da Empresa e o canal Geral (ou qualquer equipe/canal que você gostaria de usar).

   

4. No cabeçalho da equipe, clique nos três pontos (...) e selecione Obter link para a equipe.

5. No link que aparece na janela pop-up, o ID da equipe é a sequência de letras e números após team/. Por exemplo, no link "https://teams.microsoft.com/l/team/19%3ae9b9.../", a ID da equipe é 19%3ae9b9... até o caractere a seguir / .

6. Copie a ID da equipe e atribua-a ao TEAM_ID arquivo .env .

7. No cabeçalho do canal, clique nos três pontos (...) e selecione Obter link para o canal.

8. No link que aparece na janela pop-up, o ID do canal é a sequência de letras e números após channel/. Por exemplo, no link "https://teams.microsoft.com/l/channel/19%3aQK02.../", a ID do canal é 19%3aQK02... até o caractere a seguir / .

9. Copie a ID do canal e atribua-a ao CHANNEL_ID arquivo .env .

10. Salve o arquivo env antes de continuar.

Iniciar/reiniciar os servidores de aplicativos e API

Execute uma das seguintes etapas com base nos exercícios que você concluiu até este ponto:

• Se você iniciou o banco de dados, o servidor de API e o servidor Web em um exercício anterior, precisará interromper o servidor de API e o servidor Web e reiniciá-los para pegar as alterações de arquivo .env . Você pode deixar o banco de dados em execução.

  Localize as janelas do terminal que executam o servidor de API e o servidor Web e pressione CTRL + C para interrompê-las. Inicie-os novamente digitando npm start em cada janela do terminal e pressionando Enter. Continue para o próximo exercício.

• Se você ainda não iniciou o banco de dados, o servidor de API e o servidor Web, conclua as seguintes etapas:

  1. Nas etapas a seguir, você criará três janelas de terminal no Visual Studio Code.

     

  2. Clique com o botão direito do mouse no arquivo .env na lista de arquivos do Visual Studio Code e selecione Abrir no Terminal Integrado. Verifique se o terminal está na raiz do projeto - openai-acs-msgraph - antes de continuar.

  3. Escolha uma das seguintes opções para iniciar o banco de dados PostgreSQL:

     • Se você tiver o Docker Desktop instalado e em execução, execute docker-compose up na janela do terminal e pressione Enter.

     • Se você tiver o Podman com podman-compose instalado e em execução, execute podman-compose up na janela do terminal e pressione Enter.

     • Para executar o contêiner do PostgreSQL diretamente usando o Docker Desktop, o Podman, o nerdctl ou outro tempo de execução do contêiner que você instalou, execute o seguinte comando na janela do terminal:

       • Subsistema Mac, Linux ou Windows para Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows com PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Depois que o contêiner de banco de dados for iniciado, pressione o + ícone na barra de ferramentas do Terminal do Visual Studio Code para criar uma segunda janela de terminal.

     

  5. cd na pasta servidor/typescript e execute os comandos a seguir para instalar as dependências e iniciar o servidor de API.

     • npm install
     • npm start

  6. Pressione o + ícone novamente na barra de ferramentas do Terminal do Visual Studio Code para criar uma terceira janela de terminal.

  7. cd na pasta do cliente e execute os comandos a seguir para instalar as dependências e iniciar o servidor Web.

     • npm install
     • npm start

  8. Um navegador será iniciado e você será direcionado para http://localhost:4200.

     

Próxima Etapa

Dados organizacionais: entrar em um usuário e obter um token de acesso