Kit de herramientas de Microsoft Graph: componentes Web con tecnología de Microsoft GraphMicrosoft Graph Toolkit: Web Components powered by Microsoft Graph

El kit de herramientas de Microsoft Graph es una colección de componentes Web y ayudantes reutilizables y agnósticos del marco de trabajo para obtener acceso y trabajar con Microsoft Graph.The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components and helpers for accessing and working with Microsoft Graph. Los componentes son totalmente funcionales desde el momento sin salir del cuadro, con proveedores integrados que se autentican y se recuperan datos de Microsoft Graph.The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.

El kit de herramientas de Microsoft Graph facilita el uso de Microsoft Graph en la aplicación.The Microsoft Graph Toolkit makes it easy to use Microsoft Graph in your application. En el ejemplo siguiente, vea cómo se muestra un usuario que ha iniciado sesión y sus eventos de calendario con tan solo dos líneas de código usando los componentes de Inicio de sesión y agenda .In the example below, see how a signed in user and their calendar events are displayed with just two lines of code by using the Login and Agenda components.

Abra este ejemplo en manits. devOpen this example in mgt.dev

¿Qué hay en el kit de herramientas de Microsoft Graph?What's in the Microsoft Graph Toolkit?

ComponentesComponents

El kit de herramientas de Microsoft Graph incluye una colección de componentes Web para las experiencias más comunes basadas en las API de Microsoft Graph.The Microsoft Graph Toolkit includes a collection of web components for the most commonly built experiences powered by Microsoft Graph APIs.

ComponenteComponent DescriptionDescription
Inicio de sesiónLogin Un botón y un control de flotante para autenticar a un usuario con la plataforma de identidad de Microsoft y mostrar la información de perfil del usuario en el inicio de sesión.A button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user's profile information on sign in.
ContactoPerson Muestra una persona o un contacto por su foto, nombre o dirección de correo electrónico.Displays a person or contact by their photo, name, and/or email address.
PersonasPeople Muestra un grupo de personas o contactos por sus fotos o iniciales.Displays a group of people or contacts by their photos or initials.
AgendaAgenda Muestra los eventos en el calendario de un usuario o grupo.Displays events in a user or group's calendar.
TareasTasks Muestra y habilita la adición, eliminación, finalización o edición de tareas de Microsoft Planner o Microsoft.Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To-Do.
Selector de personasPeople picker Proporciona la capacidad de buscar personas y representa la lista de resultados.Provides the ability to search for people and renders the list of results.
Tarjeta de personaPerson card Control flotante usado en el componente person para mostrar más información de perfil sobre un usuario.A flyout used on the person component to display more profile information about a user.
ObtenerGet Realice una consulta GET a cualquier API de Microsoft Graph directamente en el HTML.Make a GET query to any Microsoft Graph API directly in your HTML.
Selector de canalChannel picker Permite buscar canales de Microsoft Teams para seleccionar un canal de una lista de resultados representada.Provides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results.

ProveedoresProviders

Los componentes funcionan mejor cuando se usan con un proveedor.The components work best when used with a provider. Los proveedores habilitan la autenticación y proporcionan la implementación para adquirir los tokens de acceso para llamar a las API de Microsoft Graph.Providers enable authentication and provide the implementation for acquiring the access tokens for calling the Microsoft Graph APIs.

ProveedoresProviders DescriptionDescription
MsalMsal Usa MSAL.js para iniciar sesión en los usuarios y adquirir tokens para usar con Microsoft Graph.Uses MSAL.js to sign in users and acquire tokens to use with Microsoft Graph.
SharePointSharePoint Autentica y proporciona acceso de Microsoft Graph a los componentes dentro de elementos Web de SharePoint.Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts.
TeamsTeams Autentica y proporciona acceso a Microsoft Graph a los componentes dentro de las pestañas de Microsoft Teams.Authenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs.
ProxyProxy Permite el uso de la autenticación de back-end mediante el enrutamiento de todas las llamadas a Microsoft Graph a través del back-end.Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend.
PersonalizadosCustom Cree un proveedor personalizado para habilitar la autenticación y el acceso a Microsoft Graph con el código de autenticación existente de la aplicación.Create a custom provider to enable authentication and access to Microsoft Graph with your application's existing authentication code.

¿Por qué usar el kit de herramientas de Microsoft Graph?Why use the Microsoft Graph Toolkit?

El kit de herramientas de Microsoft Graph hace que la integración de experiencias comunes de Microsoft Graph en su propia aplicación sea rápida y sencilla.The Microsoft Graph Toolkit makes integrating common experiences powered by Microsoft Graph into your own application quick and easy.

Reducir el tiempo de desarrolloCut Development Time

El trabajo para conectarse a las API de Microsoft Graph y representar los datos en una interfaz de usuario que parece y se siente como una experiencia Microsoft365 se lleva a cabo, sin ninguna personalización necesaria.The work to connect to Microsoft Graph APIs and render the data in a UI that looks and feels like a Microsoft365 experience is done for you, with no customization required.

Funciona en todas partesWorks Everywhere

Todos los componentes se basan en estándares web y funcionan sin problemas con cualquier explorador moderno y marco web (reAct, angular, Vue, etc.).All components are based on web standards and work seamlessly with any modern browser and web framework (React, Angular, Vue, etc.).

Bonito pero flexibleBeautiful but Flexible

Los componentes están diseñados para la apariencia de las experiencias de Microsoft365, pero también se pueden personalizar con plantillas y plantillas personalizadas de CSS .The components are designed to look and feel like Microsoft365 experiences, but are also customizable using CSS custom properties and templating.

¿Quién debe usarlo?Who should use it?

El kit de herramientas de Microsoft Graph es ideal para los desarrolladores de todos los niveles de experiencia que buscan desarrollar una aplicación Web, la pestaña de Microsoft Teams o un elemento Web de SharePoint que se conecta a datos y accede a ellos desde Microsoft Graph.The Microsoft Graph Toolkit is great for developers of all experience levels looking to develop a web application, Microsoft Teams tab, or SharePoint web part that connects to and accesses data from Microsoft Graph.

¿Dónde puedo usarlo?Where can I use it?

El kit de herramientas de Microsoft Graph se admite en los siguientes exploradores.The Microsoft Graph Toolkit is supported in the following browsers.

Microsoft Edge Internet Explorer 11 Firefox Chrome Safari Opera Samsung Internet
Microsoft EdgeEdge IE 11IE 11 FirefoxFirefox ChromeChrome SafariSafari OperaOpera SamsungSamsung

Pasos siguientesNext steps

  • Pruebe los componentes en la animación.Try out the components in the playground.
  • Empiece a trabajar con el kit de herramientas de Microsoft Graph.Get started with the Microsoft Graph Toolkit.
  • Consulte el kit de herramientas de Microsoft Graph en GitHub.Check out the Microsoft Graph Toolkit on GitHub.