Compartilhar via

Criar uma aplicação Web com o Microsoft Graph Toolkit

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.

Este tópico descreve como começar a utilizar o Microsoft Graph Toolkit numa aplicação Web escrita em JavaScript de baunilha. Para obter um tutorial passo a passo, experimente o módulo Introdução ao Microsoft Graph Toolkit. Se quiser saber como utilizar o Toolkit com uma arquitetura Web, consulte Criar uma aplicação Web (React) ou Criar uma aplicação Web (Angular).

A introdução ao Toolkit envolve os seguintes passos:

  1. Adicione o Microsoft Graph Toolkit ao seu projeto.
  2. Inicialize o Fornecedor da Biblioteca de Autenticação da Microsoft 2 (MSAL2).
  3. Adicione os componentes.
  4. Teste a sua aplicação.

Adicionar o Microsoft Graph Toolkit ao seu projeto

Pode utilizar o Microsoft Graph Toolkit na sua aplicação ao instalar os pacotes npm ou carregá-los a partir de uma Rede de Entrega de Conteúdos (CDN).

Para utilizar o toolkit através de uma CDN, adicione o seguinte script e marcação à sua página HTML:

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

Inicializar o Fornecedor MSAL2

Os provedores do Kit de ferramentas do Microsoft Graph permitem autenticação e acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. O Fornecedor MSAL2 utiliza o MSAL-browser para iniciar sessão de utilizadores e adquirir tokens. Pode inicializar este fornecedor no seu HTML ou JavaScript.

Nota: se estiver atualmente a utilizar o Fornecedor MSAL e quiser atualizar para o Fornecedor MSAL2, veja Migrar do Fornecedor MSAL para o Fornecedor MSAL2. Se quiser utilizar a sua própria autenticação de back-end, utilize o Fornecedor de Proxy em vez do Fornecedor MSAL2.

Pode optar por inicializar o fornecedor no seu código JavaScript ou HTML.

Para inicializar o fornecedor MSAL no seu JavaScript, adicione o seguinte código à sua aplicação:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

O ID de cliente é a única propriedade necessária para inicializar o fornecedor, mas pode definir mais opções. Para obter a lista completa, veja Fornecedor MSAL2.

Criar um ID de aplicação/cliente

Para obter um ID de cliente, tem de registar a sua aplicação no Microsoft Entra ID.

Adicionar os componentes

Depois de inicializar o fornecedor MSAL2, pode começar a utilizar qualquer um dos componentes do Toolkit.

Este exemplo utiliza os módulos ES6, o Fornecedor MSAL2 inicializado em JavaScript e o Login componente:

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

O exemplo seguinte utiliza os módulos ES6, o Fornecedor MSAL2 inicializado em HTML e o Login componente:

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

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

Testar seu aplicativo

Para testar a sua aplicação, a MSAL requer que a página seja alojada num servidor Web para os redirecionamentos de autenticação.

Se estiver apenas a começar e quiser experimentar, pode utilizar o Live Server no Visual Studio Code ou qualquer servidor de desenvolvimento leve semelhante. Transfira a extensão e abra o ficheiro HTML com o servidor dinâmico.

Nota: Certifique-se de que o URI de redirecionamento no registo de aplicações está definido para a porta localhost na qual a aplicação está alojada. Aceda ao registo da aplicação no centro de administração do Microsoft Entra, clique em Autenticação em gerir e adicione o URI de redirecionamento correto.

Controlar o estado de início de sessão de um utilizador

Pode detetar quando um utilizador tem sessão iniciada com êxito e apresentar componentes específicos em conformidade. Por exemplo, apresente o componente de agenda se o utilizador tiver sessão iniciada. Caso contrário, apresente a interface de início de sessão.

O pacote mgt-element fornece a isSignedIn função utilitária que pode chamar para verificar se um utilizador tem sessão iniciada.

Se estiver a utilizar o toolkit através dos pacotes npm, pode importar o e ProviderState do Provider@microsoft/mgt-element.

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

Próximas etapas

  • Last updated on