Uso del kit de herramientas de Microsoft Graph con React

Artículo
11/15/2023

Microsoft Graph Toolkit es un conjunto de componentes web que simplifican la conexión a Microsoft Graph y le permiten centrarse en la aplicación en su lugar. Microsoft Graph Toolkit está disponible como un conjunto genérico de componentes web distribuidos a través del @microsoft/mgt-components paquete npm.

Si va a crear aplicaciones con React, puede usar el @microsoft/mgt-react paquete, que encapsula los componentes web del Kit de herramientas de Microsoft Graph en React componentes y facilita el paso de datos complejos. Para usar los mgt-chat componentes y mgt-new-chat , instale el paquete independiente @microsoft/mgt-chat .

En este artículo se describe el proceso paso a paso del uso del kit de herramientas de Microsoft Graph para crear una aplicación React y conectarla a Microsoft 365. Después de completar los pasos, tendrá una aplicación React que muestra las próximas citas del usuario que ha iniciado sesión actualmente desde Microsoft 365.

Sugerencia

También puede seguir este tutorial como un paseo interactivo por el código. Para obtener más información, consulte el repositorio de GitHub con el proyecto de inicio.

Sugerencia

También puede descargar una plantilla de inicio para iniciar el recorrido. Esta plantilla garantizará el conjunto correcto de dependencias, etc. Para continuar, descargue el proyecto de inicio de GitHub para mgt-react. Siga las instrucciones léame y, a continuación, continúe con Carga de datos de Microsoft 365.

Sugerencia

También puede descargar una plantilla de inicio para iniciar el recorrido. Esta plantilla garantizará el conjunto correcto de dependencias, etc. Para continuar, descargue el proyecto de inicio de GitHub para mgt-react y mgt-chat. Siga las instrucciones léame y, a continuación, continúe con Carga de datos de Microsoft 365.

Requisitos previos

Para seguir los pasos de este artículo, necesita un entorno de desarrollo de Microsoft 365 y algunas herramientas. Para obtener más información, consulte Introducción.

Creación de una aplicación de React

Cree una nueva aplicación React mediante la ejecución del siguiente comando. Este comando crea una nueva aplicación React mediante TypeScript, lo que ayuda a escribir código más sólido y a evitar errores en tiempo de ejecución. Si se le pide que instale el create-react-app paquete, seleccione y para confirmarlo.

npx create-react-app my-m365-app --template typescript --use-npm

Cambie el directorio de trabajo a la aplicación recién creada.

cd my-m365-app

A continuación, instale los mgt-reactpaquetes , mgt-element y mgt-msal2-provider npm, que contienen los componentes de React del kit de herramientas de Microsoft Graph, las funcionalidades principales del kit de herramientas y el proveedor de autenticación MSAL2.

npm i @microsoft/mgt-react @microsoft/mgt-element @microsoft/mgt-msal2-provider

A continuación, instale los mgt-reactpaquetes , mgt-chatmgt-element y mgt-msal2-provider npm, que contienen los componentes de React del kit de herramientas de Microsoft Graph, las funcionalidades principales del kit de herramientas y el proveedor de autenticación MSAL2.

npm i @microsoft/mgt-react@next.mgt-chat @microsoft/mgt-chat@next.mgt-chat @microsoft/mgt-element@next.mgt-chat @microsoft/mgt-msal2-provider@next.mgt-chat

Confirme que puede ejecutar la aplicación.

npm start

Debería poder abrir la aplicación en el explorador a través de http://localhost:3000.

Creación de una aplicación de Microsoft Entra

Microsoft Graph, la API que usa para conectarse a Microsoft 365, está protegida con OAuth 2.0. Para conectar la aplicación a Microsoft 365, deberá crear una aplicación en Microsoft Entra ID y conceder a esta aplicación permiso para acceder a recursos específicos en nombre de la persona que usa la aplicación.

Siga los pasos del artículo Crear una aplicación Microsoft Entra para crear una nueva aplicación Microsoft Entra.

Conexión de React aplicación a Microsoft 365

Ahora que la aplicación está registrada con Microsoft Entra ID, puede conectar la aplicación React a Microsoft 365. En primer lugar, permitir que los usuarios inicien sesión en la aplicación con su cuenta Microsoft.

Copia del identificador de registro de la aplicación Microsoft Entra

En el Centro de administración Microsoft Entra, vaya al registro de la aplicación.
Compruebe que se encuentra en la página Información general .
En la sección Essentials, copie el valor de la propiedad Application (client) ID

Configuración del proveedor de autenticación de Microsoft Graph Toolkit

A continuación, configure el proveedor de autenticación que debe usar Microsoft Graph Toolkit. En este caso, usamos MSAL2, que es un buen valor predeterminado para compilar aplicaciones independientes. Si usa cualquiera de los puntos de extensibilidad de Microsoft 365, como Teams o SharePoint, use otros proveedores.

En el editor de código, abra el archivo src/index.tsx y, en la lista de importaciones, agregue:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Después de la última import instrucción, inicialice Microsoft Graph Toolkit con el proveedor MSAL.
```
Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID'
});
```

Reemplace el valor de la clientId propiedad por el valor de la Application (client) ID propiedad que copió anteriormente en la introducción al registro de la aplicación de Centro de administración Microsoft Entra.

Con estos cambios, el archivo src/index.tsx es similar al siguiente.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "REPLACE_WITH_CLIENTID",
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Agregue el componente Login Microsoft Graph Toolkit React para permitir que los usuarios inicien sesión con su cuenta Microsoft en la aplicación.

En el editor de código, abra el archivo src/App.tsx y, a la lista de importaciones, agregue:
```
import { Login } from '@microsoft/mgt-react';
```
En la App función , reemplace el contenido de la return cláusula por la estructura básica, incluido el componente Microsoft Graph Toolkit <Login /> :
```
<div className="app">
  <header>
    <Login />
  </header>
</div>
```

Con estos cambios, el archivo src/App.tsx tiene el siguiente aspecto.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Login } from '@microsoft/mgt-react';

function App() {
  return (
    <div className="app">
     <header>
       <Login />
     </header>
   </div>
  );
}

export default App;

Prueba del inicio de sesión en la aplicación

Ahora debería poder iniciar sesión en la aplicación con su cuenta Microsoft.

Volver al explorador donde se ejecuta la aplicación de React. Ahora debería ver un botón Iniciar sesión .
Al seleccionar el botón Iniciar sesión, se le pedirá que inicie sesión con su cuenta Microsoft (puede usar la misma cuenta con la que accedió a la Azure Portal).
La primera vez que use esta aplicación Microsoft Entra, debe dar su consentimiento para su uso en su organización.
Después de iniciar sesión, se le redirigirá a la aplicación de React. Observe que el botón Iniciar sesión ha cambiado para mostrar el nombre del usuario

Carga de datos desde Microsoft 365

Microsoft Graph Toolkit no solo simplifica la autenticación en Microsoft 365, sino que también carga sus datos. En este ejemplo, se muestra el calendario de la persona que ha iniciado sesión.

Especificar los permisos necesarios para la aplicación

Para poder cargar datos de Microsoft 365, debe especificar la lista de ámbitos de permisos que se deben conceder a la aplicación para acceder a los datos del usuario. Estos ámbitos varían en función del tipo de información que quiera mostrar. En este caso, necesita acceso al calendario de las personas y acceso básico a la información sobre las personas que también se muestra en el calendario. Puede encontrar los ámbitos necesarios para cada API en la documentación de Microsoft Graph API.

En el editor de código, abra el archivo src/index.tsx y actualice el código de inicialización del proveedor.

Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID',
  scopes: ['calendars.read', 'user.read', 'openid', 'profile', 'people.read', 'user.readbasic.all']
});

Mostrar los datos del calendario del usuario después de iniciar sesión

A continuación, extienda la aplicación para mostrar los datos del calendario del usuario. Solo puede acceder a esta información después de que el usuario haya iniciado sesión. Debe realizar un seguimiento del estado de inicio de sesión del usuario y mostrar los datos del calendario después de que el usuario haya iniciado sesión con su cuenta de Microsoft.

Debe realizar un seguimiento del estado de inicio de sesión del usuario para usar el useIsSignedIn enlace proporcionado por mgt-react.

Importe el useIsSignedIn enlace de mgt-react, agregándolo a las mgt-react importaciones.
```
import { Login, useIsSignedIn } from '@microsoft/mgt-react';
```
Use el enlace useIsSignedIn para habilitar el seguimiento del estado de inicio de sesión del usuario en la aplicación agregándolo en la función App :
```
  const [ isSignedIn ] = useIsSignedIn();
```

Este código define una constante booleana isSignedIn , que puede usar para determinar si el usuario ha iniciado sesión actualmente en la aplicación.

Carga del calendario del usuario si el usuario ha iniciado sesión

Ahora que realiza un seguimiento del estado de inicio de sesión del usuario en la aplicación, puede mostrar su calendario después de iniciar sesión.

En el editor de código, abra el archivo src/App.tsx y extienda la instrucción de componente import con el <Agenda /> componente.
```
import { useIsSignedIn, Agenda, Login } from '@microsoft/mgt-react';
```
Amplíe el contenido de la return cláusula con un componente adicional div y el componente Microsoft Graph Toolkit <Agenda /> que solo se representa si el usuario ha iniciado sesión.
```
<div className="row">
  <div className="column">
    {isSignedIn &&
      <Agenda />}
  </div>
</div>
```
En el editor de código, abra el archivo src/App.css y cambie todo el contenido del archivo con el código siguiente.
```
.row {
  display: flex;
  flex-flow: wrap;
}

.column {
  flex: 0 0 50%;
}
```

Con estos cambios, el archivo src/App.tsx debe tener un aspecto similar al siguiente.

import { useIsSignedIn, Agenda, Login } from '@microsoft/mgt-react';
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [isSignedIn] = useIsSignedIn();

  return (
    <div className="app">
      <header>
        <Login />
      </header>
      <div className="row">
        <div className="column">
          {isSignedIn &&
            <Agenda />}
        </div>
      </div>
    </div>
  );
}

export default App;

Mostrar la conversación de chat de un usuario

A continuación, extienda la aplicación para mostrar una conversación de las conversaciones 1:1 y de grupo del usuario. Solo puede acceder a esta información después de que el usuario haya iniciado sesión.

Actualización de los permisos necesarios para la aplicación

Al agregar los componentes de chat a la aplicación, debe actualizar la lista de ámbitos solicitados para incluir los permisos necesarios para acceder a los datos de chat. Puede encontrar los ámbitos necesarios para cada API en la documentación de Microsoft Graph API.

En el editor de código, abra el archivo src/index.tsx y actualice el código de inicialización del proveedor.

import { allChatScopes } from '@microsoft/mgt-chat';

Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID',
  scopes: ['calendars.read', 'user.read', 'openid', 'profile', 'people.read', 'user.readbasic.all', ...allChatScopes]
});

Carga de la conversación de chat de un usuario si el usuario ha iniciado sesión

En el editor de código, abra el archivo src/App.tsx y extienda la instrucción de componente import con el componente Chat y los tipos.

import { Chat, NewChat } from '@microsoft/mgt-chat';
import { Chat as GraphChat } from '@microsoft/microsoft-graph-types';
import React, { useState, useEffect, useCallback } from 'react';

A continuación, dentro de la función App , agregue el código necesario para controlar las interacciones del usuario con los componentes de chat.

const [chatId, setChatId] = useState<string>();

const [showNewChat, setShowNewChat] = useState<boolean>(false);
const onChatCreated = useCallback((chat: GraphChat) => {
  setChatId(chat.id);
  setShowNewChat(false);
}, []);

A continuación, amplíe el contenido de la return cláusula con un valor adicional div y el kit de herramientas <Chat /> y <NewChat /> los componentes de Microsoft Graph.

<div className="column">
  {isSignedIn && (
    <>
      <button onClick={() => setShowNewChat(true)}>New Chat</button>
      {showNewChat && (
        <NewChat
          onChatCreated={onChatCreated}
          onCancelClicked={() => setShowNewChat(false)}
          mode="auto"
        />
      )}

      {chatId && <Chat chatId={chatId} />}
    </>
  )}
</div>

Con estos cambios, el archivo src/App.tsx debe tener un aspecto similar al siguiente.

import { useIsSignedIn, Agenda, Login } from '@microsoft/mgt-react';
import { Chat, NewChat } from '@microsoft/mgt-chat';
import { Chat as GraphChat } from '@microsoft/microsoft-graph-types';
import React, { useState, useEffect, useCallback } from 'react';
import './App.css';

function App() {
  const [isSignedIn] = useIsSignedIn();
  const [chatId, setChatId] = useState<string>();

  const [showNewChat, setShowNewChat] = useState<boolean>(false);
  const onChatCreated = useCallback((chat: GraphChat) => {
    setChatId(chat.id);
    setShowNewChat(false);
  }, []);

  return (
    <div className="App">
      <header>
        <Login />
      </header>
      <div className="row">
        <div className="column">
          {isSignedIn &&
            <Agenda />}
        </div>
        <div className="column">
          {isSignedIn && (
            <>
              <button onClick={() => setShowNewChat(true)}>New Chat</button>
              {showNewChat && (
                <NewChat
                  onChatCreated={onChatCreated}
                  onCancelClicked={() => setShowNewChat(false)}
                  mode="auto"
                />
              )}

              {chatId && <Chat chatId={chatId} />}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default App;

Prueba que muestra el calendario y los chats de un usuario después de iniciar sesión

Con estos cambios, después de iniciar sesión en la aplicación con su cuenta Microsoft, debería ver el calendario.

Para ver los cambios, actualice el explorador en http://localhost:3000.
Elija el botón Iniciar sesión e inicie sesión con su cuenta Microsoft.
Después de dar su consentimiento al uso de la aplicación, debería ver información sobre el usuario actual y su calendario.

Para ver los cambios, actualice el explorador en http://localhost:3000.
Elija el botón Iniciar sesión e inicie sesión con su cuenta Microsoft.
Después de dar su consentimiento al uso de la aplicación, debería ver información sobre el usuario actual. También verá su calendario y la capacidad de crear un nuevo chat y empezar a interactuar con este usuario.

Pasos siguientes

Consulte lo que se encuentra en el Kit de herramientas de Microsoft Graph.
Pruebe los componentes del área de juegos.
Formule una pregunta en Stack Overflow.
Informe de errores o deje una solicitud de característica en GitHub.

Uso del kit de herramientas de Microsoft Graph con React

Requisitos previos

Creación de una aplicación de React

Creación de una aplicación de Microsoft Entra

Conexión de React aplicación a Microsoft 365

Copia del identificador de registro de la aplicación Microsoft Entra

Configuración del proveedor de autenticación de Microsoft Graph Toolkit

Prueba del inicio de sesión en la aplicación

Carga de datos desde Microsoft 365

Especificar los permisos necesarios para la aplicación

Mostrar los datos del calendario del usuario después de iniciar sesión

Carga del calendario del usuario si el usuario ha iniciado sesión

Mostrar la conversación de chat de un usuario

Actualización de los permisos necesarios para la aplicación

Carga de la conversación de chat de un usuario si el usuario ha iniciado sesión

Prueba que muestra el calendario y los chats de un usuario después de iniciar sesión

Pasos siguientes

Comentarios

Comentarios

Recursos adicionales

Uso del kit de herramientas de Microsoft Graph con React

Requisitos previos

Creación de una aplicación de React

Creación de una aplicación de Microsoft Entra

Conexión de React aplicación a Microsoft 365

Copia del identificador de registro de la aplicación Microsoft Entra

Configuración del proveedor de autenticación de Microsoft Graph Toolkit

Agregar el botón de inicio de sesión

Prueba del inicio de sesión en la aplicación

Carga de datos desde Microsoft 365

Especificar los permisos necesarios para la aplicación

Mostrar los datos del calendario del usuario después de iniciar sesión

Seguimiento del estado de inicio de sesión del usuario

Carga del calendario del usuario si el usuario ha iniciado sesión

Mostrar la conversación de chat de un usuario

Actualización de los permisos necesarios para la aplicación

Carga de la conversación de chat de un usuario si el usuario ha iniciado sesión

Prueba que muestra el calendario y los chats de un usuario después de iniciar sesión

Pasos siguientes

Comentarios

Comentarios

Recursos adicionales