Introducción al kit de herramientas de Microsoft GraphGetting started with the Microsoft Graph Toolkit

14/12/2020
Tiempo de lectura: 3 minutos

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.The Microsoft Graph Toolkit components can easily be added to your web application, SharePoint web part, or Microsoft Teams tabs. Los componentes se basan en estándares web y se pueden usar en proyectos de JavaScript sin formato o con Marcos web populares como alcance, angular, Vue.js y mucho más.The components are based on web standards and can be used in both plain JavaScript projects or with popular web frameworks such as Reach, Angular, Vue.js, and more.

Puede ver este breve vídeo para ver lo rápido y fácil que es comenzar con el kit de herramientas.You can watch this short video to see how quick and easy it is to get started with the Toolkit.

Configurar su inquilino de Microsoft 365Set up your Microsoft 365 tenant

Para poder desarrollar con el kit de herramientas, necesita tener acceso a un inquilino de Microsoft 365.In order to develop with the Toolkit, you need access to a Microsoft 365 tenant. Si no tiene una, puede obtener una suscripción gratuita a Microsoft 365 Developer al unirse al programa de desarrolladores de microsoft 365.If you don't have one, you can get a free Microsoft 365 developer subscription by joining the Microsoft 365 Developer Program. Para obtener más información sobre cómo configurar la suscripción, vea configurar una suscripción de desarrollador de Microsoft 365.For details about how to configure your subscription, see Set up a Microsoft 365 developer subscription.

Configurar el entorno de desarrolloSet up your development environment

Para desarrollar con el kit de herramientas, necesitará un editor de texto o IDE.To develop with the Toolkit, you will need a text editor or IDE. Puede usar el editor o el IDE que prefiera o instalar y usar Visual Studio Code de forma gratuita.You can use the editor or IDE of your choice or install and use Visual Studio Code for free. También necesitará un explorador web moderno como Microsoft Edge, Google Chrome o Firefox.You will also need a modern web browser like Microsoft Edge, Google Chrome, or Firefox. También necesitará una versión de LTS de Node.js, que puede instalar desde NodeJS.org.You'll also need an LTS version of Node.js, which you can install from nodejs.org.

Uso del kit de herramientas de Microsoft GraphUsing the Microsoft Graph Toolkit

Puede usar el kit de herramientas de Microsoft Graph en su aplicación haciendo referencia al cargador directamente (a través de unpkg) o mediante la instalación del paquete NPM.You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package.

unpkgunpkg
npmnpm

Para usar el kit de herramientas mediante la gestión de cargador, agregue la referencia en un script al código:To use the Toolkit via mgt-loader, add the reference in a script to your code:

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

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

Usar el kit de herramientas a través de los módulos de ES6 le proporcionará un control total del proceso de agrupación y le permitirá agrupar solo el código que necesita para su aplicación.Using the Toolkit via ES6 modules will give you full control of the bundling process and allow you to bundle only the code you need for your application. Para usar los módulos ES6, agregue el paquete NPM a su proyecto:To use the ES6 modules, add the npm package to your project:

npm install @microsoft/mgt

Ahora puede hacer referencia a todos los componentes de la página que está usando:Now you can reference all the components in the page you're using:

<script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></script>

<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Paquetes NPMNPM packages

El kit de herramientas de Microsoft Graph está formado por varios paquetes NPM, lo que le permite incluir solo el código que necesita para sus aplicaciones.The Microsoft Graph Toolkit is made up of several NPM packages, allowing you to only include the code you need for your applications.

@microsoft/MGT-Element@microsoft/mgt-element

@microsoft/mgt-elementEs el paquete principal que contiene solo las clases base usadas para crear componentes y proveedores.The @microsoft/mgt-element is the core package that contains only the base classes used for building components and providers. Este paquete expone todas las clases e interfaces necesarias para compilar sus propios componentes y exporta la interfaz IProvider y la clase SimpleProvider para crear proveedores personalizados.This package exposes all necessary classes and interfaces needed to build your own components and exports the IProvider interface and SimpleProvider class for building custom providers.

@microsoft/MGT-Components@microsoft/mgt-components

El @microsoft/mgt-components paquete contiene todos los componentes Web conectados de Microsoft Graph, como Person , PeoplePicker , y más.The @microsoft/mgt-components package contains all Microsoft Graph connected web components, such as Person, PeoplePicker, and more.

ProveedoresProviders

Los proveedores están disponibles a través de un único paquete y se pueden instalar según sea necesario.Providers are available via a single package and can be installed as needed. Están disponibles los siguientes paquetes de proveedor:The following provider packages are available:

@micosoft/MGT-msal-Provider@micosoft/mgt-msal-provider

@micosoft/mgt-msal-provider contiene el MsalProvider mgt-msal-provider componente y.@micosoft/mgt-msal-provider contains the MsalProvider and mgt-msal-provider component. El proveedor de msal aprovecha msal.js para la autenticación en aplicaciones web y PWA.The msal provider leverages msal.js for authenticating in web apps and PWAs.
@microsoft/MGT-Teams-Provider@microsoft/mgt-teams-provider

@microsoft/mgt-teams-provider contiene el TeamsProvider mgt-teams-provider componente y.@microsoft/mgt-teams-provider contains the TeamsProvider and mgt-teams-provider component. El proveedor de Microsoft Teams habilita la autenticación en la aplicación de pestañas de Microsoft Teams.The Microsoft Teams provider enables authentication in Microsoft Teams tab application.
@microsoft/MGT-SharePoint-Provider@microsoft/mgt-sharepoint-provider

@microsoft/mgt-sharepoint-provider contiene el SharePointProvider para la autenticación en un entorno de SharePoint.@microsoft/mgt-sharepoint-provider contains the SharePointProvider for authenticating in a SharePoint environment.
@microsoft/MGT-proxy-Provider@microsoft/mgt-proxy-provider

@microsoft/mgt-proxy-provider contiene la ProxyProvider aplicación para que el gráfico proxy llama a través de un servicio back-end.@microsoft/mgt-proxy-provider contains the ProxyProvider for application that proxy Graph calls through a backend service.

@microsoft/MGT@microsoft/mgt

El @microsoft/mgt es el paquete principal que incluye todos los paquetes anteriores y vuelve a exportarlos para que estén disponibles a través de un único paquete que puede instalar.The @microsoft/mgt is the main package that includes all above packages and re-exports them so they are available via a single package you can install.

@microsoft/MGT-reAct@microsoft/mgt-react

El @microsoft/mgt-react paquete contiene todos los componentes de reAct generados automáticamente y toma la dependencia del @microsoft/mgt paquete.The @microsoft/mgt-react package contains all auto-generated React components and takes dependency on the @microsoft/mgt package.

PolyfillsPolyfills

Si usa los módulos ES6 del paquete NPM y va a un explorador como IE11 que no es compatible con los componentes Web de forma nativa, deberá incluir los polyfill en el proyecto, ya que no se incluyen automáticamente.If you're using the ES6 modules from the npm package and you're targeting a browser such as IE11 that does not support web components natively, you will need to include polyfills in your project, as they are not automatically included. Los polyfill ayudan a rellenar las funcionalidades de explorador que faltan en exploradores que aún están en proceso de actualización para admitir estándares de componentes Web.Polyfills help to fill in missing browser capabilities in browsers that are still in the process of updating to support Web Component standards. Para obtener instrucciones y para obtener más información, consulte la documentación de polyfill.For instructions and to learn more, see polyfills documentation.

Los polyfill ya están incluidos si está usando el kit de herramientas a través del script de cargador de gestión.The polyfills are already included if you're using the Toolkit via the mgt-loader script.

Siguientes pasosNext Steps

Ya está listo para empezar a desarrollar con el kit de herramientas de Microsoft Graph.You're now ready to start developing with the Microsoft Graph Toolkit! Las guías siguientes están disponibles para ayudarle a empezar:The following guides are available to help you get started: