Compartir a través de

Compilación de una aplicación web con Microsoft Graph Toolkit

  • Artículo

En este tema se describe cómo empezar a trabajar con Microsoft Graph Toolkit en una aplicación web escrita en JavaScript de vainilla. Para ver un tutorial paso a paso, pruebe el módulo Introducción al kit de herramientas de Microsoft Graph. Si desea obtener información sobre cómo usar el kit de herramientas con un marco web, consulte Compilación de una aplicación web (React) o Compilación de una aplicación web (Angular).

La introducción al kit de herramientas implica los pasos siguientes:

  1. Agregue Microsoft Graph Toolkit al proyecto.
  2. Inicialice el proveedor de la biblioteca de autenticación de Microsoft 2(MSAL2).
  3. Agregar componentes.
  4. Pruebe la aplicación.

Adición del kit de herramientas de Microsoft Graph al proyecto

Puede usar Microsoft Graph Toolkit en la aplicación instalando los paquetes npm o cargando desde una red de entrega de contenido (CDN).

Para usar el kit de herramientas a través de una red CDN, agregue el siguiente script y marcado a la página HTML:

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

Inicializar el proveedor MSAL2

Los proveedores del Kit de herramientas de Microsoft Graph permiten la autenticación y el acceso a Microsoft Graph para los componentes. Para más información, vea Usar los proveedores. El proveedor MSAL2 usa MSAL-browser para iniciar sesión de usuarios y adquirir tokens. Puede inicializar este proveedor en html o JavaScript.

Nota: Si actualmente usa el proveedor MSAL y desea actualizar al proveedor MSAL2, consulte Migración del proveedor MSAL al proveedor MSAL2. Si desea usar su propia autenticación de back-end, use el proveedor de proxy en lugar del proveedor MSAL2.

Puede elegir inicializar el proveedor en el código JavaScript o html.

Para inicializar el proveedor de MSAL en JavaScript, agregue el código siguiente a la aplicación:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

El identificador de cliente es la única propiedad necesaria para inicializar el proveedor, pero puede establecer más opciones. Para obtener la lista completa, consulte Proveedor MSAL2.

Creación de un identificador de aplicación o cliente

Para obtener un identificador de cliente, debe registrar la aplicación en Microsoft Entra ID.

Agregar componentes

Después de inicializar el proveedor MSAL2, puede empezar a usar cualquiera de los componentes del kit de herramientas.

En este ejemplo se usan los módulos ES6, el proveedor MSAL2 inicializado en JavaScript y el Login componente :

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

En el ejemplo siguiente se usan los módulos ES6, el proveedor MSAL2 inicializado en HTML y el Login componente :

<script type="module">
  import { registerMgtMsal2Provider } from "node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js";
  import { registerMgtLoginComponent } from "node_modules/@microsoft/mgt-components/dist/es6/index.js";
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>

Probar la aplicación

Para probar la aplicación, MSAL requiere que la página se hospede en un servidor web para los redireccionamientos de autenticación.

Si acaba de empezar a trabajar y quiere jugar, puede usar Live Server en Visual Studio Code o en cualquier servidor de desarrollo ligero similar. Descargue la extensión y abra el archivo HTML mediante el servidor en directo.

Nota: Asegúrese de que el URI de redireccionamiento del registro de la aplicación está establecido en el puerto localhost en el que se hospeda la aplicación. Vaya al registro de la aplicación en el Centro de administración Microsoft Entra, haga clic en Autenticación en Administrar y agregue el URI de redirección correcto.

Seguimiento del estado de inicio de sesión de un usuario

Puede detectar cuándo un usuario ha iniciado sesión correctamente y mostrar componentes específicos en consecuencia. Por ejemplo, muestre el componente de agenda si el usuario ha iniciado sesión. De lo contrario, muestre la interfaz de inicio de sesión.

El paquete mgt-element proporciona la función de utilidad a la isSignedIn que puede llamar para determinar si un usuario ha iniciado sesión.

Si usa el kit de herramientas a través de los paquetes npm, puede importar y ProviderProviderState desde @microsoft/mgt-element.

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

Pasos siguientes