Compartilhar via

Configurar um aplicativo Web Node.js para a edição de perfil

Aplica-se a: Círculo verde com um símbolo de marca de seleção branca que indica que o conteúdo a seguir se aplica a locatários externos. Locatários externos (saiba mais)

Depois que os usuários do cliente entrarem com êxito no aplicativo externo, você poderá habilitá-los a editar os perfis. Habilite os usuários clientes a gerenciar seus perfis usando o ponto de extremidade da API do Microsoft Graph/me. A chamada para o ponto de extremidade /me requer um usuário conectado e, portanto, uma permissão delegada.

Para garantir que apenas o usuário faça alterações em seu perfil, o usuário precisa concluir um desafio de MFA.

Neste guia, você aprenderá a configurar seu aplicativo Web para dar suporte à edição de perfil com proteção de MFA (autenticação multifator):

  • O aplicativo usa a política de Acesso Condicional para habilitar o requisito de MFA.
  • A configuração do aplicativo Web contém dois serviços Web, o aplicativo Web cliente e um aplicativo de serviço de camada intermediária.
  • O aplicativo Web cliente entra no usuário, lê e exibe o perfil do usuário.
  • O aplicativo de serviço de camada intermediária adquire um token de acesso e edita o perfil em nome do usuário.

Propriedades atualizáveis

Para personalizar os campos que os usuários do cliente podem editar no perfil, escolha entre as propriedades listadas na linha Atualizar perfil da tabela em APIs e permissões do Microsoft Graph.

Pré-requisitos

Atualizar o aplicativo Web cliente

Adicione os seguintes arquivos ao seu cliente de aplicativo Node.js (diretório App):

  • Crie views/gatedUpdateProfile.hbs e views/updateProfile.hbs.
  • Crie fetch.js.

Atualizar componentes da interface do usuário do aplicativo

  1. No editor de código, abra o arquivo App/views/index.hbs e adicione um link Editar perfil usando o seguinte snippet de código:

    <a href="/users/gatedUpdateProfile">Edit profile</a>

    Depois de fazer a atualização, o arquivo App/views/index.hbs deverá ser semelhante ao seguinte arquivo:

    <h1>{{title}}</h1>
{{#if isAuthenticated }}
<p>Hi {{username}}!</p>
<a href="/users/id">View ID token claims</a>
<br>
<a href="/users/gatedUpdateProfile">Profile editing</a>
<br>
<a href="/auth/signout">Sign out</a>
{{else}}
<p>Welcome to {{title}}</p>
<a href="/auth/signin">Sign in</a>
{{/if}}

  2. No editor de código, abra o arquivo App/views/gatedUpdateProfile.hbs e adicione o seguinte código:

    <h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<div style="display: flex; justify-content: left;">
    <div style="size: 400px;">
        <label>Id :</label>
        <label> {{profile.id}}</label>
        <br />
        <label for="email">Email :</label>
        <label> {{profile.mail}}</label>
        <br />
        <label for="userName">Display Name :</label>
        <label> {{profile.displayName}}</label>
        <br />
        <label for="userName">Given Name :</label>
        <label> {{profile.givenName}}</label>
        <br />    
        <label for="userSurname">Surname :</label>
        <label> {{profile.surname}}</label>
        <br />
    </div>
    <div>
        <br />
        <br />
        <a href="/users/updateProfile">
            <button>Edit Profile</button>
        </a>
    </div>
</div>
<br />
<br />
<a href="/">Go back</a>
    • Esse arquivo contém um formulário HTML que representa os detalhes editáveis do usuário.
    • O usuário precisa selecionar o botão Editar Perfil para atualizar o nome de exibição, mas o usuário deverá concluir um desafio de MFA se ainda não tiver feito isso.

  3. No editor de código, abra o arquivo App/views/updateProfile.hbs e adicione o seguinte código:

    <h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<div style="display: flex; justify-content: left;">
    <div style="size: 400px;">
        <form id="userInfoForm" action="/users/update" method="POST">
            <label>Id :</label>
            <label> {{profile.id}}</label>
            <br />
            <label>Email :</label>
            <label> {{profile.mail}}</label>
            <br />
            <label for="userName">Display Name :</label>
            <input
                type="text"
                id="displayName"
                name="displayName"
                value="{{profile.displayName}}"
            />
            <br />
            <label for="userName">Given Name :</label>
            <input
                type="text"
                id="givenName"
                name="givenName"
                value="{{profile.givenName}}"
            />
            <br />    
            <label for="userSurname">Surname :</label>
            <input
                type="text"
                id="surname"
                name="surname"
                value="{{profile.surname}}"
            />
            <br />    
            <button type="submit" id="button">Save</button>
        </form>
    </div>
    <br />
</div>
<a href="/">Go back</a>

Esse arquivo contém um formulário HTML que representa os detalhes editáveis do usuário, mas só fica visível depois que o usuário do cliente conclui o desafio de MFA.

Instalar dependências do aplicativo

Em seu terminal, instale mais pacotes do Node axios, cookie-parser, body-parser e method-override, com o comando a seguir:

npm install axios cookie-parser body-parser method-override

Configurar o aplicativo de camada intermediária

Nesta seção, você configurará o aplicativo de camada intermediária.

  1. Criar diretório de API.

  2. Para criar seu projeto de aplicativo de camada intermediária, navegue até o diretório de API e execute o seguinte comando:

    npm init -y

  3. No diretório da API, crie novos arquivos, authConfig.js, fetch.js e index.js.

  4. Para instalar dependências de aplicativo de camada intermediária, execute o seguinte comando:

npm install express express-session axios cookie-parser http-errors @azure/msal-node body-parser uuid

Próxima etapa

Editar o perfil em um aplicativo Web Node.js

  • Last updated on