Creación de una aplicación web con el kit de herramientas de Microsoft GraphBuild a web application with the Microsoft Graph Toolkit

En este tema se describe cómo empezar a trabajar con el kit de herramientas de Microsoft Graph en una aplicación web escrita en JavaScript vainilla.This topic describes how to get started with the Microsoft Graph Toolkit in a web application written in vanilla JavaScript. Si desea obtener información sobre cómo usar el kit de herramientas con un marco Web, vea compilar una aplicación web (reAct) o crear una aplicación web (angular).If you would like to learn how to use the Toolkit with a web framework, see Build a web app (React) or Build a web app (Angular).

Empezar a trabajar con el kit de herramientas de Microsoft Graph implica los pasos siguientes:Getting started with the Microsoft Graph Toolkit involves the following steps:

  1. Agregue el kit de herramientas de Microsoft Graph a su proyecto.Add Microsoft Graph Toolkit to your project.
  2. Inicialice el proveedor de MSAL.Initialize the MSAL Provider.
  3. Agregar componentes.Add components.
  4. Pruebe la aplicación.Test your application.

Agregar el kit de herramientas de Microsoft Graph a su proyectoAdd the Microsoft Graph Toolkit to your project

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.

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>

Nota: Si el destino es un explorador como IE11 que no es compatible con los componentes Web de forma nativa, es posible que tenga que incluir polyfill.Note: If you're targeting a browser such as IE11 that does not support web components natively, you might need to include polyfills.

Inicializar el proveedor de MSALInitialize the MSAL Provider

Los proveedores del kit de herramientas de Microsoft Graph permiten la autenticación y el acceso a Microsoft Graph para los componentes.The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. Para obtener más información, consulte Using the Providers.To learn more, see Using the providers. El proveedor de MSAL usa MSAL.js para iniciar sesión en los usuarios y adquirir tokens.The MSAL Provider uses MSAL.js to sign in users and acquire tokens. Puede inicializar el proveedor de MSAL en el HTML o JavaScript.You can initialize the MSAL provider in your HTML or JavaScript.

Si desea usar su propia autenticación back-end, use el proveedor de proxy en vez del proveedor de MSAL.If you would like to use your own backend authentication, use the Proxy Provider in place of the MSAL provider.

Puede elegir inicializar el proveedor en el código HTML o JavaScript.You can choose to initialize the provider in either your HTML or your JavaScript code.

Agregue el mgt-msal-provider componente a la página HTML y establezca el valor client-id para el identificador de cliente de la aplicación.Add the mgt-msal-provider component to your HTML page and set the client-id to your application client-id.

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

El identificador de cliente es la única propiedad necesaria para inicializar el proveedor, pero puede establecer opciones adicionales.The client ID is the only property required to initialize the provider, but you can set additional options. Para obtener la lista completa, consulte proveedor de msal.For the full list, see Msal Provider.

Creación de un identificador de aplicación/clienteCreating an app/client ID

Para obtener un identificador de cliente, debe registrar la aplicación en Azure ad.In order to get a client ID, you need to register your application in Azure AD.

Nota: MSAL solo admite el flujo implícito de OAuth.Note: MSAL only supports the Implicit Flow for OAuth. Asegúrese de habilitar el flujo implícito en la aplicación en Azure portal (esta opción no está habilitada de forma predeterminada).Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). En autenticación, busque la sección concesión implícita y active las casillas de verificación de tokens de acceso y tokens de identificador.Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

Agregar componentesAdd components

Después de inicializar el proveedor de MSAL, puede empezar a usar cualquiera de los componentes del kit de herramientas.After you initialize the MSAL provider, you can start using any of the Toolkit components.

A continuación, se encuentra un ejemplo de trabajo completo que usa Man-Loader, el proveedor de MSAL inicializado en HTML y el componente de inicio de sesión:The following is a full working example using mgt-loader, the MSAL Provider initialized in HTML, and the Login component:

<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>

Este es un ejemplo de uso de los módulos de ES6, el proveedor de MSAL inicializado en HTML y el componente de inicio de sesión:This is an example using the ES6 modules, the MSAL Provider initialized in HTML, and the Login component:

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

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

<mgt-login></mgt-login>

Probar la aplicaciónTest your app

Para probar la aplicación, MSAL requiere que la página se hospede en un servidor web para las redirecciones de autenticación.In order to test your app, MSAL requires the page to be hosted in a web server for the authentication redirects.

Si solo está familiarizado y desea jugar, puede usar Live Server en Visual Studio Code o cualquier servidor de desarrollo ligero similar.If you're just getting started and want to play around, you can use Live Server in Visual Studio Code or any similar lightweight development server. Descargue la extensión y abra el archivo HTML con Live Server.Download the extension and open your HTML file using live server.

Nota: Asegúrese de que el URI de redireccionamiento en el registro de la aplicación esté establecido en el puerto localhost en el que se hospeda la aplicación.Note: Make sure the redirect URI in your app registration is set to the localhost port your application is hosted on. Vaya al registro de la aplicación en Azure portal, haga clic en autenticación en administrar y agregue el URI de redireccionamiento correcto.Go to your app registration in the Azure portal, click Authentication under manage, and add the correct redirect URI.

Siguientes pasosNext Steps