Introdução ao Kit de Ferramentas do Microsoft Graph

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

Os componentes do Microsoft Graph Toolkit podem ser facilmente adicionados às suas guias do aplicativo Web, da Web Part do SharePoint ou do Microsoft Teams. Os componentes são baseados em padrões da Web e podem ser usados em projetos JavaScript simples ou com estruturas da Web populares, como Reach, Angular e Vue.js.

Assista a este breve vídeo para começar a usar o kit de ferramentas.

Para obter um tutorial passo a passo, consulte o módulo Introdução ao Microsoft Graph Toolkit .

Configure o locatário do Microsoft 365.

Para usar o Microsoft Graph Toolkit para desenvolver um aplicativo, você precisa de acesso a um locatário do Microsoft 365. Se você não tiver um locatário do Microsoft 365, poderá se qualificar para um por meio do Programa de Desenvolvedores do Microsoft 365; para obter detalhes, consulte as Perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou adquirir um plano do Microsoft 365.

Defina seu ambiente de desenvolvimento

Para desenvolver com o kit de ferramentas, você precisa:

  • Um editor de texto ou IDE. Você pode usar o editor ou o IDE de sua escolha ou pode instalar e usar o Visual Studio Code gratuitamente.
  • Um navegador da Web moderno, como Microsoft Edge, Google Chrome ou Firefox.
  • Uma versão LTS do Node.js, que você pode instalar do nodejs.org.

Usar o Microsoft Graph Toolkit

Você pode usar o Microsoft Graph Toolkit em seu aplicativo instalando os npm pacotes ou referenciando o carregador diretamente (via unpkg).

O uso do kit de ferramentas por meio de módulos ES6 oferece controle total do processo de agrupamento e permite agrupar apenas o código necessário para sua aplicação. Para usar os módulos ES6, adicione o @microsoft/mgt-element, @microsoft/mgt-components, e pacotes @microsoft/mgt-msal2-provider ao seu projeto:

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

Para usar os componentes como um elemento personalizado em HTML, eles devem ser registrados. Para usar os componentes em seu código, importe e execute a função de registro de componente necessária. O exemplo a seguir mostra como fazer isso para os componentes de agenda e login:

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtLoginComponent, registerMgtAgendaComponent } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
  registerMgtAgendaComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Como atalho, se você deseja registrar todos os componentes de @microsoft/mgt-components, pode usar o registerMgtComponents() método auxiliar. O uso declarativo de provedores ainda exige que o provedor apropriado seja registrado separadamente porque eles são originados de pacotes diferentes.

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtComponents();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Importante

Ao trabalhar com um empacotador de suporte que treme a árvore, como Webpack ou Rollup, você desejará importar e registrar os componentes individuais. Isso garante que todos os componentes não utilizados sejam eliminados da árvore de suas compilações.

Você também pode configurar o provedor imperativamente, conforme mostrado no exemplo a seguir:

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>
  • Last updated on