Usar o microsoft graph Toolkit com oTronUse the Microsoft Graph Toolkit with Electron

Este artigo descreve o processo passo a passo de usar o microsoft graph Toolkit criar um aplicativo Detron e conectá-lo ao Microsoft 365.This article describes the step-by-step process of using the Microsoft Graph Toolkit to create an Electron app and connect it to Microsoft 365. Depois de concluir as etapas, você terá um aplicativo Detron que mostra os próximos compromissos do usuário atualmente inscrevado do Microsoft 365.After completing the steps, you'll have a Electron app that shows the upcoming appointments of the currently signed in user from Microsoft 365.

Criar um aplicativo DetronCreate an Electron app

Crie um novo aplicativo Detron clonando o repositório do tiposcript de início rápido do sistema.Create a new Electron app by cloning the electron-quick-start-typescript repository. Isso criará um novo aplicativo Detron usando TypeScript, o que ajudará você a escrever um código mais robusto e a evitar erros de tempo de execução.This will create a new Electron app using TypeScript, which will help you write more robust code and avoid runtime errors.

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

Altere o diretório de trabalho para o aplicativo recém-criado e instale todas as dependências.Change the working directory to the newly created app and install all dependencies.

cd electron-quick-start-typescript
npm install

Instale o pacote "@microsoft/mgt-components" que contém todos os componentes web conectados ao Microsoft Graph.Install the '@microsoft/mgt-components' package that contains all the Microsoft Graph-connected web components.

npm i @microsoft/mgt-components

Instale os @microsoft/mgt-electron-provider @microsoft/mgt-element pacotes e npm também.Install the @microsoft/mgt-electron-provider and @microsoft/mgt-element npm packages as well. Isso permitirá que você forneça autenticação para seu aplicativo usando o MSAL e use os componentes do Microsoft Graph Toolkit.These will allow you to provide authentication for your app using MSAL and use the Microsoft Graph Toolkit components.

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

Confirme se você pode executar o aplicativo.Confirm that you can run the app.

npm start

Criar uma ID de aplicativo/clienteCreate an app/client ID

Adicionar novo registro de aplicativo no Azure AD para obter uma ID do clienteAdd new application registration in Azure AD to get a client ID

Para criar um aplicativo no Azure Active Directory (Azure AD), você precisa adicionar um novo registro de aplicativo e configurar um nome de aplicativo e redirecionar o URI.To create an application in Azure Active Directory (Azure AD), you need to add a new application registration, and then configure an app name and redirect URI.

Para criar o aplicativo no Azure AD:To create the app in Azure AD:

  1. Vá para o portal do Azure.Go to the Azure portal.
  2. No menu, selecione Azure Active Directory.From the menu, select Azure Active Directory.
  3. No menu do Azure Active Directory, selecione Registros de aplicativos.From the Azure Active Directory menu, select App registrations.
  4. No menu superior, selecione o botão Novo registro.From the top menu, select the New registration button.
  5. Insira o nome do seu aplicativo; por exemplo, My Electron-App .Enter the name for your app; for example, My Electron-App.
  6. Para o tipo de tipos de conta com suporte,selecione Contas em qualquer diretório organizacional (Qualquer diretório do Azure AD - Multitenant) e contas pessoais da Microsoft (por exemplo, Skype, Xbox).For the type of supported account types, select Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
  7. No campo Redirecionar URI, no menu suspenso, selecione Cliente público/nativo (área de trabalho móvel &) e, no campo URL, digite msal://redirect .In the Redirect URI field, in the dropdown, select Public client/native (mobile & desktop), and in the URL field, enter msal://redirect.
  8. Confirme as alterações selecionando o botão Registrar.Confirm changes by selecting the Register button.
  9. Vá para o registro do aplicativo.Go to your application registration.
  10. Verifique se você está na página Visão Geral.Verify that you are on the Overview page.
  11. Na seção Essentials, copie o valor da propriedade Application (client).From the Essentials section, copy the value of the Application (client) ID property.

Configurar o provedor de autenticação Toolkit Microsoft GraphConfigure the Microsoft Graph Toolkit authentication provider

Inicializando oTronProvider no processo de renderizaçãoInitializing ElectronProvider in your renderer process

O responsável por se comunicar com (no processo principal) para solicitar tokens de acesso e receber informações sobre o estado assinado que é necessário para que os ElectronProvider ElectronAuthenticator componentes mgt funcionem.The ElectronProvider is responsible for communicating with ElectronAuthenticator (in the main process) to request access tokens and receive information regarding signed in state that is required for the mgt components to work.

Para inicializar o arquivo , adicione o código a ElectronProvider seguir ao arquivo src/renderer.ts.To initialize the ElectronProvider, add the following code to the src/renderer.ts file.

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();

Inicializando o EletrônicaAuthenticator em seu processo principalInitializing ElectronAuthenticator in your main process

O é responsável por configurar as variáveis de configuração para autenticação ElectronAuthenticator MSAL, adquirir tokens de acesso e se comunicar com ElectronProvider o .The ElectronAuthenticator is responsible for setting up the configuration variables for MSAL authentication, acquiring access tokens, and communicating with the ElectronProvider. Inicializar o no processo principal e configurar as variáveis de configuração, como iD do cliente ElectronAuthenticator e escopos necessários.Initialize the ElectronAuthenticator in the main process and set up the configuration variables such as client ID and required scopes.

Primeiro, abra src/main.ts e importe e a partir ElectronAuthenticator da parte superior da MsalElectronConfig @microsoft/mgt-electron-provider página.First, open src/main.ts and import ElectronAuthenticator and MsalElectronConfig from @microsoft/mgt-electron-provider at the top of the page.

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

Em seguida, adicione essas linhas de código na função createWindow() para inicializar o EletrônicaAuthenticator, logo após onde mainWindow é declarado.Next, add these lines of code in the createWindow() function to initialize the ElectronAuthenticator, right after where mainWindow is declared. Substitua <your_client_id> pela ID do cliente do registro do aplicativo.Replace <your_client_id> with the client ID from your app registration.

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

Definir nodeIntegration como trueSet nodeIntegration to true

Em main.ts, onde a nova instância de BrowserWindow é criada, certifique-se de definir nodeIntegration como true em webPreferences.In main.ts, where the new instance of BrowserWindow is created, make sure that you set nodeIntegration to true under webPreferences. Se você ignorar essa etapa, poderá ter um Uncaught ReferenceError: require is not defined erro.If you skip this step, you might run into a Uncaught ReferenceError: require is not defined error. Para manter isso simples, remova os scripts de pré-carregamento.To keep this simple, remove any preloading scripts.

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

Adicionar componentes à sua página HTMLAdd components to your HTML page

Adicione algum conteúdo ao seu aplicativo.Add some content to your app. Agora você pode usar os componentes do kit de ferramentas do Microsoft Graph na página index.html e mostrar a agenda do usuário.You can now use the Microsoft Graph toolkit components in your index.html page and show the user's agenda. Substitua o conteúdo da página index.html pelo seguinte.Replace the content of the index.html page with the following.

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

Observação: Remova qualquer headers ou marcas de resposta de Política de Segurança de Conteúdo se você estiver copiando isso meta para um arquivo existente.Note: Remove any Content-Security-Policy response headers or meta tags if you are copying this onto an existing file.

Agrupar seu aplicativo usando webpackBundle your app using webpack

Antes de executar o aplicativo, você precisa agrupar seu código para garantir que todas as suas dependências modulares sejam incluídas na carga final.Before you can run the app, you need to bundle your code to ensure that all your modular dependencies are included in the final payload. Se você já estiver codificando o código do aplicativo, ignore esta etapa.If you are already bundling your app code, you can skip this step.

Instalar webpackInstall webpack

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

webpack.config.jswebpack.config.js

Crie um novo arquivowebpack.config.js na pasta raiz do seu projeto e colar a configuração a seguir.Create a new webpack.config.js file in the root folder of your project, and paste the following configuration.

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 você pode ver, o front-end (processo de renderização) e o back-end (processo principal), são agrupados separadamente.As you can see, the front end (renderer process) and the back-end (main process), are bundled separately. Isso ocorre porque, em Eletrônica, o processo de renderização é executado no contexto do navegador e o processo principal é executado no contexto do nó.This is because in Electron, the renderer process runs in the browser context and the main process runs in the node context.

Adicionar o script de webpacking em package.jsonAdd the webpacking script in package.json

Adicione o seguinte em scripts em seu package.json .Add the following under scripts in your package.json.

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

Executar seu aplicativoRun your app

npm start

Adicionar recursos de cache de token ao seu aplicativo e habilitar logins silenciosos (avançados)Add token caching capabilities to your app and enable silent sign ins (advanced)

O Nó MSAL dá suporte a um cache na memória por padrão e fornece a interface ICachePlugin para executar a serialização de cache, mas não fornece uma maneira padrão de armazenar o cache de token em disco.MSAL Node supports an in-memory cache by default and provides the ICachePlugin interface to perform cache serialization, but does not provide a default way of storing the token cache to disk. Se você precisar de armazenamento de cache persistente para habilitar logins silenciosos ou cache entre plataformas, recomendamos usar a implementação padrão fornecida pelo Nó MSAL como uma extensão.If you need persistent cache storage to enable silent sign ins or cross-platform caching, we recommend using the default implementation provided by MSAL Node as an extension. Você pode importar esse plug-in e passar a instância do plug-in de cache ao inicializar ElectronAuthenticator .You can import this plugin, and pass the instance of the cache plugin while initializing ElectronAuthenticator.

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

Para obter mais detalhes sobre como implementar isso, consulte o exemplo microsoft-authentication-library-for-js.For more details about how to implement this, see the microsoft-authentication-library-for-js sample.

Próximas etapasNext Steps