Partilhar via

Testar um aplicativo Web JavaScript do lado do cliente que chama o Microsoft Graph

Neste tutorial, você aprenderá a usar o Dev Proxy para testar um aplicativo Web JavaScript de exemplo do lado do cliente que chama o Microsoft Graph.

Pré-requisitos

Esta parte do tutorial pressupõe que você instalou e configurou o Dev Proxy em sua máquina. Se não, faça isso agora.

Para seguir este tutorial, você precisa:

Dica

Recomendamos que utilize um locatário de desenvolvimento do Microsoft 365 com pacotes de conteúdo instalados. Obtenha o seu tenant gratuito ao inscrever-se no Microsoft 365 Developer Program.

Clonar e configurar o aplicativo de exemplo

  • Baixe o aplicativo de exemplo
  • Siga as instruções para configurar o aplicativo.

Iniciar Dev Proxy

O Proxy de Desenvolvimento vem com uma configuração predefinida para testar aplicativos que enviam solicitações para APIs do Microsoft Graph e do SharePoint Online.

  • Abra um prompt de comando, digite devproxy --config-file "~appFolder/presets/m365.json" e pressione Enter para iniciar o Dev Proxy com configuração para o Microsoft 365.

Iniciar o aplicativo de exemplo

  • Abra um prompt de comando e mude para o diretório samples.
  • Digite npx lite-server e pressione Enter para iniciar o servidor Web de aplicativo de exemplo.

Captura de tela do aplicativo de exemplo em execução no navegador Microsoft Edge no macOS. O aplicativo mostra um grande logotipo da Microsoft com dois botões abaixo dele. Um botão primário com o texto 'Com SDK' e um botão secundário com o texto 'Sem SDK'.

Testar o aplicativo de exemplo

  1. No aplicativo em execução, selecione o botão Without SDK.

Atenção

Se tiver uma página vazia depois de clicar no botão Without SDK, verifique se configurou o Registo de Aplicação do Azure AD. O problema ocorre quando o arquivo de .env que contém a Client ID do registro do aplicativo está ausente.

  1. Selecione o botão Login e conclua o fluxo de iniciar sessão.

Captura de tela do aplicativo de exemplo em execução no navegador Microsoft Edge no Windows 11. O aplicativo mostra um grande logotipo da Microsoft com dois botões abaixo dele. Um botão principal com o texto 'Login' e um botão secundário com o texto 'Voltar'.

O Dev Proxy introduz falhas em seu aplicativo intercetando solicitações para o Microsoft Graph. Ele usa uma chance de 50% de falhar solicitações com um código de status de erro HTTP aleatório suportado.

Exiba a saída do proxy e reserve um momento para atualizar o aplicativo de exemplo. Veja como o aplicativo de exemplo lida (ou não, neste caso) com as falhas introduzidas pelo proxy.

Captura de ecrã da aplicação de exemplo em execução no Microsoft Edge. Os avatares dos usuários não são mostrados no aplicativo. As Ferramentas de Desenvolvimento do Microsoft Edge estão abertas ao lado com erros mostrados no log do console.

  1. Pressione a combinação Ctrl + C para parar o Dev Proxy.

Próximo passo

Explore guias de como fazer