Exercício – Usar o Microsoft Graph no seu aplicativo Web para recuperar a foto de perfil de um usuário

  • 10 minutos

Você aprendeu todos os conceitos necessários para acessar o perfil de um usuário usando o Microsoft Graph. Agora é hora de criar um aplicativo de cliente que recupere e exiba a foto de um vendedor conectado.

Para concluir esta unidade com êxito, você precisa de uma conta de usuário (de seu locatário desenvolvedor Microsoft 365, por exemplo) com uma imagem de perfil disponível para uso no aplicativo.

Configurar o aplicativo

Neste exercício, irá aceder a um repositório do GitHub, adicionar IDs do Microsoft Entra à aplicação e adicionar código para aceder a uma fotografia com o Microsoft Graph. Se ainda não criou um registo da aplicação Microsoft Entra, conclua o módulo de pré-requisitos antes de continuar.

  1. Para obter o código do aplicativo inicial usado neste exercício, escolha uma das seguintes opções:

    Se você usar o Git, clone o projeto usando o comando clonar git:

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

    Se você não usar o Git, acesse https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart no navegador da Web. Selecione o botão Código seguido por Baixar o ZIP. Extraia o arquivo zip no seu computador.

  2. Abra o arquivo no seu editor de código.

  3. O aplicativo contém os seguintes arquivos:

    • index.html: define a interface 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. Abra o arquivo index.html. Localize a linha <h4>Welcome <span id="userName"></span></h4> e adicione o seguinte código imediatamente após ela:

    <div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

  8. No mesmo arquivo index.html, localize a marca<head>. Adicione o seguinte código para definir o estilo do elemento de imagem que você adicionou na etapa anterior:

    <style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>

  9. Salve o arquivo index.html.

  10. Abra o arquivo graph.js. Adicione uma nova função chamada getUserPhoto() ao arquivo, conforme mostrado no código a seguir. Esta função obterá a foto do usuário conectado usando o /me/photo/$value ponto de extremidade da API do Microsoft Graph.

    async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}

  11. Salve o arquivo graph.js.

  12. Abra o arquivo ui.js e adicione uma nova função chamada displayProfilePhoto() conforme mostrado no código a seguir. Esta função exibirá a resposta da imagem recebida do Microsoft Graph no elemento de imagem que você criou anteriormente.

    async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

  13. Abra o arquivo ui.js e adicione o código a seguir ao final da função displayUI() existente. Este código mostrará um botão que um usuário conectado pode selecionar para exibir sua foto de perfil. O botão permanecerá oculto se o usuário não estiver conectado.

    var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";

Agora que você adicionou as funções extras e trechos de código para obter a foto de um usuário conectado, a próxima etapa é executar o aplicativo.

Execute seu aplicativo

Agora você estendeu seu aplicativo para mostrar alguns dos arquivos do usuário usando o Microsoft Graph. Verifique se há alguns arquivos na pasta raiz da instância do usuário do OneDrive e execute o aplicativo localmente.

  1. Visualize o aplicativo da Web executando o seguinte comando no terminal:

    npm start

  2. Seu navegador deve apontar para http://localhost:8080.

  3. Selecione o botão Entrar com a Microsoft para entrar com sua conta do Microsoft 365. Certifique-se de que a conta com a qual inicia sessão tem uma fotografia de perfil.

    Captura de tela do botão de login.

  4. Inicie sessão com uma conta no mesmo inquilino de programador do Microsoft 365 onde registou a aplicação Microsoft Entra.

  5. Depois de fazer login com sucesso, confirme se uma mensagem de boas-vindas e um botão para mostrar uma foto de perfil aparecem.

    Captura de tela do botão para mostrar uma foto do perfil.

  6. Selecione o botão Mostrar foto do perfil. A foto do perfil do usuário conectado é exibida. Se o perfil não tiver uma fotografia associada, não será apresentada nenhuma fotografia.

    Captura de tela de uma foto de perfil.