Iniciar sessão de utilizadores numa aplicação Web de exemplo Node.js

Este guia de procedimentos utiliza um exemplo Node.js aplicação Web para lhe mostrar como adicionar autenticação a uma aplicação Web. A aplicação de exemplo permite que os utilizadores iniciem sessão e terminem sessão. A aplicação Web de exemplo utiliza a Biblioteca de Autenticação da Microsoft para Nó (Nó MSAL) para o Nó processar a autenticação.

Neste artigo, vai realizar as seguintes tarefas:

• Registe uma aplicação Web no centro de administração do Microsoft Entra.

• Crie um fluxo de utilizador de início de sessão e de início de sessão no Microsoft Entra centro de administração.

• Associe a sua aplicação Web ao fluxo de utilizador.

• Atualize um exemplo Node.js aplicação Web com o seu próprio ID de Microsoft Entra para os detalhes do inquilino dos clientes.

• Execute e teste a aplicação Web de exemplo.

Pré-requisitos

• Node.js.

• Visual Studio Code ou outro editor de código.

• Microsoft Entra ID do inquilino dos clientes. Se ainda não tiver uma, inscreva-se numa avaliação gratuita.

Registar a aplicação Web

Para permitir que a sua aplicação inicie sessão de utilizadores com Microsoft Entra, Microsoft Entra ID para os clientes tem de ter conhecimento da aplicação que criar. O registo da aplicação estabelece uma relação de confiança entre a aplicação e Microsoft Entra. Quando regista uma aplicação, o ID Externo gera um identificador exclusivo conhecido como ID de Aplicação (cliente), um valor utilizado para identificar a sua aplicação ao criar pedidos de autenticação.

Os passos seguintes mostram-lhe como registar a sua aplicação no centro de administração do Microsoft Entra:

1. Inicie sessão 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 filtro Diretórios + subscrições no menu superior para mudar para o inquilino do cliente.

3. Navegue paraAplicações> de Identidade>Registos de aplicações.

4. Selecione + Novo registo.

5. Na página Registar uma aplicação apresentada;

   1. Introduza um Nome de aplicação relevante que seja apresentado aos utilizadores da aplicação, por exemplo ciam-client-app.
   2. Em Tipos de conta suportados, selecione Contas apenas neste diretório organizacional.

6. Selecione Registar.

7. O painel Descrição Geral da aplicação é apresentado após o registo com êxito. Registe o ID da Aplicação (cliente) a ser utilizado no código fonte da aplicação.

Para especificar o tipo de aplicação para o registo de aplicações, siga estes passos:

1. Em Gerir, selecione Autenticação.
2. Na página Configurações da plataforma , selecione Adicionar uma plataforma e, em seguida, selecione opção Web .
3. Para os URIs de Redirecionamento, introduzahttp://localhost:3000/auth/redirect
4. Selecione Configurar para guardar as alterações.
5. Na página Configurações da plataforma , em Web, selecione Adicionar URI e, em seguida, introduza http://localhost:3000/
6. Selecione Guardar para guardar as alterações e certifique-se de que ambos os URIs estão listados.

Adicionar segredo do cliente da aplicação

Crie um segredo do cliente para a aplicação registada. A aplicação utiliza o segredo do cliente para provar a sua identidade quando pede tokens.

1. Na página Registos de aplicações, selecione a aplicação que criou (como ciam-client-app) para abrir a respetiva página Descrição geral.
2. Em Gerir, selecione Segredos de certificados&.
3. Selecione Novo segredo do cliente.
4. Na caixa Descrição , introduza uma descrição para o segredo do cliente (por exemplo, segredo do cliente da aplicação ciam).
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. Registe o Valor do segredo. Irá utilizar este valor para configuração num passo posterior.

Nota

O valor do segredo não será apresentado novamente e não será recuperável por nenhum meio, depois de navegar para fora da página Certificados e segredos , por isso certifique-se de que o grava.
Para maior segurança, considere utilizar certificados em vez de segredos do cliente.

Conceder permissões de API

Uma vez que esta aplicação inicia sessão de utilizadores, adicione permissões delegadas:

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

2. Em Gerir, selecione Permissões de API.

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

4. Selecione o separador APIs da Microsoft .

5. Na secção APIs da Microsoft mais utilizadas , selecione Microsoft Graph.

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

7. Na secção Selecionar permissões , procure e selecione permissões openid e offline_access .

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

9. Neste momento, atribuiu as permissões corretamente. No entanto, uma vez que o inquilino é um inquilino de um cliente, os próprios utilizadores não podem consentir estas permissões. Como administrador, tem de dar consentimento a estas permissões em nome de todos os utilizadores no inquilino:

   1. Selecione Conceder consentimento do administrador para <o seu nome> de inquilino e, em seguida, selecione Sim.
   2. Selecione Atualizar e, em seguida, verifique se Concedido para <o seu nome> de inquilino aparece em Estado para ambos os âmbitos.

Criar um fluxo de utilizador

Siga estes passos para criar um fluxo de utilizador que um cliente pode utilizar para iniciar sessão ou inscrever-se numa aplicação.

1. Inicie sessão no centro de administração do Microsoft Entra como, pelo menos, um Administrador de Fluxo de Utilizador de ID Externo.

2. Se tiver acesso a vários inquilinos, utilize o filtro Diretórios + subscrições no menu superior para mudar para o inquilino do cliente.

3. Navegue para>Identidades Externas Fluxos> deutilizador.

4. Selecione + Novo fluxo de utilizador.

5. Na página Criar :

   1. Introduza um Nome para o fluxo de utilizador, como SignInSignUpSample.

   2. Na lista Fornecedores de identidade, selecione Email Contas. Este fornecedor de identidade permite que os utilizadores iniciem sessão ou se inscrevam com o respetivo endereço de e-mail.

      Nota

      Os fornecedores de identidade adicionais só serão listados aqui depois de configurar a federação com os mesmos. Por exemplo, se configurar a federação com o Google ou o Facebook, poderá selecionar esses fornecedores de identidade adicionais aqui.

   3. Em Email contas, pode selecionar uma das duas opções. Neste tutorial, selecione Email com palavra-passe.

      • Email com palavra-passe: permite que os novos utilizadores se inscrevam e iniciem sessão com um endereço de e-mail como o nome de início de sessão e uma palavra-passe como credencial de primeiro fator.

      • Email código de acesso único: permite que os novos utilizadores se inscrevam e iniciem sessão com um endereço de e-mail como o nome de início de sessão e o código de acesso único por e-mail como credencial de primeiro fator.

        Nota

        Email código de acesso único tem de estar ativado ao nível do inquilino (Todos os Fornecedores> de Identidade Email código de acesso único) para que esta opção esteja disponível ao nível do fluxo de utilizador.

   4. Em Atributos do utilizador, selecione os atributos que pretende recolher do utilizador após a inscrição. Ao selecionar Mostrar mais, pode escolher atributos e afirmações para País/Região, Nome a Apresentar e Código Postal. Selecione OK. (Só são pedidos atributos aos utilizadores quando se inscrevem pela primeira vez.)

6. Selecione Criar. O novo fluxo de utilizador é apresentado na lista Fluxos de utilizador . Se necessário, atualize a página.

Para ativar a reposição personalizada de palavra-passe, utilize os passos no artigo Ativar a reposição personalizada de palavra-passe .

Associar a aplicação Web ao fluxo de utilizador

Embora muitas aplicações possam ser associadas ao fluxo de utilizador, uma única aplicação só pode ser associada a um fluxo de utilizador. Um fluxo de utilizador permite a configuração da experiência do utilizador para aplicações específicas. Por exemplo, pode configurar um fluxo de utilizador que requer que os utilizadores iniciem sessão ou se inscrevam com um número de telefone ou endereço de e-mail.

1. No menu da barra lateral, selecione Identidade.

2. Selecione Identidades Externas e, em seguida, Fluxos de utilizador.

3. Na página Fluxos de utilizador , selecione o Nome do fluxo de utilizador que criou anteriormente, por exemplo SignInSignUpSample.

4. Em Utilizar, selecione Aplicações.

5. Selecione Adicionar aplicação.

6. Selecione a aplicação na lista, como ciam-client-app ou utilize a caixa de pesquisa para localizar a aplicação e, em seguida, selecione-a.

7. Escolha Selecionar.

Clonar ou transferir uma aplicação Web de exemplo

Para obter o código de exemplo da aplicação Web, pode realizar uma das seguintes tarefas:

• Transfira o ficheiro .zip ou clone a aplicação Web de exemplo a partir do GitHub ao executar o seguinte comando:

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

Se optar por transferir o ficheiro .zip , extraia o ficheiro de aplicação de exemplo para uma pasta onde o comprimento total do caminho seja de 260 ou menos carateres.

Instalar dependências do projeto

1. Abra uma janela da consola e altere para o diretório que contém o Node.js aplicação de exemplo:

       cd 1-Authentication\5-sign-in-express\App
   

2. Execute os seguintes comandos para instalar dependências de aplicações:

       npm install && npm update
   

Configurar a aplicação Web de exemplo

1. No editor de código, abra App\authConfig.js ficheiro.

2. Localize o marcador de posição:

   1. Enter_the_Application_Id_Here e substitua-o pelo ID de Aplicação (cliente) da aplicação que registou anteriormente.

   2. Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio diretório (inquilino). Por exemplo, se o domínio primário do inquilino for contoso.onmicrosoft.com, utilize contoso. Se não tiver o seu nome de inquilino, saiba como ler os detalhes do inquilino.

   3. Enter_the_Client_Secret_Here e substitua-o pelo valor do segredo da aplicação que copiou anteriormente.

Executar e testar a aplicação Web de exemplo

Agora, pode testar o exemplo Node.js aplicação Web. Tem de iniciar o servidor Node.js e aceder ao mesmo através do browser em http://localhost:3000.

1. No terminal, execute o seguinte comando:

       npm start 
   

2. Abra o browser e, em seguida, aceda a http://localhost:3000. Deverá ver a página semelhante à seguinte captura de ecrã:

   

3. Depois de a página concluir o carregamento, selecione a ligação Iniciar sessão . É-lhe pedido para iniciar sessão.

4. Na página de início de sessão, escreva o seu endereço Email, selecione Seguinte, escreva a sua Palavra-passe e, em seguida, selecione Iniciar sessão. Se não tiver uma conta, selecione Sem conta? Crie uma ligação, que inicia o fluxo de inscrição.

5. Se escolher a opção de inscrição, depois de preencher o seu e-mail, código de acesso único, nova palavra-passe e mais detalhes da conta, conclui todo o fluxo de inscrição. Verá uma página semelhante à seguinte captura de ecrã. Verá uma página semelhante se escolher a opção de início de sessão.

   

6. Selecione Terminar sessão para terminar sessão do utilizador na aplicação Web ou selecione Ver afirmações de tokens de ID para ver afirmações de tokens de ID devolvidas por Microsoft Entra.

Como funciona

Quando os utilizadores selecionam a ligação Iniciar sessão, a aplicação inicia um pedido de autenticação e redireciona os utilizadores para Microsoft Entra ID para os clientes. Na página de início de sessão ou inscrição que é apresentada, quando um utilizador inicia sessão com êxito ou cria uma conta, Microsoft Entra ID dos clientes devolve um token de ID à aplicação. A aplicação valida o token de ID, lê as afirmações e devolve uma página segura aos utilizadores.

Quando os utilizadores selecionam a ligação Terminar sessão, a aplicação limpa a sessão, redireciona o utilizador para Microsoft Entra ID para o ponto final de fim de sessão dos clientes para notificá-lo de que o utilizador iniciou sessão.

Se quiser criar uma aplicação semelhante ao exemplo que executou, conclua os passos em Iniciar sessão de utilizadores no seu próprio artigo Node.js aplicação Web .

Passos seguintes

Poderá querer:

• Ativar a reposição de palavra-passe

• Personalizar a imagem corporativa predefinida

• Configurar o início de sessão com o Google

• Iniciar sessão de utilizadores na sua aplicação Web Node.js