Compilación de aplicaciones de productividad mediante Microsoft Graph Toolkit
Microsoft Graph Toolkit es una colección de componentes web y proveedores de autenticación para conectar aplicaciones a datos e inteligencia de Microsoft 365. En este tutorial se muestra cómo crear una aplicación web para supervisar los eventos de calendario, las tareas pendientes y los archivos mediante los componentes de Microsoft Graph Toolkit y un proveedor de MSAL2.
¿Cómo funciona el ejemplo?
En este ejemplo se crea una aplicación web que consume el proveedor MSAL2 de Microsoft Graph Toolkit para habilitar la autenticación a través de Microsoft Entra ID y usa componentes de interfaz de usuario para representar eventos de calendario, tareas pendientes y archivos que tendrán un aspecto y se sentirán como experiencias nativas de Microsoft.
Requisitos previos
- Necesita un inquilino para desarrolladores de Microsoft 365. Puede calificar para uno a través del Programa para desarrolladores de Microsoft 365; Para obtener más información, consulte las preguntas más frecuentes. Como alternativa, puede registrarse para obtener una evaluación gratuita de 1 mes o comprar un plan de Microsoft 365.
- Instale Visual Studio Code.
- Instale Visual Studio Code Live Server para probar la aplicación web.
Registrar la aplicación en Microsoft Entra ID
Registre la aplicación en el Microsoft Entra ID para habilitar la autenticación de usuario.
Vaya al Centro de administración Microsoft Entra e inicie sesión con el inquilino del Programa para desarrolladores de Microsoft 365.
Expanda el menú >Identidad y seleccione Aplicaciones>Registros de aplicaciones>Nuevo registro.
Complete el formulario Registrar una aplicación con los siguientes valores y, a continuación, seleccione Registrar.
- Nombre: Demostración de One Productivity Hub
- Tipos de cuenta admitidos: cuentas en cualquier directorio organizativo (cualquier directorio Microsoft Entra multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox)
-
URI de redirección: seleccione Aplicación de página única (SPA) como tipo de URI de redirección y coloque
http://localhost:3000/index.htmlcomo uri de redireccionamiento para probar localmente.
Cuando se complete el registro de la aplicación, vaya a la pestaña Información general de la página de la aplicación y copie el identificador de aplicación (cliente). Necesita este identificador para el paso siguiente.
Crear la aplicación
En este paso, creará una aplicación web y habilitará la autenticación con el proveedor MSAL2 de Microsoft Graph Toolkit.
Creación de una aplicación web
Cree una nueva carpeta y asígnele el nombre OneProductivityHub. Haga clic con el botón derecho y abra la carpeta con Visual Studio Code.
Cree un nuevo archivo en la carpeta OneProductivityHub y asígnele el nombreindex.html.
Seleccione
CTRL + SPACEy elija ejemplo HTML en las opciones.Para habilitar la autenticación con Microsoft Graph Toolkit a través de una red CDN, agregue la siguiente etiqueta de script en index.html dentro de la
<body></body>sección:<script type="module"> import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4"; registerMgtMsal2Provider(); registerMgtComponents(); </script>
Inicializar el proveedor de MSAL2
En index.html, agregue el proveedor MSAL2 en la sección de la
<body></body>siguiente manera:<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>" scopes="User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read"> </mgt-msal2-provider>Importante
Los siguientes ámbitos definidos en el proveedor se mostrarán como una lista de permisos necesarios para solicitar el consentimiento del usuario durante el proceso de autenticación:
User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read.Reemplace por
<YOUR_CLIENT_ID>el identificador de cliente que copió de la aplicación Microsoft Entra.Asegúrese de que la versión final de index.html es similar al ejemplo siguiente:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>One Productivity Hub</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='main.js'></script> </head> <body> <script type="module"> import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4"; registerMgtMsal2Provider(); registerMgtComponents(); </script> <mgt-msal2-provider client-id="<YOUR_CLIENT_ID>" scopes="User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read Tasks.ReadWrite, People.Read"> </mgt-msal2-provider> </body> </html>
Diseño de la aplicación
En este paso, diseñará la aplicación web mediante los componentes del kit de herramientas de Microsoft Graph y la diseñará con CSS.
Inicializar el componente De inicio de sesión
En index.html de la <body></body>sección , agregue el código siguiente en el proveedor.
<div>
<mgt-login />
</div>
Crear un título y una columna para el resto de los componentes
Para que la aplicación tenga un aspecto estructurado, cree un título y una columna para cada característica que se agregará en One Productivity Hub. En index.html en <body></body>, agregue el siguiente código HTML dentro del div, en el componente de inicio de sesión.
<div class="features">
<div class="header"><div class="title">
<h2>One Productivity Hub</h2>
<div class="row">
<div class="column"><h3>Calendar events</h3></div>
<div class="column"><h3>To-do tasks</h3></div>
<div class="column"><h3>Files</h3></div>
</div>
</div></div>
<div class="row" id="content">
<div class="column" id="mgt-col"></div>
<div class="column" id="mgt-col"></div>
<div class="column" id="mgt-col"></div>
</div>
</div>
Componente de la agenda
En el div etiquetado con class="row", agregue el componente Agenda dentro del div de la primera columna.
<mgt-agenda />
Componente de tareas pendientes
En el div etiquetado con class="row", agregue el componente Tareas pendientes dentro del segundo div de columna.
<mgt-todo />
Componente FileList
En div etiquetado con class="row", agregue el componente De lista de archivos dentro del div de tercera columna.
<mgt-file-list />
Estilo de la aplicación web con CSS
Cree un archivo index.css en el proyecto y agregue el siguiente código CSS.
body, #root>div { background-color: #F3F2F1; } .features { min-height: 80vh; margin: 20px; background-color: #FFF; box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13); border-radius: 4px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .header { display: flex; background-color: #f0f0f0; } .title { margin-top: 20px; margin-left: 10px; width: 100%; } .title h2 { font-size: 24px; padding-left: 5px; display: inline; font-weight: 600; } .title h3 { float: left; width: 32%; background:transparent; font-size: 16px; margin-bottom: 10px; padding-left: 10px; padding-top: 10px; color: #8A8886; font-weight: 600; } mgt-login { margin-left: 20px; --avatar-size: 60px; --font-family: 'Segoe UI'; --font-size: 20px; --font-weight: 700; --color: black; --text-transform: none; --line2-font-size: 14px; --line2-font-weight: 400; --line2-color: #8A8886; --line2-text-transform: none; } #content, html, body { height: 98%; } #mgt-col { float: left; width: 32%; background:transparent; height:500px; overflow: hidden; padding: 5px; margin-top: 5px; } #mgt-col:hover { overflow-y: auto; }En index.html dentro de
<head></head>, defina el vínculohrefde hoja de estilos como index.css.<link rel='stylesheet' type='text/css' media='screen' href='index.css'>Asegúrese de que la versión final de index.html es similar a la siguiente.
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>One Productivity Hub</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='index.css'> <script src='main.js'></script> </head> <body> <script type="module"> import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4"; registerMgtMsal2Provider(); registerMgtComponents(); </script> <mgt-msal2-provider client-id="<YOUR_CLIENT_ID>" scopes="User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read"> </mgt-msal2-provider> <div> <mgt-login /> </div> <div class="features"> <div class="header"> <div class="title"> <h2>One Productivity Hub</h2> <div class="row"> <div class="column"><h3>Calendar events</h3></div> <div class="column"><h3>To-do tasks</h3></div> <div class="column"><h3>Files</h3></div> </div> </div> </div> <div class="row" id="content"> <div class="column" id="mgt-col"><mgt-agenda /></div> <div class="column" id="mgt-col"><mgt-todo /></div> <div class="column" id="mgt-col"><mgt-file-list /></div> </div> </div> </body> </html>
Ejecución de la aplicación
En este paso, ejecutará la aplicación de ejemplo en el explorador mediante Live Server.
Seleccione
CTRL + SHIFT + Pesta opción para abrir el panel en Visual Studio Code, escribaPreferencesen el panel y seleccionePreferences: Open Workspace Settings (JSON)una de las opciones.En el
settings.jsonarchivo que se abre, agregue el código siguiente.{ "liveServer.settings.host": "localhost", "liveServer.settings.port": 3000 }Seleccione
CTRL + SHIFT + Pesta opción para abrir el panel en Visual Studio Code, escribaLive Serveren el panel y seleccioneLive Server: Open with Live Serveruna de las opciones. Live Server ejecutará la aplicación en el explorador.Seleccione Iniciar sesión y use el inquilino del Programa para desarrolladores de Microsoft 365 para iniciar sesión.
Dé su consentimiento a los permisos necesarios para usar las características de la aplicación, como la visualización de eventos de calendario, tareas pendientes y carpetas de archivos.
Para asegurarse de que la aplicación One Productivity Hub funciona correctamente, agregue algunos eventos de calendario, tareas pendientes y carpetas de archivos en el inquilino para desarrolladores de Microsoft 365.
Resumen
Ha creado correctamente la aplicación de ejemplo One Productivity Hub mediante Microsoft Graph Toolkit. En este tutorial, ha creado una aplicación web y ha consumido el proveedor de Microsoft Graph Toolkit MSAL2 y los componentes de la interfaz de usuario.
Si busca formas de mejorar la aplicación One Productivity Hub, consulte la lista de componentes web que están disponibles en Microsoft Graph Toolkit e incluya componentes adicionales en la aplicación.
Pasos siguientes
Para obtener más información sobre Microsoft Graph Toolkit, consulte la introducción al kit de herramientas de Microsoft Graph y la ruta de aprendizaje Desarrollo de aplicaciones con microsoft Graph Toolkit .
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.