Compartir a través de

Prueba de una aplicación web del lado cliente de JavaScript que llama a Microsoft Graph

  • Artículo

En este tutorial, aprenderá a usar Dev Proxy para probar una aplicación web de ejemplo en JavaScript del lado del cliente que utiliza Microsoft Graph.

Prerrequisitos

En esta parte del tutorial se da por supuesto que instalaste y configuraste Dev Proxy en tu máquina. Si no es así, hágalo ahora.

Para seguir este tutorial, necesita:

Sugerencia

Se recomienda usar un inquilino para desarrolladores de Microsoft 365 con paquetes de contenido instalados. Para obtener su inquilino gratis, regístrese en el Programa de desarrolladores de Microsoft 365.

Clonación y configuración de la aplicación de ejemplo

  • Descarga la aplicación de ejemplo
  • Siga las instrucciones para configurar la aplicación.

Iniciar proxy de desarrollo

Proxy de desarrollo incluye una configuración preestablecida para probar aplicaciones que envían solicitudes a las API de Microsoft Graph y SharePoint Online.

  • Abra un símbolo del sistema, escriba devproxy --config-file "~appFolder/presets/m365.json" y presione Entrar para iniciar el proxy de desarrollo con la configuración de Microsoft 365.

Inicio de la aplicación de ejemplo

  • Abra un símbolo del sistema y cambie al directorio samples.
  • Escriba npx lite-server y presione Escriba para iniciar el servidor web de la aplicación de ejemplo.

Captura de pantalla de la aplicación de ejemplo que se ejecuta en el explorador Microsoft Edge en macOS. La aplicación muestra un logotipo de Microsoft grande con dos botones debajo. Un botón principal con el texto

Prueba de la aplicación de ejemplo

  1. En la aplicación en ejecución, seleccione el botón Without SDK.

Cautela

Si tiene una página vacía después de hacer clic en el botón Without SDK, compruebe que ha configurado el registro de aplicaciones de Azure AD. El problema se produce cuando falta el archivo .env que contiene la Client ID del registro de la aplicación.

  1. Seleccione el botón Login y complete el flujo de inicio de sesión.

Captura de pantalla de la aplicación de ejemplo que se ejecuta en el explorador Microsoft Edge en Windows 11. La aplicación muestra un logotipo de Microsoft grande con dos botones debajo. Botón principal con el texto

El proxy de desarrollo presenta errores en la aplicación interceptando solicitudes a Microsoft Graph. Usa el 50 % de probabilidad para solicitudes con errores con un código de estado de error HTTP admitido aleatoriamente.

Vea la salida del proxy y dedique un momento a actualizar la aplicación de ejemplo. Vea cómo controla (o no) la aplicación de ejemplo los errores introducidos por el proxy.

Captura de pantalla de la aplicación de ejemplo ejecutándose en Microsoft Edge. Los avatares de usuario no se muestran en la aplicación. Las herramientas de desarrollo de Microsoft Edge están abiertas al lado, con los errores mostrados en el registro de la consola.

  1. Presione Ctrl + C para detener el proxy de desarrollo.

Paso siguiente

Explorar guías de instrucciones