Crear un elemento Web de SharePoint con el kit de herramientas de Microsoft GraphBuild a SharePoint web part with the Microsoft Graph Toolkit

En este tema se explica cómo usar los componentes del kit de herramientas de Microsoft Graph en un elemento Web del lado cliente de SharePoint.This topic covers how to use Microsoft Graph Toolkit components in a SharePoint client-side web part. Para empezar, es necesario seguir estos pasos:Getting started involves the following steps:

  1. Configurar el entorno de desarrollo y crear un elemento Web.Set up your development environment and create a web part.
  2. Actualice TypeScript en el proyecto.Update TypeScript in your project.
  3. Agregue el kit de herramientas de Microsoft Graph.Add the Microsoft Graph Toolkit.
  4. Agregue el proveedor de SharePoint.Add the SharePoint Provider.
  5. Agregar componentes.Add components.
  6. Configurar permisos.Configure permissions.
  7. Compile e implemente el elemento Web.Build and deploy your web part.
  8. Pruebe el elemento Web.Test your web part.

Configurar el entorno de desarrollo de SharePoint Framework y crear un nuevo elemento WebSet up your SharePoint Framework development environment and create a new web part

Siga los pasos para configurar el entorno de desarrollo de SharePoint Framework y, a continuación, cree un nuevo elemento Web.Follow the steps to Set up your SharePoint Framework development environment and then create a new web part.

Actualizar TypeScript en el proyectoUpdate TypeScript in your project

El kit de herramientas de Microsoft Graph requiere Typescript 3. x.The Microsoft Graph Toolkit requires Typescript 3.x. Antes de agregar el kit de herramientas a su proyecto, asegúrese de que está usando una versión compatible de Typescript.Before adding the Toolkit to your project, make sure you're using a supported version of Typescript. Por ejemplo, para agregar Typescript 3,7, use el siguiente comando:For example, to add Typescript 3.7, use the following command:

npm install @microsoft/rush-stack-compiler-3.7 --save-dev

A continuación, busque el tsconfig.json archivo en la carpeta del proyecto, abra el archivo y busque la siguiente línea:Then, locate the tsconfig.json file in your project folder, open the file, and look for this line:

"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",

Reemplace la línea por:Replace the line with:

"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",

Agregar el kit de herramientas de Microsoft GraphAdd the Microsoft Graph Toolkit

Instale el paquete NPM del kit de herramientas de Microsoft Graph y los polyfill con el siguiente comando:Install the Microsoft Graph Toolkit npm package and polyfills with the following command:

npm install @microsoft/mgt

Si tiene previsto admitir IE11 en sus elementos Web, deberá seguir pasos adicionales para garantizar la compatibilidad entre exploradores:If you plan to support IE11 in your web parts, you'll need to follow additional steps to ensure cross-browser compatibility:

  1. Instale los siguientes paquetes:Install the following packages:
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm install -D @webcomponents/webcomponentsjs regenerator-runtime core-js
  1. Agregue el siguiente código a la parte gulpfile.js superior build.initialize(gulp) :Add the following code to gulpfile.js, right above build.initialize(gulp):
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        test: /\.m?js$/, use:
        {
          loader: "babel-loader",
          options:
          {
            presets: [["@babel/preset-env",
              {
                targets: {
                  "ie": "11"
                }
              }]]
          }
        }
      }
    );

    return generatedConfiguration;
  }
});
  1. En el src\webparts\<your-project>\<your-web-part>.ts archivo, importe los siguientes polyfill antes que el proveedor de SharePoint en el siguiente paso.In your src\webparts\<your-project>\<your-web-part>.ts file, import the following polyfills before the SharePoint provider in the next step.
import 'regenerator-runtime/runtime';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';

Agregar el proveedor de SharePointAdd the SharePoint 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. Los elementos Web de SharePoint siempre existen en un contexto autenticado porque el usuario ya tuvo que iniciar sesión para llegar a la página que hospeda el elemento Web.SharePoint web parts always exist in an authenticated context because the user has already had to sign in in order to get to the page that hosts your web part. Use este contexto para inicializar el proveedor de SharePoint.Use this context to initialize the SharePoint provider.

En primer lugar, agregue el proveedor a su elemento Web.First, add the provider to your web part. Busque el src\webparts\<your-project>\<your-web-part>.ts archivo en la carpeta del proyecto y agregue la siguiente línea al principio del archivo, justo debajo de las instrucciones existentes import :Locate the src\webparts\<your-project>\<your-web-part>.ts file in your project folder, and add the following line to the top of your file, right below the existing import statements:

import { Providers, SharePointProvider } from '@microsoft/mgt';

A continuación, debe inicializar el proveedor con el contexto autenticado dentro del onInit() método de su elemento Web.Next, you need to initialize the provider with the authenticated context inside the onInit() method of your web part. En el mismo archivo, agregue el siguiente código justo antes de la public render(): void { línea:In the same file, add the following code right before the public render(): void { line:

protected async onInit() {
    Providers.globalProvider = new SharePointProvider(this.context)
}

Agregar componentesAdd components

Ahora, puede empezar a agregar componentes a su elemento Web.Now, you can start adding components to your web part. Simplemente agregue los componentes al HTML dentro del render() método y los componentes usarán el contexto de SharePoint para tener acceso a Microsoft Graph.Simply add the components to the HTML inside of the render() method, and the components will use the SharePoint context to access Microsoft Graph. Por ejemplo, para agregar el componente Person, el código tendrá el siguiente aspecto:For example, to add the Person component, your code will look like:

public render(): void {
    this.domElement.innerHTML = `
      <mgt-person person-query="me" view="twolines"><mgt-person>
    `;
}

Configurar permisosConfigure permissions

Para llamar a Microsoft Graph desde la aplicación de SharePoint Framework, debe solicitar los permisos necesarios en el paquete de solución y un administrador de inquilinos de Microsoft 365 debe aprobar los permisos solicitados.To call Microsoft Graph from your SharePoint Framework application, you need to request the needed permissions in your solution package and a Microsoft 365 tenant administrator needs to approve the requested permissions.

Para agregar los permisos a su paquete de solución, busque y abra el config\package-solution.json archivo y establezca:To add the permissions to your solution package, locate and open the config\package-solution.json file and set:

"isDomainIsolated": false,

Justo debajo de esa línea, agregue lo siguiente:Just below that line, add the following:

"webApiPermissionRequests":[],

Determine qué permisos de la API de Microsoft Graph necesita en función de los componentes que esté usando.Determine which Microsoft Graph API permissions you need depending on the components you're using. La página de documentación de cada componente proporciona una lista de los permisos que requiere el componente.Each component's documentation page provides a list of the permissions that component requires. Tendrá que agregar cada permiso necesario a webApiPermissionRequests .You will need to add each permission required to webApiPermissionRequests. Por ejemplo, si está usando el componente de persona y el componente de agenda, webApiPermissionRequests puede tener el aspecto siguiente:For example, if you're using the Person component and the Agenda component, your webApiPermissionRequests might look like:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Compilar e implementar el elemento WebBuild and deploy your web part

Ahora, creará la aplicación y la implementará en SharePoint.Now, you will build your application and deploy it to SharePoint. Ejecute los siguientes comandos para compilar la aplicación:Build your application by running the following commands:

gulp build
gulp bundle
gulp package-solution

En la sharepoint/solution carpeta, habrá un .sppkg archivo nuevo.In the sharepoint/solution folder, there will be a new .sppkg file. Tendrá que cargar este archivo en el catálogo de aplicaciones de SharePoint Online.You will need to upload this file to your SharePoint Online App Catalog. Vaya a la página más características del centro de administración de SharePoint.Go to the More features page of your SharePoint admin center. Seleccione abrir en aplicaciones y, a continuación, haga clic en Catálogo de aplicaciones y distribuir aplicaciones para SharePoint.Select Open under Apps, then click App Catalog, and Distribute apps for SharePoint. Cargue el .sppkg archivo y haga clic en implementar.Upload your .sppkg file, and click Deploy.

A continuación, debe aprobar los permisos como administrador.Next, you need to approve the permissions as an administrator.

Vaya a su centro de administración de SharePoint.Go to your SharePoint Admin center. En el panel de navegación izquierdo, seleccione avanzadas y, a continuación, acceso a la API.In the left-hand navigation, select Advanced and then API Access. Debería ver las solicitudes pendientes para cada uno de los permisos que agregó en el config\package-solution.json archivo.You should see pending requests for each of the permissions you added in your config\package-solution.json file. Seleccione y apruebe cada permiso.Select and approve each permission.

Probar el elemento WebTest your web part

Ya está listo para agregar el elemento Web a una página de SharePoint y a probarlo. Deberá usar el área de trabajo hospedada para probar los elementos Web que usan el kit de herramientas de Microsoft Graph, ya que los componentes necesitan el contexto autenticado para llamar a Microsoft Graph.You're now ready to add your web part to a SharePoint page and test it out. You will need to use the hosted workbench to test web parts that use the Microsoft Graph Toolkit because the components need the authenticated context in order to call Microsoft Graph. Puede encontrar su área de trabajo hospedada en https://<YOUR_TENANT>. SharePoint.com/_layouts/15/Workbench.aspx.You can find your hosted workbench at https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx.

Abra el config\serve.json archivo en el proyecto y reemplace el valor de initialPage por la dirección URL de su área de trabajo hospedada:Open the config\serve.json file in your project and replace the value of initialPage with the url for your hosted workbench:

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

Guarde el archivo y, a continuación, ejecute el siguiente comando en la consola para compilar y obtener una vista previa del elemento Web:Save the file and then run the following command in the console to build and preview your web part:

gulp serve

El área de trabajo hospedada se abrirá automáticamente en el explorador.Your hosted workbench will automatically open in your browser. Agregue el elemento Web a la página y verá su elemento Web con los componentes del kit de herramientas de Microsoft Graph en acción.Add your web part to the page and you should see your web part with the Microsoft Graph Toolkit components in action! Siempre que el comando Gulp Serve todavía se esté ejecutando en la consola, puede seguir realizando ediciones en el código y, a continuación, actualizando el explorador para ver los cambios.As long as the gulp serve command is still running in your console, you can continue to make edits to your code and then just refresh your browser to see your changes.

Siguientes pasosNext Steps