Configurar a autenticação em uma API Web de Node.js de exemplo usando o Azure Active Directory B2C

2025-06-23

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais em nossas perguntas frequentes.

Neste artigo, você aprenderá a configurar um aplicativo Web Node.js exemplo para chamar um exemplo Node.js API Web. A API Web precisa ser protegida pelo próprio Azure AD B2C. Nessa configuração, um aplicativo Web, como a ID do Aplicativo: 1 , chama uma API Web, como a ID do Aplicativo: 2. Os usuários se autenticam no aplicativo Web para adquirir um token de acesso, que é usado para chamar uma API Web protegida.

Visão geral

A autenticação baseada em token garante que as solicitações para uma API Web sejam acompanhadas por um token de acesso válido.

O aplicativo Web conclui os seguintes eventos:

Ele autentica usuários com o Azure AD B2C.
Adquire um token de acesso com as permissões necessárias (escopos) para o ponto de extremidade da API Web.
Passa o token de acesso como um token de portador no cabeçalho de autenticação da solicitação HTTP. Usa este formato:

Authorization: Bearer <token>

A API Web conclui os seguintes eventos:

Lê o token de portador do cabeçalho de autorização na solicitação HTTP.
O sistema valida o token.
Valida as permissões (escopos) no token.
Ele responde à solicitação HTTP. Se o token não for válido, o ponto de extremidade da API Web responderá com um 401 Unauthorized erro HTTP.

Visão geral do registro do aplicativo

Para permitir que o aplicativo entre com o Azure AD B2C e chame uma API Web, registre dois aplicativos no diretório do Azure AD B2C.

O registro de aplicativo Web permite que o seu aplicativo entre com o Azure AD B2C. Durante o registro, você especifica o URI de redirecionamento. O URI de redirecionamento é o ponto de extremidade para o qual os usuários são redirecionados pelo Azure AD B2C depois de concluírem a autenticação. 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. Você também gerará um segredo do cliente para seu aplicativo. Seu aplicativo usa o segredo do cliente para trocar um código de autorização por um token de acesso.
O registro da API Web permite que o aplicativo chame uma API Web segura. O registro inclui os escopos da API Web. Os escopos fornecem uma forma de gerenciar as permissões em recursos protegidos, como a API Web. Você concede as permissões do aplicativo Web aos escopos da API Web. Ao solicitar um token de acesso, o aplicativo especifica as permissões desejadas no parâmetro scope da solicitação.

Os registros de aplicativo e a arquitetura do aplicativo são descritos no diagrama a seguir:

Diagrama dos registros de aplicativos e da arquitetura do aplicativo para um aplicativo com web A P I.

Pré-requisitos

Node.js.
Visual Studio Code ou qualquer outro editor de código.

Etapa 1: configurar o fluxo de usuário

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 se tornará B2C_1_susi.

Etapa 2: Registrar seu aplicativo Web e API

Nesta etapa, você cria a Web e o registro de aplicativo de API Web, além de especificar os escopos da API Web.

Etapa 2.1: registrar o aplicativo de API Web

Para criar o registro do aplicativo da API Web (ID do Aplicativo: 2), siga estas etapas:

Entre no portal do Azure.
Verifique se você está usando o diretório que contenha seu locatário do Azure AD B2C. Selecione o ícone Diretórios + assinaturas na barra de ferramentas do portal.
Na página Configurações do portal | Diretórios + assinaturas, encontre o diretório Azure Active Directory B2C na lista Nome do diretório e selecione Alternar.
No portal do Azure, pesquise e selecione Azure AD B2C.
Escolha Registros de aplicativo e Novo registro.
Insira um Nome para o aplicativo, (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta com suporte.
Selecione Registrar.
Depois que o registro do aplicativo for concluído, selecione Visão Geral.
Registre o valor da ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

Etapa 2.2: configurar os escopos

Selecione o aplicativo my-api1 que você criou (ID do Aplicativo: 2) para abrir a página de Visão Geral do aplicativo.
Em Gerenciar, selecione Expor uma API.
Ao lado de URI do ID do Aplicativo, selecione o link Definir. Substitua o valor padrão (identificador exclusivo, GUID) por um nome exclusivo (por exemplo, tasks-api) e selecione Salvar.

Quando o aplicativo Web solicita um token de acesso à API Web, ele deve adicionar esse URI como prefixo para cada escopo que você definir para a API.
Em Escopos definidos por esta API, selecione Adicionar um escopo.
Para criar um escopo que define o acesso de leitura à API:
1. Para Nome do escopo, insira tasks.read.
2. Para Nome de exibição de consentimento do administrador, insira Acesso de leitura à API de tarefas.
3. Para Descrição do consentimento do administrador, insira Permitir acesso de leitura à API de tarefas.
Selecione Adicionar escopo.
Selecione Adicionar escopo e adicione um escopo que define o acesso de gravação à API:
1. Para Nome do escopo, insira tasks.write.
2. Para Nome de exibição de consentimento do administrador, insira Acesso de gravação à API de tarefas.
3. Para Descrição do consentimento do administrador, insira Permitir acesso de gravação à API de tarefas.
Selecione Adicionar escopo.

Etapa 2.3: Registrar o aplicativo Web

Para criar o registro de SPA, faça o seguinte:

Entre no portal do Azure.
Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas.
Procure e selecione o Azure AD B2C.
Escolha Registros de aplicativo e Novo registro.
Insira um Nome para o aplicativo (por exemplo, ID do aplicativo: 1).
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) .
Em URI de redirecionamento, selecione Web e insira http://localhost:3000/redirect na caixa de texto URL
Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e acesso offline.
Selecione Registrar.

Etapa 2.4: Criar um segredo do cliente

Na página Azure AD B2C – Registros de aplicativo , selecione o aplicativo que você criou, por exemplo, ID do aplicativo: 1.
No menu à esquerda, em Gerenciar, selecione Certificados e segredos.
Selecione Novo segredo do cliente.
Insira uma descrição para o segredo do cliente na caixa Descrição. Por exemplo, clientsecret1.
Em Expirar, selecione um período durante o qual o segredo será válido e clique em Adicionar.
Registre o Valor do segredo para uso no código do aplicativo cliente. Esse valor secreto nunca será exibido novamente depois que você sair dessa página. Use este valor como o segredo do aplicativo no código do aplicativo.

Etapa 2.5: Conceder permissões de API ao aplicativo Web

Para conceder permissões ao aplicativo (ID do Aplicativo: 1), siga estas etapas:

Selecione Registros de aplicativo e, em seguida, selecione o aplicativo que você criou (ID do Aplicativo: 1).
Em Gerenciar, selecione Permissões de API.
Em Permissões Configuradas, selecione Adicionar uma permissão.
Selecione a guia Minhas APIs.
Selecione a API (ID do Aplicativo: 2) que deverá conceder acesso ao aplicativo Web. Por exemplo, insira my-api1.
Em Permissão, expanda tarefas e, em seguida, selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).
Selecione Adicionar Permissões.
Selecione Fornecer consentimento do administrador para <nome do seu locatário>.
Selecione Sim.
Selecione Atualizar e, em seguida, verifique se Concedido para... aparece em Status para ambos os escopos.
Na lista Permissões configuradas, selecione o escopo e, em seguida, copie o nome completo do escopo.

Etapa 3: Obter o código de exemplo do aplicativo Web

Este exemplo demonstra como um aplicativo Web pode usar o Azure AD B2C para inscrição e entrada do usuário. Em seguida, o aplicativo adquire um token de acesso e chama uma API Web protegida.

Para obter o código de exemplo do aplicativo Web, você pode fazer o seguinte:

Baixe um arquivo zip. Você extrairá o arquivo zip para obter o aplicativo Web de exemplo.

Clone o exemplo do GitHub executando o seguinte comando:

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

Etapa 3.1: Instalar dependências do aplicativo

Abra uma janela do console e altere para o diretório que contém o aplicativo de exemplo Node.js. Por exemplo:
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
```
Execute os seguintes comandos para instalar as dependências do aplicativo:
```
    npm install && npm update
```

Etapa 3.2: Configurar o aplicativo Web de exemplo

Abra seu aplicativo Web em um editor de código, como o Visual Studio Code. call-protected-api Na pasta, abra o .env arquivo. Este arquivo contém informações sobre o provedor de identidade do Azure AD B2C. Atualize as seguintes configurações do aplicativo:

Chave	Valor
`APP_CLIENT_ID`	A ID do aplicativo (cliente) para o aplicativo Web que você registrou na etapa 2.3.
`APP_CLIENT_SECRET`	O valor do segredo do cliente para o aplicativo Web que você criou na etapa 2.4
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	A autoridade de fluxo de usuário Entrar e inscrever-se para o fluxo de usuário que você criou na etapa 1 , 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 fluxo de usuário de Entrada e Inscrição, como `B2C_1_susi`. Saiba como obter o nome do locatário.
`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 inquilino.
`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. Esse URL precisa 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 fluxo de usuário de Entrada e Inscrição, como `B2C_1_susi`.

Após a atualização, seu arquivo de configuração final deve ser semelhante ao exemplo a seguir:

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

Etapa 4: obter o código de exemplo da API Web

Agora que a API Web está registrada e você definiu escopos, configure o código da API Web para funcionar com o locatário do Azure AD B2C.

Para obter o código de exemplo da API Web, siga um destes procedimentos:

Baixe um arquivo *.zip.

Clone o projeto de API Web de exemplo do GitHub executando o seguinte comando:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

Você também pode ir diretamente até o projeto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi no GitHub.

Etapa 4.1: atualizar a API Web

No seu editor de código, abra o arquivo config.json.

Modifique os valores de variável com o fluxo do usuário e o registro do aplicativo que você criou anteriormente:

Para tenantName, use o nome do seu locatário , como fabrikamb2c.
Para clientID, use a ID do Aplicativo (Cliente) para a API Web que você criou na etapa 2.1.
Para policyName, use o nome do fluxo de usuário Cantar e inscrever-se que você criou na etapa 1 , como B2C_1_susi.

Após a atualização, seu código deve ser semelhante ao seguinte exemplo:

config.json:

{
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "Enter_the_Application_Id_Here"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Etapa 4.2: Instalar dependências de aplicativos

Abra uma janela do console e altere para o diretório que contém a amostra da API Web do Node.js. Por exemplo:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Execute os comandos a seguir:
```
npm install && npm update
```

Etapa 5: Executar o aplicativo Web e a API

Agora você está pronto para testar o acesso com escopo do aplicativo Web à API Web. Execute a API Web Node.js e o aplicativo Web de exemplo em seu computador local.

No terminal, navegue até a API Web de exemplo e execute start the Node.js servidor da API Web. Por exemplo: '
```
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```
A janela de console exibe o número da porta em que o aplicativo está hospedado.
```
Listening on port 5000...
```
Em outra instância de terminal, navegue até o aplicativo Web de exemplo e execute start the Node.js servidor de aplicativos Web. Por exemplo:
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js
```
A janela de console exibe o número da porta em que o aplicativo está hospedado.
```
Msal Node Auth Code Sample app listening on port !3000
```
No navegador, vá para http://localhost:3000. Você deve ver a página com dois botões, Entrar para chamar a API PROTEGIDA e Ou chamar a API ANÔNIMA.
Para chamar a API anônima, selecione a opção Ou chame a API ANONYMOUS. A API responde com o objeto JSON com date chave como:
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
A API anônima é um ponto de extremidade desprotegido na API Web. Você não precisa de um token de acesso para acessá-lo.
Para chamar o ponto de extremidade da API protegida, selecione o botão Entrar para chamar a API PROTEGIDA . Você é solicitado a fazer login.
Insira suas credenciais de entrada, como endereço de email e senha. Se você não tiver uma conta, selecione Inscrever-se agora para criar uma conta. Depois de entrar ou se inscrever com êxito, você deverá ver a página a seguir com o botão Chamar a API PROTEGIDA .
Para chamar a API protegida, selecione o botão Chamar a API PROTEGIDA . A API responde com o objeto JSON com uma name chave cujo valor é o sobrenome da sua conta, como:
```
    {"name": "User 1"} 
```

Próximas etapas

Saiba como habilitar a autenticação em sua própria API Web usando o Azure AD B2C

Compartilhar via