Exercício – Recuperar um token de acesso usando a MSAL

Agora é hora de criar algo usando todos os conceitos que você aprendeu até agora.

Neste exercício, você configurará seu próprio aplicativo. O aplicativo chamará Microsoft Graph para obter informações de perfil de um usuário conectado.

Configurar o aplicativo

Este exercício dá início à execução de um aplicativo que conecta um usuário ao Microsoft Entra ID e faz uma chamada ao Microsoft Graph. Você acessará um repositório GitHub e, em seguida, configurará o aplicativo para ser executado localmente em seu computador.

1. Abra um console no computador e vá para a pasta onde deseja salvar o aplicativo.

2. Para obter o código-fonte, visite o repositório GitHub e escolha uma das seguintes opções:

   • Se você usa Git, clone o projeto usando o comando git clone:

     git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
     

   • Se você não usa Git, selecione o botão Código seguido por Baixar ZIP. Extraia o arquivo *.zip para o computador.

3. Abra a pasta raiz do projeto baixado ou clonado mslearn-retrieve-m365-data-with-msgraph-quickstart em seu editor favorito.

   O aplicativo contém os seguintes arquivos:

   • index.html: define a interface do usuário que aparece para um usuário quando ele acessa o site. Ele carrega o script da Biblioteca de Autenticação da Microsoft (MSAL) e os scripts de aplicativos personalizados, fornece uma maneira de o usuário entrar e exibe o nome do usuário após ele entrar.
   • auth.js: Define a configuração MSAL para associar o aplicativo ao Microsoft Entra ID, conecta um usuário ao aplicativo e manipula a recuperação de um token de acesso que o Microsoft Graph pode usar.
   • graph.js: liga para o Microsoft 365 para acessar o perfil conectado/me. Ele depende do auth.js para recuperar o token de acesso usado para a chamada da API do Microsoft Graph.
   • ui.js: lida com elementos da interface do usuário definidos em index.html.

4. Abra o arquivo auth.js e encontre a constante msalConfig:

   const msalConfig = {
       auth: { .. }
   }
   

5. Substitua o clientId valor da propriedade pelo valor da ID do aplicativo (cliente) copiado do aplicativo do Microsoft Entra (spa-aad-app) que você registrou anteriormente. Você pode obter esse valor na página de visão geral do aplicativo Microsoft Entra (spa-aad-app).

6. No mesmo arquivoauth.js , localize a msalConfig.auth.authority propriedade. Substitua o <your directory ID here> valor pelo valor da ID do diretório (locatário) do aplicativo Microsoft Entra (spa-aad-app) que você registrou anteriormente. Você pode obter esse valor na página de visão geral do aplicativo Microsoft Entra (spa-aad-app).

   A msalConfig constante deve ser semelhante ao código a seguir, com as IDs exclusivas do seu locatário do Microsoft Entra e do aplicativo registrado:

   const msalConfig = {
     auth: {
       clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
       authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
       redirectUri: 'http://localhost:8080'
     }
   };
   

7. Agora que você adicionou as Microsoft Entra IDs apropriadas em auth.js, explore o código no arquivo. Observe que ele contém as seguintes funções:

   • signIn(): conecta o usuário.
   • getToken(): manipula a obtendo um token de acesso que Microsoft Graph pode usar.

8. Abra o arquivo xgraph.js e observe que ele captura um token de acesso, chama a API do Microsoft Graph /me e seleciona os valores ID e displayName do usuário. Observe como o token de acesso é recuperado e adicionado ao cabeçalho de autorização enviado com a solicitação para /me.

9. Por fim, abra ui.js e reserve um momento para explorar a displayUI() função. Ele é responsável por mostrar e ocultar elementos em index.html e exibir o nome do usuário depois que ele entrar.

Execute o aplicativo

Para este procedimento, verifique se você tem o Node.js instalado em seu computador.

É hora de ver seu aplicativo ser executado localmente.

1. No console, vá para a pasta do projeto onde o código-fonte está localizado.

2. Execute o script a seguir na linha de comando. O script iniciará seu aplicativo localmente e abrirá http://localhost:8080 no navegador.

   npm start
   

3. Se o aplicativo estiver configurado corretamente, um botão de entrada será exibido.

   

4. Entre usando uma conta no mesmo locatário de desenvolvedor do Microsoft 365 que você usou uma unidade anterior ao registrar o aplicativo Microsoft Entra.

5. Depois de entrar com êxito, você será solicitado a dar consentimento.

   

6. Selecione Aceitar para dar consentimento para que o aplicativo realize operações em nome do usuário.

7. Depois de consentir, o aplicativo tenta obter um token de acesso usando as informações da conta validada. A biblioteca MSAL lida com isso para você.

8. Depois que o token retorna para o aplicativo, uma solicitação GET é feita ao ponto de extremidade Microsoft Graph /me e o token de acesso é passado no cabeçalho de autorização. A chamada para /me recupera os dados com segurança do serviço.

9. Depois que a resposta for recebida Microsoft Graph, o nome do usuário conectado será exibido no navegador.

   

Você criou com êxito um aplicativo que usa Microsoft Graph para recuperar Microsoft 365 dados!