Testar uma aplicação Web do lado do cliente JavaScript que chama o Microsoft Graph

Neste tutorial, vai aprender a utilizar o Dev Proxy para testar uma aplicação Web do lado do cliente JavaScript de exemplo que chama o Microsoft Graph.

Pré-requisitos

Esta parte do tutorial pressupõe que instalou e configurou o Proxy de Dev no seu computador. Caso contrário, faça-o agora.

Para seguir este tutorial, precisa de:

Dica

Recomendamos que utilize um Inquilino do Programador do Microsoft 365 com pacotes de conteúdos instalados. Obtenha o seu inquilino gratuito ao inscrever-se no Programa de Programadores do Microsoft 365.

Clonar e configurar a aplicação de exemplo

Iniciar Proxy de Programador

O Dev Proxy inclui uma configuração predefinida para testar aplicações que enviam pedidos para o Microsoft Graph e APIs do SharePoint Online.

  • Abra uma linha de comandos, introduza devproxy --config-file "~appFolder/presets/m365.json" e prima Enter para iniciar o Proxy de Programador com configuração para o Microsoft 365.

Iniciar a aplicação de exemplo

  • Abra uma linha de comandos e altere para o samples diretório.
  • Introduza npx lite-server e prima Enter para iniciar o servidor Web da aplicação de exemplo.

Captura de ecrã da aplicação de exemplo em execução no browser Microsoft Edge no macOS. A aplicação mostra um logótipo da Microsoft grande com dois botões abaixo. Um botão primário com o texto

Testar a aplicação de exemplo

  1. Na aplicação em execução, selecione o Without SDK botão.

Atenção

Se tiver recebido uma página vazia depois de clicar no Without SDK botão, verifique se configurou a Azure AD Registo de Aplicações. O problema ocorre quando o .env ficheiro que contém o Client ID registo da aplicação está em falta.

  1. Selecione o Login botão e conclua o fluxo de início de sessão.

Captura de ecrã da aplicação de exemplo em execução no browser Microsoft Edge no Windows 11. A aplicação mostra um logótipo da Microsoft grande com dois botões abaixo. Um botão primário com o texto

O Dev Proxy introduz falhas na sua aplicação ao intercetar pedidos para o Microsoft Graph. Utiliza 50% de probabilidade para pedidos com falhas com um código de estado de erro HTTP suportado aleatoriamente.

Veja o resultado do proxy e dedique algum tempo a atualizar a aplicação de exemplo. Veja como a aplicação de exemplo processa (ou não, neste caso) as falhas introduzidas pelo proxy.

Captura de ecrã da aplicação de exemplo em execução no Microsoft Edge. Os avatares dos utilizadores não são apresentados na aplicação. As Ferramentas de Programador do Microsoft Edge estão abertas ao lado com erros apresentados no registo da consola.

  1. Prima Ctrl + C para parar o Proxy de Dev.

Passo seguinte