Dados organizacionais: Criando um registro de aplicativo Microsoft Entra ID

Melhore 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 o Microsoft Entra ID, você pode recuperar e exibir facilmente dados relevantes em seus aplicativos, reduzindo a necessidade de os usuários alternarem de contexto. Seja fazendo referência a um e-mail 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 seu aplicativo, simplificando o processo de tomada de decisões.

Neste exercício, você irá:

• Crie um registro de aplicativo Microsoft Entra ID 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 Microsoft Entra ID

1. Vá para o portal do Azure e selecione Microsoft Entra ID.

2. Selecione Gerenciar -->Registros de aplicativos seguido de + 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 suportados: Contas em qualquer diretório organizacional (Qualquer locatário do Microsoft Entra ID - Multilocatário)
   • URI de redirecionamento:
     • Selecione Aplicativo de página única (SPA) e insira http://localhost:4200 no campo Redirecionar URI .
   • Selecione Registrar para criar o registro do aplicativo.

   

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

   

Atualizar o arquivo .env do projeto

1. Abra o arquivo .env no 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é-reqs do tutorial).

3. Depois de iniciar sessão, expanda uma equipa e encontre um canal para o qual pretende enviar mensagens a partir da aplicação. 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.../", o ID da equipe é 19%3ae9b9... até o seguinte / personagem.

6. Copie o ID da equipe e atribua-o no 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.../", o ID do canal é 19%3aQK02... até o seguinte / personagem.

9. Copie o ID do canal e atribua-o no 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 concluídos até este ponto:

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

  Localize as janelas do terminal que executam o servidor API e o servidor Web e pressione CTRL + C para pará-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 de código do Visual Studio e selecione Abrir no Terminal integrado. Certifique-se de que seu 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 PostgreSQL diretamente usando o Docker Desktop, o Podman, o nerdctl ou outro tempo de execução de contêiner instalado, 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. Quando o contêiner de banco de dados for iniciado, pressione o + ícone na barra de ferramentas Terminal de código do Visual Studio para criar uma segunda janela de terminal.

     

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

     • npm install
     • npm start

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

  7. cdna pasta cliente e execute os seguintes comandos 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óximo Passo

Dados da organização: Efetuando login de um utilizador e obtendo um token de acesso