Criar aplicativos de produtividade usando o Microsoft Graph Toolkit
O Microsoft Graph Toolkit é uma coleção de componentes Web e provedores de autenticação para conectar aplicativos a dados e inteligência do Microsoft 365. Este tutorial mostra como criar um aplicativo Web para monitorar seus eventos de calendário, tarefas de tarefas e arquivos usando componentes do Microsoft Graph Toolkit e um provedor MSAL2.
Como o exemplo funciona?
Este exemplo cria um aplicativo Web que consome o provedor MSAL2 do Microsoft Graph Toolkit para habilitar a autenticação por meio de Microsoft Entra ID e usa componentes da interface do usuário para renderizar eventos de calendário, tarefas a serem executadas e arquivos que parecerão experiências nativas da Microsoft.
Pré-requisitos
- Você precisa de um locatário do desenvolvedor do Microsoft 365. Você pode se qualificar para um por meio do Programa de Desenvolvedor 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.
- Instale Visual Studio Code.
- Instale 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.
Acesse o centro de administração do Microsoft Entra e entre com seu locatário do Programa de Desenvolvedores do Microsoft 365.
Expanda o menu > Identidade expanda Aplicativos> selecione Registros de aplicativo>Novo registro.
Conclua o formulário Registrar um aplicativo usando os valores a seguir e selecione Registrar.
- Nome: Uma demonstração do Hub de Produtividade
- Tipos de conta com suporte: contas em qualquer diretório organizacional (Qualquer diretório 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.htmlcomo 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ê precisa 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 Visual Studio Code.
Crie um novo arquivo na pasta OneProductivityHub e nomeie-o index.html.
Selecione
CTRL + SPACEe escolha exemplo de HTML nas opções.Para habilitar a autenticação com o Microsoft Graph Toolkit por meio de uma CDN, adicione a seguinte marca de script em 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 copiada 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.
Inicializar o componente Logon
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 Agenda
No div marcado com class="row", adicione o componente Agenda dentro da primeira coluna div.
<mgt-agenda />
Componente to-do
No div marcado com class="row", adicione o componente To-do dentro da segunda coluna div.
<mgt-todo />
Componente FileList
No div marcado com class="row", adicione o componente Lista de arquivos dentro da terceira coluna div.
<mgt-file-list />
Estilizar seu aplicativo Web com o 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 no
<head></head>, defina o linkhrefde planilha de estilos 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á seu aplicativo de exemplo no navegador usando o Live Server.
Selecione
CTRL + SHIFT + Ppara abrir o painel no Visual Studio Code, digitePreferencesno painel e selecionePreferences: Open Workspace Settings (JSON)entre as opções.settings.jsonNo arquivo aberto, adicione o código a seguir.{ "liveServer.settings.host": "localhost", "liveServer.settings.port": 3000 }Selecione
CTRL + SHIFT + Ppara abrir o painel no Visual Studio Code, digiteLive Serverno painel e selecioneLive Server: Open with Live Serverentre as 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.
Consentir com as permissões necessárias para usar os recursos do aplicativo, como exibir eventos de calendário, tarefas a fazer e pastas de arquivo.
Para garantir que o aplicativo One Productivity Hub funcione corretamente, adicione alguns eventos de calendário, tarefas a fazer e pastas de arquivo no locatário do Desenvolvedor do Microsoft 365.
Resumo
Você criou com êxito 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.
Se você estiver procurando maneiras de aprimorar seu aplicativo do One Productivity Hub, confira a lista de componentes da Web disponíveis no Microsoft Graph Toolkit e inclua componentes adicionais em seu aplicativo.
Próximas etapas
Para saber mais sobre o Microsoft Graph Toolkit, confira a visão geral do Microsoft Graph Toolkit e o caminho de aprendizagem Desenvolver aplicativos com o Microsoft Graph Toolkit .
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de