Compartilhar via

Introdução ao Kit de Ferramentas do Microsoft Graph

  • Artigo

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

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

Para 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, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou comprar 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 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 a partir de nodejs.org.

Usar o Kit de Ferramentas do Microsoft Graph

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

O uso do kit de ferramentas por meio de módulos ES6 fornece controle total do processo de agrupamento e permite que você junte apenas o código necessário para seu aplicativo. Para usar os módulos ES6, adicione os @microsoft/mgt-elementpacotes , @microsoft/mgt-componentse @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 logon:

<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ê quiser registrar todos os componentes do @microsoft/mgt-components, poderá usar o registerMgtComponents() método auxiliar. O uso declarativo de provedores ainda exige que o provedor apropriado seja registrado separadamente porque eles são provenientes 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 de agitação de árvores, como Webpack ou Rollup, você deseja importar e registrar os componentes individuais. Isso garante que todos os componentes não utilizados sejam retirados de suas compilações.

Você também pode configurar o provedor de forma imperativa, 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>