La biblioteca cliente de JavaScript de Microsoft Graph es un envase reducido en torno a la API de Microsoft Graph que puede usarse en el lado del servidor y en el explorador.

¿Busca IntelliSense en los modelos (usuarios, grupos, etc.)? Vea el repositorio de tipos de Microsoft Graph.

npm install @microsoft/microsoft-graph-client

importe @microsoft/microsoft-graph-client en el módulo y también necesitará polyfills para capturar como isomorphic-fetch.

import "isomorphic-fetch";
import { Client } from "@microsoft/microsoft-graph-client";

Incluya graph-js-sdk.js en la página HTML.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>

En caso de que el explorador no sea compatible con Fetch [support] o Promise [support], deberá usar polyfills como github/fetch para fetch y es6-promise para promise.

<!-- polyfilling promise -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>

<!-- polyfilling fetch -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/whatwg-fetch/dist/fetch.umd.min.js"></script>

<!-- depending on your browser you might wanna include babel polyfill -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js"></script>

Registre su aplicación para usar la API de Microsoft Graph con uno de los siguientes portales de autenticación compatibles:

• Portal de registro de aplicaciones de Microsoft: Registre una nueva aplicación que funcione con cuentas de Microsoft y/o cuentas de la organización con el punto de conexión de autenticación V2 unificado.
• Microsoft Azure Active Directory: Registre una nueva aplicación en el espacio empresarial de Active Directory para dar soporte a los usuarios de cuentas profesionales o educativas de su espacio empresarial, o a varios espacios empresariales.

La biblioteca cliente de JavaScript de Microsoft Graph tiene una implementación de adaptador (ImplicitMSALAuthenticationProvider) para MSAL (biblioteca de autenticación de Microsoft) que se ocupa de recibir el accessToken. La biblioteca MSAL no se incluye con esta biblioteca, el usuario debe incluirla de forma externa (para incluir MSAL, consulte esto).

Nota importante: MSAL solo es compatible con las aplicaciones front-end, para la autenticación en el servidor tiene que implementar su propio AuthenticationProvider. Obtenga información acerca de cómo puede crear un proveedor de autenticación personalizado.

Consulte devDependencies en package.json para ver la versión compatible de msal y actualícela a continuación.

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/<version>/js/msal.min.js"></script>

// Configuration options for MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL.js-1.0.0-api-release#configuration-options
const msalConfig = {
	auth: {
		clientId: "your_client_id", // Client Id of the registered application
		redirectUri: "your_redirect_uri",
	},
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes

// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
const msalApplication = new Msal.UserAgentApplication(msalConfig);
const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new MicrosoftGraph.ImplicitMSALAuthenticationProvider(msalApplication, options);

Consulte devDependencies en package.json para ver la versión compatible de msal y actualícela a continuación.

npm install msal@<version>

import { UserAgentApplication } from "msal";

import { ImplicitMSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/ImplicitMSALAuthenticationProvider";

// An Optional options for initializing the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options
const msalConfig = {
	auth: {
		clientId: "your_client_id", // Client Id of the registered application
		redirectUri: "your_redirect_uri",
	},
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes

// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
const msalApplication = new UserAgentApplication(msalConfig);
const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new ImplicitMSALAuthenticationProvider(msalApplication, options);

El usuario puede integrar la biblioteca de autenticación preferida mediante la implementación de IAuthenticationProvider interfaz. Consulte la implementación de un proveedor de autenticación personalizada.

Una instancia de la clase cliente controla las solicitudes a la API de Microsoft Graph y procesa las respuestas. Para crear una nueva instancia de esta clase, tiene que proporcionar una instancia de IAuthenticationProvider que necesita pasarse como un valor para la clave authProvider en ClientOptions a un método de inicializador estático Client.initWithMiddleware.

const options = {
	authProvider, // An instance created from previous step
};
const Client = MicrosoftGraph.Client;
const client = Client.initWithMiddleware(options);

import { Client } from "@microsoft/microsoft-graph-client";

const options = {
	authProvider, // An instance created from previous step
};
const client = Client.initWithMiddleware(options);

Para obtener más información sobre cómo inicializar el cliente, consulte este documento.

Una vez que haya configurado la autenticación y una instancia del cliente, puede empezar a realizar llamadas al servicio. Todas las solicitudes deberían empezar con client.api(path) y terminar con una acción.

Obtención de detalles de usuario

try {
	let userDetails = await client.api("/me").get();
	console.log(userDetails);
} catch (error) {
	throw error;
}

Enviar un correo electrónico a los destinatarios

// Construct email object
const mail = {
	subject: "Microsoft Graph JavaScript Sample",
	toRecipients: [
		{
			emailAddress: {
				address: "[email protected]",
			},
		},
	],
	body: {
		content: "<h1>MicrosoftGraph JavaScript Sample</h1>Check out https://github.com/microsoftgraph/msgraph-sdk-javascript",
		contentType: "html",
	},
};
try {
	let response = await client.api("/me/sendMail").post({ message: mail });
	console.log(response);
} catch (error) {
	throw error;
}

Para obtener más información, consulte: Patrón de llamada, acciones, parámetros de consulta, métodos de la API y más.

• Procesamiento por lotes
• Tarea de carga de archivos de gran tamaño
• Iterador de páginas
• Acciones
• Parámetros de consulta
• Otras API
• Obtener respuesta sin procesar

Nos encantaría recibir sus comentarios sobre la biblioteca cliente de JavaScript de Microsoft Graph. Puede enviarnos sus preguntas y sugerencias a través de la sección Problemas de este repositorio.

Vea la directrices de contribución.

• Sitio web de Microsoft Graph
• Tipos de TypeScript de Microsoft Graph
• Crear aplicaciones de página única en Angular con Microsoft Graph
• Crear aplicaciones Node.js Express con Microsoft Graph
• Centro para desarrolladores de Office

Consulte avisos de terceros para obtener información sobre los paquetes que se incluyen en package.json

Si encuentra un problema de seguridad con nuestras bibliotecas o servicios, informe a [email protected] con todos los detalles posibles. Es posible que el envío pueda optar a una recompensa a través del programa Microsoft Bounty. No publique problemas de seguridad en problemas de GitHub ni ningún otro sitio público. Nos pondremos en contacto con usted rápidamente tras recibir la información. Le animamos a que obtenga notificaciones de los incidentes de seguridad que se produzcan; para ello, visite esta página y suscríbase a las alertas de avisos de seguridad.

Copyright (c) Microsoft Corporation. Todos los derechos reservados. Publicado bajo la licencia MIT (la "Licencia").

Este proyecto ha adoptado el Código de conducta de código abierto de Microsoft. Para obtener más información, vea Preguntas frecuentes sobre el código de conducta o póngase en contacto con [email protected] si tiene otras preguntas o comentarios.