Ejercicio: Iniciar sesión en la aplicación con el componente de inicio de sesión mediante el Kit de herramientas de Microsoft Graph

  • 12 minutos

En esta unidad, creará una aplicación web y explorará un proyecto de inicio. Después, usará el componente de inicio de sesión del kit de herramientas para iniciar sesión en la aplicación y acceder a la funcionalidad de Microsoft Graph.

Instalación del proxy de desarrollo

Para completar este ejercicio, debe instalar la versión más reciente de Dev Proxy. Dev Proxy es una herramienta que simula las respuestas de la API. Permite compilar y probar la aplicación sin necesidad de un inquilino de Microsoft 365. Siga las instrucciones de introducción y compruebe que El proxy de desarrollo se está ejecutando antes de continuar.

Nota:

Cuando se usa Dev Proxy para completar este ejercicio, la aplicación usa datos estáticos y simulados. El código que se escribe funciona con configuraciones de datos simulados y activos. Para usar datos activos de un inquilino de Microsoft 365, solo tiene que crear un registro de aplicación de Microsoft Entra y actualizar la referencia de identificador de cliente en la aplicación.

Descargar el valor preestablecido de Dev Proxy

Para completar este ejercicio, debe descargar el valor preestablecido de Proxy de desarrollo para este módulo. El valor preestablecido contiene los datos ficticios y las respuestas que se usan para compilar la aplicación. Para descargar el valor preestablecido, ejecute el siguiente comando en el terminal:

devproxy preset get learn-msgraph-toolkit-intro

Configuración de la estructura de la aplicación para la aplicación web

Cree una carpeta nueva para el proyecto

  1. Abrir Visual Studio Code. Seleccione Archivo>Abrir carpeta en el menú de comandos.
  2. Al abrir una carpeta, el sistema operativo proporciona un botón para crear una Nueva carpeta.
  3. Desplácese hasta donde quiera crear la nueva carpeta y seleccione Nueva carpeta. Asigne un nombre a la carpeta mgt-app.
  4. Abra la carpeta mgt-app en Visual Studio Code.

Crear archivos y carpetas en la carpeta del proyecto

La aplicación web tendrá un archivo HTML y una carpeta para la configuración de Live Server. Live Server es una extensión Visual Studio Code. Vamos a crear la estructura del proyecto.

  1. Seleccione Archivo>Nuevo archivo.

  2. Asigne un nombre al archivo index.htmly guárdelo mediante CTRL+S (Windows) o COMMAND+S (macOS).

  3. Agregue el siguiente código HTML a index.html y guarde el archivo.

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

  4. Agregue una carpeta denominada .vscode a la raíz de la carpeta del proyecto.

  5. Agregue un archivo denominado settings.json a la carpeta .vscode. Copie y pegue el código siguiente en settings.json y guarde el archivo.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Esta configuración garantiza que se pruebe correctamente la aplicación de forma local cuando se usa Live Server.

Agregar código para iniciar sesión en la aplicación con el componente de inicio de sesión

Antes de empezar a agregar código para usar el kit de herramientas en la aplicación web, deberá configurar una aplicación Microsoft Entra.

Usará los detalles de la aplicación Microsoft Entra para autenticar la aplicación mediante el proveedor microsoft authentication library (MSAL) v2.

Configuración de una aplicación Microsoft Entra

  1. En el explorador, vaya al Centro de administración de Microsoft Entra, inicie sesión y vaya a Microsoft Entra ID.

  2. Seleccione Registros de aplicaciones en el panel izquierdo y, luego, Nuevo registro.

    Captura de pantalla que muestra la selección de Nuevo registro para crear un nuevo registro de aplicación.

  3. En la pantalla Registrar una aplicación, escriba los siguientes valores:

    • Nombre: escriba el nombre de la aplicación.
    • Tipos de cuenta admitidos: seleccione Cuentas en cualquier directorio organizativo (cualquier directorio de Microsoft Entra : multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox).
    • Uri de redirección (opcional): seleccione Aplicación de página única (SPA) y escriba http://localhost:3000.
    • Seleccione Registrar.

    Captura de pantalla que muestra el registro de la aplicación en microsoft entra id.

Ahora que configuró correctamente la aplicación, vamos a agregar códigos.

Agregar el kit de herramientas de Microsoft Graph al proyecto

Anteriormente aprendió que puede hacer referencia al kit de herramientas directamente desde la red de entrega de contenido. Para ello, agregue el siguiente fragmento de código justo antes de la etiqueta </head> en el archivo index.html.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Inicialización del proveedor de MSAL v2

Para autenticar la aplicación, inicialice el proveedor de MSAL v2 con el identificador de aplicación (cliente) que guardó en la sección anterior.

Agregue el siguiente fragmento de código al <body> del archivo index.html.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Reemplace YOUR-CLIENT-ID por el identificador de aplicación (cliente) que guardó en la sección anterior.

Para autenticar la aplicación, inicialice el proveedor de MSAL v2 mediante f601c4cb-6902-4675-8415-7db28a4a332d como identificador de aplicación. Dev Proxy simulará el proceso de autenticación para este registro ficticio de aplicaciones.

Agregue el siguiente fragmento de código al <body> del archivo index.html.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Agregar el componente de inicio de sesión a la aplicación web

Para agregar el componente de inicio de sesión, agregue el siguiente elemento en el cuerpo del archivo index.html.

<mgt-login></mgt-login>

Después de todos los cambios, el archivo index.html debe tener un aspecto similar al siguiente:

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Guarde el archivo y evaluemos los resultados.

Probar la aplicación en un navegador

Iniciar proxy de desarrollo

Comience por iniciar el proxy de desarrollo. En un terminal, ejecute el siguiente comando:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Mantenga abierto el terminal y ejecute Dev Proxy mientras prueba la aplicación.

Inicio de la aplicación

Para probar la aplicación en un navegador, debe haber instalado Visual Studio Code Live Server.

Para ejecutar la aplicación en Live Server, presione la siguiente combinación de teclas en Visual Studio Code y busque Live Server:

  • Windows: CTRL+MAYÚS+P
  • macOS: COMMAND+SHIFT+P

Abra con Live Server, seleccione la opción y presione Entrar.

Después de ejecutar Live Server, es posible que abra la página http://localhost:3000/index.html. Abra http://localhost:3000 en el navegador.

Seleccione Iniciar sesión, Dev Proxy simulará el proceso de autenticación y la aplicación mostrará la información de inicio de sesión ficticio.

Seleccione Iniciar sesión y escriba su cuenta de inquilino de desarrollador de Microsoft 365. Se le pedirá que dé su consentimiento a los permisos necesarios la primera vez. Una vez que haya dado su consentimiento, la aplicación mostrará la información de inicio de sesión.

Captura de pantalla que muestra los resultados finales de la aplicación después del inicio de sesión del usuario.

Ahora ha implementado correctamente un mecanismo de autenticación para acceder a los datos de Microsoft 365.

Nota:

Agradecemos sus comentarios sobre su experiencia con el uso de Dev Proxy para completar este ejercicio. Por favor tómese un momento para completar esta breve encuesta.