Guia de início rápido - Editar perfil em um exemplo de aplicativo Web Node.js

Aplica-se a: Os locatários do Workforce Inquilinos externos (saber mais)

Neste Guia de início rápido, você usa um exemplo de aplicativo Web Node.js para saber como adicionar, entrar e editar perfil em um aplicativo Web. O aplicativo Web de exemplo usa Biblioteca de Autenticação da Microsoft para Nó (Nó MSAL) e a API do Microsoft Graph para concluir a operação de entrada e editar perfil.

Pré-requisitos

• Conclua as etapas no artigo Guia de início rápido : Iniciar sessão de utilizadores numa aplicação web de exemplo. Este guia de início rápido mostra como iniciar sessão de utilizadores usando uma aplicação Web de exemplo Node.js.

Registrar e configurar o aplicativo EditProfileService

Nesta etapa, você registra o aplicativo EditProfileService (o aplicativo API), que fornece um mecanismo para proteger a operação de edição de perfil exigindo MFA.

Registrar o aplicativo EditProfileService

1. Entre no centro de administração do Microsoft Entra como pelo menos um Programador de Aplicações.

2. Se tiver acesso a vários inquilinos, utilize o ícone Definições no menu superior para mudar para o seu inquilino externo a partir do menu Diretórios + subscrições.

3. Navegue até Identidade>Aplicativos>Registos de aplicativos.

4. Selecione + Novo registo.

5. Na página Registrar um aplicativo exibida, insira as informações de registro do seu aplicativo:

   1. Na seção Nome, insira um nome de aplicativo significativo, por exemplo, edit-profile-service.

   2. Em Tipos de conta suportados, selecione Contas somente neste diretório organizacional.

6. Selecione Registo para criar a aplicação.

7. O painel de visão geral do aplicativo é exibido quando o registo está concluído. Registe o ID do aplicativo (cliente) para uso no código-fonte da aplicação.

Configurar escopos da API do aplicativo EditProfileService

O aplicativo EditProfileService precisa expor permissões, que um cliente precisa adquirir para chamar a API:

Uma API precisa publicar pelo menos um escopo, também chamado de Permissão Delegada, para que os aplicativos cliente obtenham com sucesso um token de acesso para um usuário. Para publicar um escopo, siga estas etapas:

1. Na página de registros de aplicativos , selecione o aplicativo de API que você criou (como serviço de edição de perfil) para abrir sua página de Visão geral .

2. Em Gerenciar, selecione Expor uma API.

3. Na parte superior da página, ao lado de URI de ID do Aplicação, selecione o link Adicionar para gerar um URI exclusivo para esta aplicação.

4. Aceite o URI de ID do aplicativo proposto, como api://{clientId}, e selecione Salvar. Quando seu aplicativo Web solicita um token de acesso para a API da Web, ele adiciona o URI como o prefixo para cada escopo que você define para a API.

5. Em Escopos definidos por esta API, selecione Adicionar um escopo.

6. Insira os seguintes valores que definem um acesso de leitura à API e selecione Adicionar escopo para salvar as alterações:

   Propriedade	Valor
   Nome do escopo	EditProfileService.ReadWrite
   Quem pode consentir	apenas administradores
   Nome de exibição do consentimento do administrador	Cliente edita o perfil através do serviço de edição de perfil
   Descrição do consentimento do administrador	O escopo para permitir ao aplicativo web do cliente editar o perfil chamando o serviço de edição de perfil.
   Estado	ativado

7. Em Gerenciar, selecione Manifest para abrir o editor de manifestos da API.

8. Defina a propriedade accessTokenAcceptedVersion como 2.

9. Selecione Salvar.

Adicionar segredo do cliente do aplicativo

Crie um segredo de cliente para o aplicativo registrado. O aplicativo usa o segredo do cliente para provar sua identidade quando solicita tokens.

1. Na página de Registos de Aplicações , selecione o aplicativo que você criou (como edit-profile-service ) para abrir a página Visão Geral.
2. Em Gerenciar, selecione Certificados & segredos.
3. Selecione Novo segredo do cliente.
4. Na caixa Descrição, insira uma descrição para o segredo do cliente (por exemplo, segredo do cliente de serviço de perfil de edição).
5. Em Expira, selecione uma duração para a qual o segredo é válido (de acordo com as regras de segurança da sua organização) e, em seguida, selecione Adicionar.
6. Registre o valor do segredo. Você usará esse valor para configuração em uma etapa posterior. O valor secreto não será exibido novamente e não poderá ser recuperado por nenhum meio, depois que você navegar para fora do Certificados e segredos. Certifique-se de gravá-lo.

Conceda a permissão User.ReadWrite ao aplicativo EditProfileService

User.ReadWrite é uma permissão da API do Microsoft Graph que permite que um usuário atualize seu perfil. Para conceder a permissão User.ReadWrite para a aplicação EditProfileService, siga os seguintes passos:

1. Na página Registos de Aplicações, selecione a aplicação que criou (como serviço de edição de perfil) para abrir a página Visão Geral.

2. Em Gerenciar, selecione permissões de API.

3. Selecione o separador APIs da Microsoft e, depois, em APIs da Microsoft mais usadas, selecione Microsoft Graph.

4. Selecione Permissões delegadase, em seguida, procure e selecione User.ReadWrite na lista de permissões.

5. Selecione o botão Adicionar permissões.

Conceder consentimento de administrador

Você atribuiu corretamente as permissões User.ReadWrite. No entanto, como o locatário é um locatário externo, os próprios usuários do cliente não podem consentir com essas permissões. Como administrador do locatário, você deve consentir com essa permissão em nome de todos os usuários no locatário:

1. Selecione Conceder consentimento de administrador para <o nome do seu inquilino>e, em seguida, selecione Sim.

2. Selecione Atualizar, e, em seguida, verifique se concedido a <o nome do locatário> aparece sob o estado para ambos os escopos.

Conceder permissões de API ao aplicativo Web cliente

Nesta seção, você concede permissões de API para o aplicativo Web cliente registrado anteriormente (a partir dos pré-requisitos).

Conceda ao seu aplicativo Web cliente a permissão EditProfileService.ReadWrite. Essa permissão é exposta pelo aplicativo EditProfileService e protege a operação de perfil de atualização com MFA. Para conceder a permissão EditProfileService.ReadWrite ao aplicativo cliente web, siga estas etapas:

1. Na página Registos de aplicações, selecione a aplicação de API que criou (como ciam-client-app) para abrir a sua página de Visão geral.

2. Em Gerenciar, selecione permissões de API.

3. Em Permissões configuradas, selecione Adicionar uma permissão.

4. Selecione o separador relativo às APIs que a minha organização utiliza.

5. Na lista de APIs, selecione a API como edit-profile-service.

6. Selecione a opção Permissões delegadas.

7. Na lista de permissões, selecione EditProfileService.ReadWrite.

8. Selecione o botão Adicionar permissões.

9. Na lista Permissões configuradas, selecione a permissão EditProfileService.ReadWrite e copie o URI completo da permissão para uso posterior. O URI de permissão total é semelhante ao api://{clientId}/{EditProfileService.ReadWrite}.

Conceder consentimento de administrador

Você atribuiu as permissões *EditProfileService.ReadWrite corretamente. No entanto, como o locatário é um locatário externo, os próprios usuários do cliente não podem consentir com essas permissões. Como administrador do locatário, você deve consentir com essa permissão em nome de todos os usuários no locatário:

1. Selecione Conceder consentimento de administrador para <o nome do seu inquilino>e, em seguida, selecione Sim.

2. Selecione Atualizare, em seguida, verifique se Concedido para <o nome do locatário> aparece em de Status para ambos os escopos.

Criar política de MFA de Acesso Condicional

Seu aplicativo EditProfileService que você registrou anteriormente é o recurso que você protege com MFA.

Para criar uma política de acesso condicional de MFA, use os passos em Adicionar autenticação multifator a um aplicativo. Use as seguintes configurações ao criar sua política:

• Para o Nome , use a política de MFA .
• Para os recursos de destino, selecione o aplicativo EditProfileService que você registrou anteriormente, como edit-profile-service.

Clonar ou baixar aplicativo Web de exemplo

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

Baixe o arquivo .zip ou clone o aplicativo Web de exemplo do GitHub executando o seguinte comando:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Configurar o aplicativo Web de exemplo

Este exemplo de código contém dois aplicativos, o aplicativo cliente e o aplicativo de serviço/API. Você precisa atualizar esses aplicativos para usar as configurações do cliente externo. Para fazer isso, use as seguintes etapas:

1. No editor de código, abra o arquivo 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js e localize o marcador de posição:

   • graph_end_point e substitua-o pelo ponto final da API do Microsoft Graph, que é https://graph.microsoft.com/.
   • Add_your_protected_scope_here e substitua-o pelo escopo do aplicativo EditProfileService. O valor é semelhante ao api://{clientId}/EditProfileService.ReadWrite. {clientId} é o valor de ID do aplicativo (cliente) do EditProfileService que você registrou anteriormente.

2. No editor de código, abra o arquivo 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js e localize o marcador de posição:

   • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio Directory (locatário). Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o nome do inquilino, saiba como ler os detalhes do inquilino.
   • Enter_the_Tenant_ID_Here e substitua-o pelo ID do locatário. Se não tiver o seu ID de inquilino, saiba como ler os detalhes do inquilino.
   • Enter_the_Edit_Profile_Service_Application_Id_Here e substitua-o pelo valor de ID da aplicação (cliente) do EditProfileService que registou anteriormente.
   • Enter_the_Client_Secret_Here e substitua-o pelo segredo do aplicativo EditProfileService valor copiado anteriormente.
   • graph_end_point e substitua-o pelo ponto de extremidade da API do Microsoft Graph, isso é https://graph.microsoft.com/.

Instalar dependências do projeto e executar aplicativo

Para testar seu aplicativo, instale as dependências do projeto para o aplicativo cliente e o aplicativo de serviço/API e execute-as.

1. Para executar o aplicativo cliente, abra a janela do terminal e execute os seguintes comandos:

   cd 1-Authentication\7-edit-profile-with-mfa-express\App
   npm install
   npm start
   

2. Para executar o aplicativo de serviço/API de edição, altere o diretório para o aplicativo de serviço/API de edição, 1-Authentication\7-edit-profile-with-mfa-express\Apie execute os seguintes comandos:

   npm install
   npm start
   

3. Abra o navegador e vá para http://localhost:3000. Se você tiver erros de certificado SSL, crie um arquivo .env e adicione a seguinte configuração:

   # Use this variable only in the development environment. 
   # Remove the variable when you move the app to the production environment.
   NODE_TLS_REJECT_UNAUTHORIZED='0'
   

4. Selecione o botão Entrar e, em seguida, inicie sessão.

5. Na página de início de sessão, escreva o seu endereço de e-mail , selecione Seguinte, escreva a sua palavra-passe e, em seguida, selecione Iniciar sessão. Se você não tiver uma conta, selecione Sem conta? Crie um link, que inicia o fluxo de inscrição.

6. Para atualizar o perfil, selecione o link de edição de perfil. Você verá uma página semelhante à seguinte captura de tela:

   

7. Para editar o perfil, selecione o botão Editar perfil. Se você ainda não tiver feito isso, o aplicativo solicitará que você conclua um desafio de MFA.

8. Faça alterações em qualquer um dos detalhes do perfil e, em seguida, selecione o botão Salvar.

Conteúdo relacionado

• Saiba como adicionar perfil de edição em seu próprio aplicativo Web Node.js.