Criar aplicativos de produtividade usando o Microsoft Graph Toolkit

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.

O Microsoft Graph Toolkit é uma coleção de componentes da Web e provedores de autenticação para conectar aplicativos aos dados e inteligência do Microsoft 365. Este tutorial mostra como criar um aplicativo Web para monitorar eventos de calendário, tarefas pendentes e arquivos usando componentes do Microsoft Graph Toolkit e um provedor MSAL2.

Como funciona o exemplo?

Este exemplo cria um aplicativo Web que consome o provedor MSAL2 do Microsoft Graph Toolkit para habilitar a autenticação por meio do Microsoft Entra ID e usa componentes da interface do usuário para renderizar eventos de calendário, tarefas pendentes e arquivos que terão a aparência de experiências nativas da Microsoft.

Captura de tela mostrando o exemplo de Um Hub de Produtividade

Pré-requisitos

Você precisa de um locatário de desenvolvedor do Microsoft 365. Você pode se qualificar para um por meio do Programa de Desenvolvedor 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.
Instale o Visual Studio Code.
Instale o Visual Studio Code Live Server para testar seu aplicativo Web.

Registrar o aplicativo no Microsoft Entra ID

Registre o aplicativo no Microsoft Entra ID para habilitar a autenticação do usuário.

Vá para o centro de administração do Microsoft Entra e entre com seu locatário do Programa para Desenvolvedores do Microsoft 365.
Expanda o menu >Identidade, expanda Aplicativos>, selecione Registros de aplicativoNovo>registro.
Preencha o formulário Registrar um aplicativo usando os seguintes valores e selecione Registrar.
- Nome: Demonstração do One Productivity Hub
- Tipos de conta com suporte: contas em qualquer diretório organizacional (qualquer diretório do Microsoft Entra - multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox)
- URI de redirecionamento: selecione SPA (aplicativo de página única) como um tipo de URI de redirecionamento e coloque http://localhost:3000/index.html como um URI de redirecionamento para testar localmente.
Quando o registro do aplicativo for concluído, acesse a guia Visão Geral na página do aplicativo e copie a ID do aplicativo (cliente). Você precisará dessa ID para a etapa a seguir.

Criar o aplicativo

Nesta etapa, você criará um aplicativo Web e habilitará a autenticação com o provedor MSAL2 do Microsoft Graph Toolkit.

Criar um aplicativo Web

Crie uma nova pasta e nomeie-a OneProductivityHub. Clique com o botão direito do mouse e abra a pasta com o Visual Studio Code.
Crie um novo arquivo na pasta OneProductivityHub e nomeie-o index.html.
Selecione CTRL + SPACE e escolha HTML sample nas opções.

Para habilitar a autenticação com o Microsoft Graph Toolkit por meio de uma CDN, adicione a seguinte marca de script no index.html dentro da <body></body> seção:

<script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
</script>

Inicializar o provedor MSAL2

Em index.html, adicione o provedor MSAL2 na seção da <body></body> seguinte maneira:
```
<mgt-msal2-provider
    client-id="<YOUR_CLIENT_ID>"
    scopes="User.Read,
    User.ReadBasic.All,
    Calendars.Read,
    Files.Read,
    Files.Read.All,
    Sites.Read.All,
    Tasks.Read,
    Tasks.ReadWrite,
    People.Read">
</mgt-msal2-provider>
```
Importante

Os seguintes escopos definidos no provedor serão mostrados como uma lista de permissões necessárias para solicitar o consentimento do usuário durante o processo de autenticação: User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read.
Substitua <YOUR_CLIENT_ID> pela ID do cliente que você copiou do aplicativo Microsoft Entra.

Verifique se a versão final do index.html é semelhante ao exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>One Productivity Hub</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
  </script>
  <mgt-msal2-provider
      client-id="<YOUR_CLIENT_ID>"
      scopes="User.Read,
      User.ReadBasic.All,
      Calendars.Read,
      Files.Read,
      Files.Read.All,
      Sites.Read.All,
      Tasks.Read
      Tasks.ReadWrite,
      People.Read">
  </mgt-msal2-provider>
</body>
</html>

Projetar o aplicativo

Nesta etapa, você projetará seu aplicativo Web usando componentes do Microsoft Graph Toolkit e o estilizará com CSS.

Em index.html na <body></body>seção, adicione o código a seguir no provedor.

<div>
  <mgt-login />
</div>

Criar um título e uma coluna para o restante dos componentes

Para fazer seu aplicativo parecer estruturado, crie um título e uma coluna para cada recurso que será adicionado no One Productivity Hub. Em index.html em <body></body>, adicione o seguinte código HTML dentro do div, no componente de logon.

<div class="features">

  <div class="header"><div class="title">
    <h2>One Productivity Hub</h2>
    <div class="row">
      <div class="column"><h3>Calendar events</h3></div>
      <div class="column"><h3>To-do tasks</h3></div>
      <div class="column"><h3>Files</h3></div>
    </div>
  </div></div>

  <div class="row" id="content">
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
  </div>

</div>

Componente da agenda

Na div marcada com class="row", adicione o componente Agenda dentro da primeira coluna div.

<mgt-agenda />

Componente de tarefas pendentes

Na div marcada com class="row", adicione o componente To-do dentro da segunda coluna div.

<mgt-todo />

Componente FileList

Na div marcada com class="row", adicione o componente Lista de arquivos dentro da terceira coluna div.

<mgt-file-list />

Estilizar seu aplicativo Web com CSS

Crie um arquivo index.css em seu projeto e adicione o código CSS a seguir.

body,
#root>div {
    background-color: #F3F2F1;
}
.features {
    min-height: 80vh;
    margin: 20px;
    background-color: #FFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
    display: flex;
    background-color: #f0f0f0;
}
.title {
    margin-top: 20px;
    margin-left: 10px;
    width: 100%;
}
.title h2 {
    font-size: 24px;
    padding-left: 5px;
    display: inline;
    font-weight: 600;
}
.title h3 {
    float: left;
    width: 32%;
    background:transparent;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: #8A8886;
    font-weight: 600;
}
mgt-login {
    margin-left: 20px;
    --avatar-size: 60px;
    --font-family: 'Segoe UI';
    --font-size: 20px;
    --font-weight: 700;
    --color: black;
    --text-transform: none;
    --line2-font-size: 14px;
    --line2-font-weight: 400;
    --line2-color: #8A8886;
    --line2-text-transform: none;
}
#content, html, body {
    height: 98%;
  }
#mgt-col {
  float: left;
  width: 32%;
  background:transparent;
  height:500px;
  overflow: hidden;
  padding: 5px;
  margin-top: 5px;
}
#mgt-col:hover {
  overflow-y: auto;
}

Em index.html dentro <head></head>de , defina o vínculo href da folha de estilo como index.css.
```
<link rel='stylesheet' type='text/css' media='screen' href='index.css'>
```

Verifique se a versão final do index.html é semelhante à seguinte.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>One Productivity Hub</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script src='main.js'></script>
  </head>
  <body>
    <script type="module">
      import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
      registerMgtMsal2Provider();
      registerMgtComponents();
    </script>
    <mgt-msal2-provider
        client-id="<YOUR_CLIENT_ID>"
        scopes="User.Read,
        User.ReadBasic.All,
        Calendars.Read,
        Files.Read,
        Files.Read.All,
        Sites.Read.All,
        Tasks.Read,
        Tasks.ReadWrite,
        People.Read">
    </mgt-msal2-provider>
    <div>
      <mgt-login />
    </div>
    <div class="features">
        <div class="header">
            <div class="title">
                <h2>One Productivity Hub</h2>
                <div class="row">
                    <div class="column"><h3>Calendar events</h3></div>
                    <div class="column"><h3>To-do tasks</h3></div>
                    <div class="column"><h3>Files</h3></div>
                </div>
            </div>
        </div>
        <div class="row" id="content">
            <div class="column" id="mgt-col"><mgt-agenda /></div>
            <div class="column" id="mgt-col"><mgt-todo /></div>
            <div class="column" id="mgt-col"><mgt-file-list /></div>
        </div>
    </div>
  </body>
</html>

Executar o aplicativo

Nesta etapa, você executará o aplicativo de exemplo no navegador usando o Live Server.

Selecione CTRL + SHIFT + P para abrir o painel no Visual Studio Code, digite Preferences no painel e selecione Preferences: Open Workspace Settings (JSON) uma das opções.

settings.json No arquivo que abrir, adicione o seguinte código.

{
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 3000
}

Selecione CTRL + SHIFT + P para abrir o painel no Visual Studio Code, digite Live Server no painel e selecione Live Server: Open with Live Server uma das opções. O Live Server executará o aplicativo em seu navegador.
Selecione Entrar e use seu locatário do Programa de Desenvolvedor do Microsoft 365 para entrar.
Concorde com as permissões necessárias para usar os recursos do aplicativo, como exibir eventos de calendário, tarefas pendentes e pastas de arquivos.
Para garantir que o aplicativo One Productivity Hub funcione corretamente, adicione alguns eventos de calendário, tarefas pendentes e pastas de arquivos em seu locatário do Microsoft 365 Developer.

Você criou com sucesso seu aplicativo de exemplo do One Productivity Hub usando o Microsoft Graph Toolkit. Neste tutorial, você criou um aplicativo Web e consumiu o provedor MSAL2 do Microsoft Graph Toolkit e os componentes da interface do usuário.

Comentários

Esta página foi útil?

Last updated on 2026-08-24