Exercício – Alterar a apresentação de dados usando modelos

  • 2 minutos

Neste exercício, você aprenderá a personalizar o modelo de componente de logon para exibir o endereço de email de um usuário conectado.

Antes de começar

Conclua estas etapas como pré-requisitos para este exercício.

1. Configurar um aplicativo Microsoft Entra

Para este módulo, você precisa de um aplicativo com as seguintes configurações:

  • Nome: Meu aplicativo
  • Plataforma: SPA (aplicativo de página única)
  • 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)
  • UrIs de redirecionamento: http://localhost:3000

Para criar esse aplicativo, siga estas etapas:

  1. No navegador, vá para o centro de administração do Microsoft Entra, entre e vá para o Microsoft Entra ID.

  2. Selecione Registros de aplicativo no painel esquerdo e selecione Novo Registro.

    Captura de tela que mostra a seleção de Novo registro para criar um novo registro de aplicativo.

  3. Na tela Registrar um aplicativo, insira os seguintes valores:

    • Nome: insira o nome do seu aplicativo.
    • Tipos de conta com suporte: selecione 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 (opcional): selecione Aplicativo de página única (SPA) e digite http://localhost:3000.
    • Selecione Registrar.

    Captura de tela que mostra o registro do seu aplicativo no Microsoft Entra ID.

2. Configurar o ambiente

  1. Crie uma pasta na área de trabalho chamada customize-mgt.

  2. Abra a personalizar-mgt pasta no Visual Studio Code.

  3. No Visual Studio Code, crie um arquivo chamado index.html na pasta customize-mgt.

  4. Copie o código a seguir para oindex.htmle substitua YOUR-CLIENT-ID pela ID do aplicativo (cliente) copiada do aplicativo Microsoft Entra que foi criado anteriormente.

    <!DOCTYPE html>
<html lang="en">
    <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
    </head>
    <body>
      <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
      <mgt-login></mgt-login>
      <mgt-agenda></mgt-agenda>
    </body>
</html>

  5. Adicione uma pasta chamada .vscode na raiz da pasta do projeto.

  6. Adicione um arquivo chamado settings.json na pasta .vscode. Copie e cole o código a seguir no settings.jsone salve o arquivo.

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

Usar modelos no componente Logon

Suponha que você queira mostrar o endereço de email de um usuário como o conteúdo de um botão conectado no componente Logon. Você pode usar a etiqueta template no <mgt-login> e adicionar signed-in-button-content como o valor de data-type. Dentro do modelo, use {{personDetails.mail}} para acessar e exibir o endereço de email do usuário. O componente logon será semelhante a este exemplo:

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.mail}}</div>
  </template>
</mgt-login>

Dica

Se você usar o kit de ferramentas do Microsoft Graph com uma biblioteca JavaScript que já usa o {{ }} em si, poderá configurar o Kit de ferramentas do Microsoft Graph para usar outros caracteres, como o [[ ]], para denotar modelos e evitar colidir com sua estrutura JavaScript.

A versão final do index.html será semelhante a este exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

    <mgt-login>
      <template data-type="signed-in-button-content">
        <div>{{personDetails.mail}}</div>
      </template>
    </mgt-login>

    <mgt-agenda
        date="June 28, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>
  </body>
</html>

Testar seu aplicativo no navegador

  1. Na Visual Studio Code, selecione a seguinte combinação de teclas no Visual Studio Code e pesquise o Live Server:

    • Windows: CTRL+Shift+P
    • macOS: COMMAND+SHIFT+P

    Execute o Live Server para testar seu aplicativo.

  2. Abra o navegador e vá para http://localhost:3000. Se você tiver o arquivo index.html aberto ao iniciar o Live Server, o navegador abrirá http://localhost:3000/Index.html. Certifique-se de alterar a URL para http://localhost:3000, antes de entrar com sua conta de desenvolvedor do Microsoft 365. Se você não atualizar a URL, receberá o seguinte erro.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  3. Entre com sua conta Microsoft 365 desenvolvedor. Consenta com as permissões necessárias e selecione Aceitar.

  4. Por fim, o conteúdo do botão conectado mostra o endereço de email do usuário após entrar.

Captura de tela que mostra o resultado do exercício.