Usar microsoft Graph Toolkit con electrones

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

Crear una aplicación de Electron

Crea una nueva aplicación de Electron clonando el repositorio de electrones-quick-start-typescript. Esto creará una nueva aplicación Electron con TypeScript, que te ayudará a escribir código más sólido y evitar errores en tiempo de ejecución.

git clone https://github.com/electron/electron-quick-start-typescript

Cambie el directorio de trabajo a la aplicación recién creada e instale todas las dependencias.

cd electron-quick-start-typescript
npm install

Instale el paquete "@microsoft/mgt-components" que contiene todos los componentes web conectados Graph Microsoft.

npm i @microsoft/mgt-components

Instale los @microsoft/mgt-electron-provider @microsoft/mgt-element paquetes y npm también. Esto te permitirá proporcionar autenticación para la aplicación mediante MSAL y usar los componentes Graph Toolkit Microsoft.

npm i @microsoft/mgt-element @microsoft/mgt-electron-provider

Confirma que puedes ejecutar la aplicación.

npm start

Crear un identificador de aplicación o cliente

Agregar nuevo registro de aplicación en Azure AD para obtener un identificador de cliente

Para crear una aplicación en Azure Active Directory (Azure AD), debe agregar un nuevo registro de aplicación y, a continuación, configurar un uri de redireccionamiento y un nombre de aplicación.

Para crear la aplicación en Azure AD:

  1. Vaya a Azure Portal.
  2. En el menú, seleccione Azure Active Directory.
  3. En el Azure Active Directory, seleccione Registros de aplicaciones.
  4. En el menú superior, seleccione el botón Nuevo registro.
  5. Escribe el nombre de la aplicación; por ejemplo, My Electron-App .
  6. Para el tipo de cuentas admitidas, seleccione Cuentas en cualquier directorio de la organización (cualquier directorio de Azure AD - Multitenant) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox).
  7. En el campo URI de redireccionamiento, en la lista desplegable, seleccione Cliente público/nativo (escritorio & móvil) y, en el campo Dirección URL, escriba msal://redirect .
  8. Para confirmar los cambios, seleccione el botón Registrar.
  9. Vaya al registro de la aplicación.
  10. Compruebe que está en la página Información general.
  11. En la sección Essentials, copie el valor de la propiedad Id. de aplicación (cliente).

Configurar el proveedor de autenticación Graph Toolkit Microsoft

Inicializar ElectronProvider en el proceso de representador

El es responsable de comunicarse con (en el proceso principal) para solicitar tokens de acceso y recibir información sobre el estado de sesión que es necesario para que funcionen los ElectronProvider ElectronAuthenticator componentes de mgt.

Para inicializar ElectronProvider , agregue el siguiente código al archivo src/renderer.ts.

import {Providers} from '@microsoft/mgt-element';
import {ElectronProvider} from '@microsoft/mgt-electron-provider/dist/Provider';
// import the mgt components so we can use them in our html
import '@microsoft/mgt-components';

// initialize the auth provider globally
Providers.globalProvider = new ElectronProvider();

Inicializar ElectronAuthenticator en el proceso principal

El es responsable de configurar las variables de configuración para la autenticación MSAL, adquirir tokens de acceso ElectronAuthenticator y comunicarse con el archivo ElectronProvider . Inicialice ElectronAuthenticator el en el proceso principal y configure las variables de configuración, como el identificador de cliente y los ámbitos necesarios.

En primer lugar, abra src/main.ts e importe ElectronAuthenticator y desde la parte superior de la MsalElectronConfig @microsoft/mgt-electron-provider página.

import { ElectronAuthenticator, MsalElectronConfig } from '@microsoft/mgt-electron-provider/dist/Authenticator'; 

A continuación, agregue estas líneas de código en la función para createWindow() inicializar el ElectronAuthenticator, justo después de dónde mainWindow se declara. Reemplace <your_client_id> por el identificador de cliente del registro de la aplicación.

const config: MsalElectronConfig = {
  clientId: '<your_client_id>',
  mainWindow: mainWindow, //This is the BrowserWindow instance that requires authentication
  scopes: [
    'user.read',
        'user.read',
        'people.read',
        'user.readbasic.all',
        'contacts.read',
        'presence.read.all',
        'presence.read',
        'user.read.all',
        'calendars.read'
  ],
};
ElectronAuthenticator.initialize(config);

Establecer nodeIntegration en true

En main.ts, donde se crea la nueva instancia de BrowserWindow, asegúrese de que se establece nodeIntegration en true en webPreferences. Si omite este paso, es posible que se ejecute un Uncaught ReferenceError: require is not defined error. Para que esto sea sencillo, quite los scripts de precarga.

const mainWindow = new BrowserWindow({
  height: 600,
  webPreferences: {
    nodeIntegration: true //Set this to true
  },
  width: 800
});

Agregar componentes a la página HTML

Agrega contenido a la aplicación. Ahora puede usar los componentes del kit de herramientas de Microsoft Graph en la páginaindex.html y mostrar la agenda del usuario. Reemplace el contenido de la páginaindex.html por lo siguiente.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <title>Sample Electron-MGT App</title>
 </head>
 <body>
   <mgt-login></mgt-login>
   <mgt-agenda group-by-day></mgt-agenda>
   <script type="module" src="./dist/renderer.js"></script>
 </body>
</html>

Nota: Quite cualquier encabezado o etiqueta de respuesta Content-Security-Policy meta si está copiando esto en un archivo existente.

Empaquetar la aplicación con webpack

Antes de poder ejecutar la aplicación, debes empaquetar el código para asegurarte de que todas las dependencias modulares se incluyen en la carga final. Si ya estás agrupando el código de la aplicación, puedes omitir este paso.

Instalar webpack

npm install webpack webpack-cli ts-loader --save-dev

webpack.config.js

Cree un nuevo webpack.config.js en la carpeta raíz del proyecto y pegue la siguiente configuración.

const path = require('path');
module.exports = [
 {
   mode: 'development',
   entry: './src/renderer.ts',
   target: 'electron-renderer',
   module: {
     rules: [
       {
         test: /\.ts$/,
         include: [/src/],
         use: [{ loader: 'ts-loader' }]
       }
     ]
   },
   output: {
     path: __dirname + '/dist',
     filename: 'renderer.js'
   },
   resolve: {
     extensions: ['.ts', '.js'],
     modules: ['node_modules', path.resolve(__dirname + 'src')]
   }
 },
 {
   mode: 'development',
   entry: './src/main.ts',
   target: 'electron-main',
   module: {
     rules: [
       {
         test: /\.ts$/,
         include: [/src/],
         use: [{ loader: 'ts-loader' }]
       }
     ]
   },
   output: {
     path: __dirname + '/dist',
     filename: 'main.js'
   },
   resolve: {
     extensions: ['.ts', '.js'],
     modules: ['node_modules', path.resolve(__dirname + 'src')]
   }
 }
];

Como puede ver, el front-end (proceso de representador) y el back-end (proceso principal) se agrupan por separado. Esto se debe a que en Electron, el proceso del representador se ejecuta en el contexto del explorador y el proceso principal se ejecuta en el contexto del nodo.

Agregar el script de webpacking en package.json

Agregue lo siguiente en scripts su package.json .

"scripts": {
  "webpack": "webpack",
  "start": "npm run webpack && electron dist/main.js"
}                

Ejecutar la aplicación

npm start

Agregar funcionalidades de almacenamiento en caché de tokens a la aplicación y habilitar inicios de sesión silenciosos (avanzados)

MSAL Node admite una memoria caché en memoria de forma predeterminada y proporciona la interfaz ICachePlugin para realizar la serialización de caché, pero no proporciona una forma predeterminada de almacenar la memoria caché de tokens en el disco. Si necesita almacenamiento en caché persistente para habilitar los inicios de sesión silenciosos o el almacenamiento en caché entre plataformas, se recomienda usar la implementación predeterminada proporcionada por MSAL Node como extensión. Puedes importar este complemento y pasar la instancia del complemento de caché al inicializar ElectronAuthenticator .

let config: MsalElectronConfig = {
  ...
  cachePlugin: new PersistenceCachePlugin(filePersistence) //filePersistence is the instance of type IPersistence that you will need to create
};

Para obtener más información sobre cómo implementar esto, consulte el ejemplo microsoft-authentication-library-for-js.

Siguientes pasos