Compartilhar via

Criar aplicações de produtividade 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.

O Microsoft Graph Toolkit é uma coleção de componentes Web e fornecedores de autenticação para ligar aplicações a dados e informações do Microsoft 365. Este tutorial mostra-lhe como criar uma aplicação Web para monitorizar os seus eventos de calendário, tarefas de tarefas e ficheiros utilizando componentes do Microsoft Graph Toolkit e um fornecedor MSAL2.

Como funciona o exemplo?

Este exemplo cria uma aplicação Web que consome o fornecedor do Microsoft Graph Toolkit MSAL2 para ativar a autenticação através de Microsoft Entra ID e utiliza componentes da IU para compor eventos de calendário, tarefas de tarefas e ficheiros que irão parecer experiências nativas da Microsoft.

Captura de ecrã a mostrar o exemplo do One Productivity Hub

Pré-requisitos

Registar a aplicação no Microsoft Entra ID

Registe a aplicação no Microsoft Entra ID para ativar a autenticação do utilizador.

  1. Aceda à centro de administração do Microsoft Entra e inicie sessão com o seu inquilino do Programa para Programadores do Microsoft 365.

  2. Expanda o menu >Identidade expanda Aplicações> selecione Registros de aplicativo>Novo registo.

    Captura de ecrã da página de registos de aplicações com Novo registo realçado

  3. Preencha o formulário Registar uma aplicação com os seguintes valores e, em seguida, selecione Registar.

    • Nome: Demonstração de Um Hub de Produtividade
    • Tipos de conta suportados: contas em qualquer diretório organizacional (qualquer diretório Microsoft Entra - Multi-inquilino) e contas Microsoft pessoais (por exemplo, Skype, Xbox)
    • URI de Redirecionamento: selecione Aplicação de página única (SPA) como um tipo de URI de redirecionamento e coloque http://localhost:3000/index.html como um URI de redirecionamento para testar localmente.

    Captura de ecrã da página Registar uma aplicação a mostrar os valores a introduzir

  4. Quando o registo da aplicação estiver concluído, aceda ao separador Descrição geral na página da aplicação e copie o ID da Aplicação (cliente). Precisa deste ID para o passo seguinte.

Criar o aplicativo

Neste passo, irá criar uma aplicação Web e ativar a autenticação com o fornecedor do Microsoft Graph Toolkit MSAL2.

Criar uma aplicação Web

  1. Crie uma nova pasta e dê-lhe o nome OneProductivityHub. Clique com o botão direito do rato e abra a pasta com Visual Studio Code.

  2. Crie um novo ficheiro na pasta OneProductivityHub e dê-lhe o nome index.html.

  3. Selecione e selecione CTRL + SPACEEXEMPLO HTML nas opções.

  4. Para ativar a autenticação com o Microsoft Graph Toolkit através de uma CDN, adicione a seguinte etiqueta de script no index.html dentro da <body></body> secção:

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

Inicializar o fornecedor MSAL2

  1. No index.html, adicione o fornecedor MSAL2 na secção da <body></body> seguinte forma:

    <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 âmbitos definidos no fornecedor serão apresentados como uma lista das permissões necessárias para pedir o consentimento do utilizador 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.

  2. Substitua <YOUR_CLIENT_ID> pelo ID de cliente que copiou da aplicação Microsoft Entra.

  3. Certifique-se de que a versão final do index.html é semelhante ao seguinte exemplo:

    <!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>

Estruturar a aplicação

Neste passo, irá estruturar a sua aplicação Web através dos componentes do Microsoft Graph Toolkit e desenhá-la com CSS.

Inicializar o componente De início de sessão

Em index.html na <body></body>secção, adicione o seguinte código no fornecedor.

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

Criar um título e coluna para os restantes componentes

Para que a sua aplicação pareça estruturada, crie um título e uma coluna para cada funcionalidade que será adicionada ao One Productivity Hub. Em index.html em <body></body>, adicione o seguinte código HTML dentro do div, sob o componente de início de sessão.

<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 agenda

No div tagged com class="row", adicione o componente Agenda dentro do div da primeira coluna.

<mgt-agenda />

Componente de tarefas

Em div tagged with class="row", adicione o componente To-do dentro da segunda coluna div.

<mgt-todo />

Componente FileList

No div tagged com class="row", adicione o componente Lista de ficheiros dentro do div da terceira coluna.

<mgt-file-list />

Modelar a sua aplicação Web com CSS

  1. Crie um ficheiro index.css no projeto e adicione o seguinte código CSS.

    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;
}

  2. No index.html no <head></head>, defina a ligação href de folha de estilos como index.css.

    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>

  3. Certifique-se de que 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 a aplicação

Neste passo, irá executar a sua aplicação de exemplo no browser com o Live Server.

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

  2. settings.json No ficheiro que é aberto, adicione o seguinte código.

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

  3. Selecione CTRL + SHIFT + P para abrir o painel no Visual Studio Code, escreva Live Server no painel e selecione Live Server: Open with Live Server uma das opções. O Live Server executará a aplicação no seu browser.

  4. Selecione Iniciar sessão e utilize o seu inquilino do Programa de Programador do Microsoft 365 para iniciar sessão.

  5. Consentir as permissões necessárias para utilizar as funcionalidades da aplicação, como ver eventos de calendário, tarefas de tarefas e pastas de ficheiros.

  6. Para garantir que a aplicação One Productivity Hub funciona corretamente, adicione alguns eventos de calendário, tarefas a fazer e pastas de ficheiros no seu inquilino do Microsoft 365 Developer.

    Captura de ecrã a mostrar a aplicação de exemplo One Productivity Hub

Conteúdo relacionado

Criou com êxito a sua aplicação de exemplo One Productivity Hub com o Microsoft Graph Toolkit. Neste tutorial, criou uma aplicação Web e consumiu o fornecedor e componentes de IU do Microsoft Graph Toolkit MSAL2.

  • Last updated on