Configure a autenticação em um aplicativo Web Node.js de exemplo usando o Azure Active Directory B2C

  • Artigo

Este artigo de exemplo usa um aplicativo Node.js de exemplo para mostrar como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) a um aplicativo Web Node.js. O aplicativo de exemplo permite que os usuários entrem, saiam, atualizem o perfil e redefinam a senha usando os fluxos de usuários do Azure AD B2C. O aplicativo Web de exemplo usa a MSAL (Biblioteca de Autenticação da Microsoft) para Node para lidar com autenticação e autorização.

Neste artigo, você fará as seguintes tarefas:

  • Registre um aplicativo Web no portal do Azure.
  • Crie fluxos de usuários combinado de Entrada e inscrição, Edição de perfil e Predefinição de senha para o aplicativo no portal do Azure.
  • Atualize um aplicativo de Nó de exemplo para usar seu próprio aplicativo do Azure AD B2C e os fluxos de usuários.
  • Teste o aplicativo de exemplo.

Pré-requisitos

Etapa 1: configurar os fluxos de usuários

Quando os usuários tentam entrar, o aplicativo inicia uma solicitação de autenticação para o ponto de extremidade de autorização por meio de um fluxo de usuário. O fluxo de usuários define e controla a experiência do usuário. Quando o fluxo é concluído, o Azure AD B2C gera um token e redireciona o usuário de volta para o aplicativo.

Se você ainda não fez isso, crie um fluxo de usuário ou uma política personalizada. Repita as etapas para criar três fluxos de usuário separados, da seguinte forma:

  • Um fluxo de usuário combinado de entrada e inscrição, como susi. Esse fluxo de usuário também dá suporte à experiência Esqueceu sua senha.
  • Um fluxo de usuário de edição de perfil, como edit_profile.
  • Um fluxo de usuário de Redefinição de senha, como reset_password.

O Azure AD B2C acrescenta B2C_1_ ao início do nome do fluxo de usuário. Por exemplo, susi torna-se B2C_1_susi.

Etapa 2: registrar um aplicativo Web

Para habilitar a entrada no aplicativo com o Azure AD B2C, registre o aplicativo no diretório do Azure AD B2C. O registro do aplicativo estabelece uma relação de confiança entre o aplicativo e o Azure AD B2C.

Durante o registro do aplicativo, você especificará o URI de redirecionamento. O URI de redirecionamento é o ponto de extremidade para o qual o usuário é redirecionado pelo Azure AD B2C após a autenticação desse usuário com o Azure AD B2C. O processo de registro de aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Após o registro do aplicativo, o Azure AD B2C usa a ID de aplicativo e o URI de redirecionamento para criar solicitações de autenticação.

Etapa 2.1: registrar o aplicativo

Para registrar o aplicativo Web, siga estas etapas:

  1. Entre no portal do Azure.

  2. Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para o seu locatário do Azure Active Directory B2C no menu Diretórios + assinaturas.

  3. No portal do Azure, pesquise e selecione Azure AD B2C.

  4. Escolha Registros de aplicativo e Novo registro.

  5. Em Nome, insira um nome para o aplicativo (por exemplo, webapp1).

  6. Em Tipos de conta com suporte, selecione Contas em qualquer provedor de identidade ou diretório organizacional (para autenticar usuários com fluxos dos usuários) .

  7. Em URI de redirecionamento, selecione Web e, em seguida, na caixa da URL, insira http://localhost:3000/redirect.

  8. Em Permissões, marque a caixa de seleção Conceder consentimento do administrador para permissões offline_access e openid.

  9. Selecione Registrar.

  10. Selecione Visão geral.

  11. Registre a ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

    Screenshot of the web app Overview page for recording your web app I D.

Etapa 2.2: Criar um segredo do cliente do aplicativo Web

Crie um segredo do cliente para o aplicativo Web registrado. O aplicativo Web usa o segredo do cliente para confirmar sua identidade ao solicitar tokens.

  1. Em Gerenciar, selecione Certificados & Segredos.
  2. Selecione Novo segredo do cliente.
  3. Na caixa Descrição, insira uma descrição para o segredo do cliente (por exemplo, clientsecret1).
  4. Em Expirar, selecione um período durante o qual o segredo será válido e clique em Adicionar.
  5. Registre o Valor do segredo. Você usará esse valor para uma configuração em uma etapa posterior.

Etapa 3: obter o aplicativo Web de exemplo

Baixe o arquivo zip ou clone o aplicativo Web de exemplo do GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

Extraia o arquivo de exemplo para uma pasta. Você obterá um aplicativo Web com a seguinte estrutura de diretório:

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

A pasta views contém os arquivos Handlebars para a interface do usuário do aplicativo.

Etapa 4: instalar dependências

  1. Abra uma janela do console e altere para o diretório que contém o aplicativo de amostra Node.js. Por exemplo:

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp

  2. Execute os seguintes comandos para instalar as dependências do aplicativo:

    npm install && npm update

Etapa 5: configurar o aplicativo Web de exemplo

Abra o aplicativo Web em um editor de códigos, como Visual Studio Code. Na pasta raiz do projeto, abra o arquivo .env. Esse arquivo contém informações sobre seu provedor de identidade do Azure AD B2C. Atualize as propriedades das configurações do aplicativo a seguir:

Chave Valor
APP_CLIENT_ID A ID do aplicativo (cliente) para o aplicativo Web que você registrou na etapa 2.1.
APP_CLIENT_SECRET O valor do segredo do cliente referente ao aplicativo Web que você criou na Etapa 2.2
SIGN_UP_SIGN_IN_POLICY_AUTHORITY A autoridade de fluxo de usuário Entrada e inscrição, como https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. Substitua <your-tenant-name> pelo nome do seu locatário e <sign-in-sign-up-user-flow-name> pelo nome do seu fluxo de usuário de Entrada e Inscrição, como B2C_1_susi. Saiba como Obter o nome do locatário.
RESET_PASSWORD_POLICY_AUTHORITY A autoridade de fluxo de usuário Redefinir senha, como https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>. Substitua <your-tenant-name> pelo nome do seu locatário e <reset-password-user-flow-name> pelo nome do seu fluxo de usuário Redefinir senha, como B2C_1_reset_password_node_app.
EDIT_PROFILE_POLICY_AUTHORITY A autoridade de fluxo do usuário de Edição de perfil, como https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>. Substitua <your-tenant-name> pelo nome do seu locatário e <reset-password-user-flow-name> pelo nome do seu fluxo de usuário redefinir senha, como B2C_1_edit_profile_node_app.
AUTHORITY_DOMAIN O domínio de autoridade do Azure AD B2C, como https://<your-tenant-name>.b2clogin.com. Substitua <your-tenant-name> pelo nome do seu locatário.
APP_REDIRECT_URI O URI de redirecionamento do aplicativo em que o Azure AD B2C retornará as respostas de autenticação (tokens). Ele corresponde ao URI de Redirecionamento que você definiu ao registrar seu aplicativo no portal do Azure e deverá ser acessível publicamente. Deixe o valor como está.
LOGOUT_ENDPOINT O ponto de extremidade de saída do Azure AD B2C, como https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000. Substitua <your-tenant-name> pelo nome do seu locatário e <sign-in-sign-up-user-flow-name> pelo nome do seu fluxo de usuário de Entrada e Inscrição, como B2C_1_susi.

Seu arquivo de configuração final deve ser semelhante ao seguinte exemplo:

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Executar o aplicativo Web de exemplo

Agora, você pode testar o aplicativo de exemplo. É necessário iniciar o servidor Node e acessá-lo por meio do navegador em http://localhost:3000.

  1. Em seu terminal, execute o seguinte código para iniciar o servidor Web do Node.js:

    node index.js

  2. No navegador, acesse http://localhost:3000. Você deve ver a página com um botão Entrar.

    Screenshot that shows a Node web app sign in page.

Testar a entrada

  1. Depois que a página com o botão Entrar for carregada por completo, selecione Entrar. Você é solicitado a fazer login.

  2. Insira suas credenciais de entrada, como endereço de email e senha. Se você ainda não tem uma conta, selecione Inscrever-se agora para criar uma. Depois de entrar ou se inscrever com êxito, você deverá ver a página a seguir, que mostra o status de logon.

    Screenshot shows web app sign-in status.

Testar a edição de perfil

  1. Depois de entrar, selecione Editar perfil.
  2. Insira novas alterações conforme necessário e, em seguida, selecione Continuar. Você deverá visualizar a página com o status de entrada com as novas alterações, como Nome Fornecido.

Testar redefinição de senha

  1. Depois de se conectar, selecione Redefinir senha.
  2. Na próxima caixa de diálogo exibida, você pode cancelar a operação selecionando Cancelar. Como alternativa, insira um endereço de email e selecione Enviar código de verificação. Você receberá um código de verificação para sua conta de email. Copie o código de verificação em seu email, insira-o na caixa de diálogo de redefinição de senha e, em seguida, selecione Verificar código.
  3. Selecione Continuar.
  4. Insira sua nova senha, confirme-a e selecione Continuar. Você deve ver a página que mostra o status de logon.

Teste de logoff

Depois de fazer logon, selecione Sair. Você deve ver a página que tem um botão Entrar.

Próximas etapas