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

Concluído

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 permite-lhe começar a executar uma aplicação que inicia sessão num utilizador no Microsoft Entra ID e faz uma chamada para o 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 ficheiro *.zip para o seu 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 a aplicação ao Microsoft Entra ID, inicia sessão de um utilizador na aplicação e processa a obtenção de um token de acesso que o Microsoft Graph pode utilizar.
   • 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 ficheiro auth.js e localize a constante msalConfig:

   const msalConfig = {
       auth: { .. }
   }
   

5. Substitua o valor da clientId propriedade pelo valor de ID da Aplicação (cliente) copiado da aplicação Microsoft Entra (spa-aad-app) que registou anteriormente. Pode obter este valor na página de descrição geral da aplicação Microsoft Entra (spa-aad-app).

6. No mesmo ficheiro auth.js , localize a msalConfig.auth.authority propriedade . Substitua o <your directory ID here> valor pelo valor de ID do Diretório (inquilino) da aplicação Microsoft Entra (spa-aad-app) que registou anteriormente. Pode obter este valor na página de descrição geral da aplicação Microsoft Entra (spa-aad-app).

   A msalConfig constante deve ter um aspeto semelhante ao seguinte código, com os IDs exclusivos do inquilino do Microsoft Entra e a aplicação registada:

   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 adicionou os IDs do Microsoft Entra adequados ao auth.js, dedique algum tempo a explorar o código no ficheiro. 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. Inicie sessão com uma conta no mesmo inquilino de programador do Microsoft 365 que utilizou numa unidade anterior quando registou a aplicação 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!

Continuar