Partilhar via

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

  • Artigo

Aplica-se a: Círculo branco com um símbolo X cinzento. Locatários do workforce Círculo verde com um símbolo de marca de verificação branco. Locatários externos (saiba mais)

Depois que os usuários clientes entrarem com êxito em seu aplicativo voltado para o exterior, você poderá permitir que eles editem seus perfis. Você permite que os utilizadores do cliente gerenciem os seus perfis usando o ponto final do Microsoft Graph API. Chamar o endpoint /me requer um utilizador 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 autenticação multifator (MFA):

  • 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.
  • A aplicação web cliente autentica o utilizador e lê e exibe o perfil do utilizador.
  • O aplicativo de serviço de camada intermediária adquire um token de acesso e, em seguida, edita o perfil em nome do usuário.

Propriedades atualizáveis

Para personalizar os campos que os usuários clientes podem editar em seus perfis, 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 Node.js aplicativo we (diretório de aplicativos ):

  • 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ódigos, abra o arquivo App/views/index.hbs e adicione um link Editar perfil usando o seguinte trecho de código:

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

    Depois de fazer a atualização, seu arquivo App/views/index.hbs deve 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ódigos, 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>
    • Este 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 seu nome de exibição, mas o usuário deve concluir um desafio de MFA se ainda não tiver feito isso.

  3. No editor de códigos, 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ó visível depois que o usuário cliente conclui o desafio MFA.

Instalar dependências de aplicativos

No seu terminal, instale mais pacotes Node, axios, , cookie-parserbody-parser, method-override, executando o seguinte comando:

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

Configurar a aplicação de nível intermédio

Nesta seção, você configura o aplicativo intermediário.

  1. Crie um diretório de API .

  2. Para criar seu projeto de aplicativo de camada intermediária, navegue até o diretório da 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 aplicativos intermediários, execute o seguinte comando:

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

Próximo passo

Editar perfil em um aplicativo Web Node.js