Compartir a través de

Compilación de aplicaciones de productividad mediante Microsoft Graph Toolkit

Precaución

Microsoft Graph Toolkit está en desuso. El período de retirada comienza el 1 de septiembre de 2025, con la retirada completa prevista para el 28 de agosto de 2026. Los desarrolladores deben migrar al uso de los SDK de Microsoft Graph u otras herramientas de Microsoft Graph compatibles para crear experiencias web. Para obtener más información, consulte el anuncio de desuso.

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.

Captura de pantalla que muestra el ejemplo de One Productivity Hub

Requisitos previos

Registrar la aplicación en Microsoft Entra ID

Registre la aplicación en el Microsoft Entra ID para habilitar la autenticación de usuario.

  1. Vaya al Centro de administración Microsoft Entra e inicie sesión con el inquilino del Programa para desarrolladores de Microsoft 365.

  2. Expanda el menú >Identidad y seleccione Aplicaciones>Registros de aplicaciones>Nuevo registro.

    Captura de pantalla de la página registros de aplicaciones con nuevo registro resaltado

  3. 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.html como uri de redireccionamiento para probar localmente.

    Captura de pantalla de la página Registrar una aplicación que muestra los valores que se van a introducir

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

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

  2. Cree un nuevo archivo en la carpeta OneProductivityHub y asígnele el nombreindex.html.

  3. Seleccione CTRL + SPACE y elija ejemplo HTML en las opciones.

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

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

  2. Reemplace por <YOUR_CLIENT_ID> el identificador de cliente que copió de la aplicación Microsoft Entra.

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

  1. 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;
}

  2. En index.html dentro de <head></head>, defina el vínculo href de hoja de estilos como index.css.

    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>

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

  1. Seleccione CTRL + SHIFT + P esta opción para abrir el panel en Visual Studio Code, escriba Preferences en el panel y seleccione Preferences: Open Workspace Settings (JSON) una de las opciones.

  2. En el settings.json archivo que se abre, agregue el código siguiente.

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

  3. Seleccione CTRL + SHIFT + P esta opción para abrir el panel en Visual Studio Code, escriba Live Server en el panel y seleccione Live Server: Open with Live Server una de las opciones. Live Server ejecutará la aplicación en el explorador.

  4. Seleccione Iniciar sesión y use el inquilino del Programa para desarrolladores de Microsoft 365 para iniciar sesión.

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

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

    Captura de pantalla que muestra la aplicación de ejemplo One Productivity Hub

Contenido relacionado

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.

  • Last updated on