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.

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

Cree una carpeta nueva para el proyecto

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

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

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

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

Agregue una carpeta denominada *.vscode a la raíz de la carpeta del proyecto.
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.

Antes de empezar a agregar código para usar el kit de herramientas en la aplicación web, deberá configurar una aplicación de 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 de Microsoft Entra

En el explorador, vaya al centro de administración de Microsoft Entra, inicie sesión y vaya a Microsoft Entra id.
Seleccione Registros de aplicaciones en el panel izquierdo y, luego, Nuevo registro.
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 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.

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 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>

Guarde el archivo y evaluemos los resultados.

Probar la aplicación en un navegador

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: CRL+SHIFT+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 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.

Continuar