Introducción al Kit de herramientas de Microsoft Graph

Artículo
04/17/2024

El Kit de herramientas de Microsoft Graph es una colección de componentes y proveedores de autenticación independientes y reutilizables que sirven para acceder y trabajar con Microsoft Graph. Los componentes son totalmente funcionales desde el principio, con proveedores integrados que se autentican y capturan datos con el uso de Microsoft Graph.

El Kit de herramientas de Microsoft Graph facilita el uso de Microsoft Graph en su aplicación. En el ejemplo siguiente, un usuario que ha iniciado sesión y sus eventos de calendario se muestran con solo dos líneas de código mediante los componentes Login y Agenda .

HTML
React

Abra este ejemplo en mgt.dev.

¿Por qué usar Microsoft Graph Toolkit?

Microsoft Graph Toolkit le permite integrar rápida y fácilmente experiencias comunes con tecnología de Microsoft Graph en su propia aplicación. El kit de herramientas:

Reduce el tiempo de desarrollo. El trabajo para conectarse a las API de Microsoft Graph y representar los datos en una interfaz de usuario que se ve y se siente como una experiencia de Microsoft 365 se realiza por usted, sin que sea necesario personalizarlos.
Funciona en todas partes. Todos los componentes se basan en estándares web y funcionan sin problemas con cualquier marco web y explorador moderno (como React, Angular o Vue).
Es hermoso pero flexible. Los componentes están diseñados para parecerse a las experiencias de Microsoft 365, pero también se pueden personalizar mediante el uso de propiedades personalizadas css y plantillas.

¿Quién debe usarlo?

Microsoft Graph Toolkit es ideal para desarrolladores de todos los niveles de experiencia que desean desarrollar una aplicación que se conecte a los datos de Microsoft Graph y acceda a ellos, como:

Aplicación web
Pestaña Microsoft Teams
Aplicación web progresiva (PWA)
Aplicación electron
Elemento web de SharePoint

¿Qué hay en Microsoft Graph Toolkit?

Componentes

Microsoft Graph Toolkit incluye una colección de componentes web para las experiencias más comunes creadas con tecnología de las API de Microsoft Graph.

Los componentes también están disponibles como componentes React.

Componente	Descripción
Agenda	Muestra eventos en el calendario de un usuario o grupo.
Chat (versión preliminar)	Muestra una conversación 1:1 o grupal de Microsoft Teams
Archivo	Representa un archivo o carpeta con un icono, un nombre de archivo, un autor y mucho más.
Lista de archivos	Muestra una lista de varios archivos o carpetas.
Get	Permite realizar una consulta GET a cualquier Graph API de Microsoft directamente en el HTML.
Inicio de sesión	Un botón y un control flotante para autenticar a un usuario con la plataforma Microsoft Identity y mostrar la información de perfil del usuario cuando inicia sesión.
Nuevo chat (versión preliminar)	Formulario para crear una nueva conversación 1:1 o grupal en Microsoft Teams
Personas	Muestra un grupo de personas o contactos por sus fotos o iniciales.
selector de Personas	Búsqueda para personas y representa la lista de resultados.
Contacto	Muestra una persona o contacto por su foto, nombre o dirección de correo electrónico.
Tarjeta para personas	Control flotante que se usa en el componente de persona para mostrar más información de perfil sobre un usuario.
Selector	Representa un control desplegable que permite seleccionar un único recurso de una matriz de recursos.
Tareas de Planner	Muestra y permite agregar, quitar, completar o editar tareas de Microsoft Planner o Microsoft To Do.
Cuadro de búsqueda	Búsqueda para que los canales de Microsoft Teams seleccionen un canal de una lista de resultados representada.
Resultados de la búsqueda	Permite realizar una consulta al punto de conexión de búsqueda de Microsoft Graph directamente en el HTML.
Selector de taxonomía	Use el componente selector de taxonomía para consultar la Graph API de Microsoft para taxonomía y representar un control desplegable con términos.
Selector de canales de Teams	Búsqueda para que los canales de Microsoft Teams seleccionen un canal de una lista de resultados representada.
To Do	Muestra y permite agregar, quitar, completar o editar tareas de Microsoft To Do.

Proveedores

Los proveedores habilitan la autenticación, proporcionan la implementación para adquirir tokens de acceso en varias plataformas y exponen un cliente de Microsoft Graph para llamar a las API de Microsoft Graph. Los componentes funcionan mejor cuando se usan con un proveedor, pero los proveedores se pueden usar por sí mismos.

Proveedores	Descripción
Personalizados	Crea un proveedor personalizado para habilitar la autenticación y el acceso a Microsoft Graph mediante el código de autenticación existente de la aplicación.
Electrón	Autentica y proporciona acceso de Microsoft Graph a los componentes dentro de las aplicaciones de Electron.
MSAL2	Usa msal-browser para iniciar sesión de usuarios y adquirir tokens para usarlos con Microsoft Graph.
Proxy	Permite el uso de la autenticación de back-end enrutando todas las llamadas a Microsoft Graph a través del back-end.
SharePoint	Autentica y proporciona acceso de Microsoft Graph a los componentes dentro de elementos web de SharePoint.
TeamsFx	Use el proveedor TeamsFx dentro de las aplicaciones de Microsoft Teams para proporcionar a los componentes del kit de herramientas de Microsoft Graph acceso a Microsoft Graph.