Compartir a través de

Introducción al Kit de herramientas de Microsoft Graph

  • Artículo

Los componentes del kit de herramientas de Microsoft Graph se pueden agregar fácilmente a la aplicación web, al elemento web de SharePoint o a las pestañas de Microsoft Teams. Los componentes se basan en estándares web y se pueden usar en proyectos de JavaScript sin formato o con marcos web populares como Reach, Angular y Vue.js.

Vea este breve vídeo para empezar a usar el kit de herramientas.

Para ver un tutorial paso a paso, consulte el módulo Introducción al kit de herramientas de Microsoft Graph .

Configurar el espacio empresarial de Microsoft 365.

Para usar Microsoft Graph Toolkit para desarrollar una aplicación, necesita acceso a un inquilino de Microsoft 365. Si no tiene un inquilino 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.

Configurar el entorno de desarrollo

Para desarrollar con el kit de herramientas, necesita:

  • Editor de texto o IDE. Puede usar el editor o IDE que prefiera, o puede instalar y usar Visual Studio Code de forma gratuita.
  • Un explorador web moderno como Microsoft Edge, Google Chrome o Firefox.
  • Una versión LTS de Node.js, que puede instalar desde nodejs.org.

Uso del kit de herramientas de Microsoft Graph

Puede usar Microsoft Graph Toolkit en la aplicación instalando los npm paquetes o haciendo referencia al cargador directamente (a través de unpkg).

El uso del kit de herramientas a través de módulos ES6 le proporciona control total del proceso de agrupación y le permite agrupar solo el código que necesita para la aplicación. Para usar los módulos ES6, agregue los @microsoft/mgt-elementpaquetes , @microsoft/mgt-componentsy @microsoft/mgt-msal2-provider al proyecto:

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

Para usar los componentes como un elemento personalizado en HTML, deben registrarse. Para usar los componentes del código, importe y ejecute la función de registro de componentes necesaria. En el ejemplo siguiente se muestra cómo hacerlo para los componentes de agenda e inicio de sesión:

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

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

Como acceso directo, si desea registrar todos los componentes de @microsoft/mgt-components, puede usar el registerMgtComponents() método auxiliar. El uso declarativo de los proveedores todavía requiere que el proveedor adecuado se registre por separado, ya que proceden de paquetes diferentes.

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

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

Importante

Al trabajar con un empaquetador compatible con la agitación de árboles, como Webpack o Rollup, querrá importar y registrar los componentes individuales. Esto garantiza que los componentes no utilizados se sacuden mediante árbol de las compilaciones.

También puede configurar el proveedor de forma imperativa, como se muestra en el ejemplo siguiente:

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>