Compartilhar via

Introdução ao Kit de Ferramentas do Microsoft Graph

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

Os componentes do Microsoft Graph Toolkit podem ser facilmente adicionados à sua aplicação Web, peça Web sharePoint ou separadores do Microsoft Teams. Os componentes baseiam-se em normas Web e podem ser utilizados em projetos JavaScript simples ou em arquiteturas Web populares, como Reach, Angular e Vue.js.

Veja este breve vídeo para começar a utilizar o toolkit.

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

Configure o locatário do Microsoft 365.

Para utilizar o Microsoft Graph Toolkit para desenvolver uma aplicação, precisa de acesso a um inquilino do Microsoft 365. Se não tiver um inquilino do Microsoft 365, poderá qualificar-se para um através do Programa para Programadores do Microsoft 365; para obter detalhes, veja as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Defina seu ambiente de desenvolvimento

Para desenvolver com o toolkit, precisa de:

  • Um editor de texto ou IDE. Pode utilizar o editor ou IDE à sua escolha ou pode instalar e utilizar Visual Studio Code gratuitamente.
  • Um browser moderno, como o Microsoft Edge, Google Chrome ou Firefox.
  • Uma versão LTS do Node.js, que pode instalar a partir de nodejs.org.

Utilizar o Microsoft Graph Toolkit

Pode utilizar o Microsoft Graph Toolkit na sua aplicação ao instalar os npm pacotes ou referenciar o carregador diretamente (através de unpkg).

Utilizar o toolkit através de módulos ES6 dá-lhe controlo total do processo de agrupamento e permite-lhe agrupar apenas o código de que precisa para a sua aplicação. Para utilizar 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 utilizar os componentes como um elemento personalizado em HTML, estes têm de ser registados. Para utilizar os componentes no código, importe e execute a função de registo de componentes necessária. O exemplo seguinte mostra como fazê-lo para os componentes de agenda e início de sessão:

<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 quiser registar todos os componentes do @microsoft/mgt-components, pode utilizar o registerMgtComponents() método auxiliar. A utilização declarativa de fornecedores ainda requer que o fornecedor adequado seja registado separadamente porque 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 bundler de suporte de agitação de árvores, como o Webpack ou o Rollup, deverá importar e registar os componentes individuais. Isto garante que todos os componentes não utilizados são retirados das suas construções por árvore.

Também pode configurar o fornecedor de forma imperativa, conforme mostrado no exemplo seguinte:

<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