Configurar a autenticação em uma API Web .js nó de exemplo usando o Azure Ative Directory B2C

  • Artigo

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

Descrição geral

A autenticação baseada em tokens garante que as solicitações a uma API da 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.

  • Ele adquire um token de acesso com as permissões (escopos) necessárias para o ponto de extremidade da API da Web.

  • Ele passa o token de acesso como um token de portador no cabeçalho de autenticação da solicitação HTTP. Ele usa o formato:

Authorization: Bearer <token>

A API da Web conclui os seguintes eventos:

  • Ele lê o token de portador do cabeçalho de autorização na solicitação HTTP.

  • Ele valida o token.

  • Ele 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 seu aplicativo entre com o Azure AD B2C e chame uma API Web, você deve registrar dois aplicativos no diretório do Azure AD B2C.

  • O registro do aplicativo Web permite que 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 do aplicativo gera uma ID do aplicativo, também conhecida como ID do cliente, que identifica exclusivamente seu aplicativo. 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 da Web permite que seu aplicativo chame uma API da Web segura. O registro inclui os escopos da API da Web. Os escopos fornecem uma maneira de gerenciar permissões para recursos protegidos, como sua API da Web. Você concede permissões ao aplicativo Web para os escopos da API da Web. Quando um token de acesso é solicitado, seu aplicativo especifica as permissões desejadas no parâmetro de escopo da solicitação.

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

Diagram of the application registrations and the application architecture for an app with web A P I.

Pré-requisitos

Etapa 1: Configurar o fluxo de usuários

Quando os usuários tentam entrar em seu aplicativo, 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 do usuário define e controla a experiência do usuário. Depois que os usuários concluem o fluxo de usuários, o Azure AD B2C gera um token e, em seguida, redireciona os usuários de volta para seu aplicativo.

Se ainda não tiver feito 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 maneira:

  • Um fluxo de usuário combinado de login e inscrição , como susi. Esse fluxo de usuário também suporta a 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 precede o nome do fluxo de B2C_1_ usuário. Por exemplo, susi passa a B2C_1_susi.

Etapa 2: registrar seu aplicativo Web e sua API

Nesta etapa, você cria os registros do aplicativo Web e da API Web e especifica os escopos da API da Web.

Etapa 2.1: Registrar o aplicativo de API da Web

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

  1. Inicie sessão no portal do Azure.

  2. Verifique se você está usando o diretório que contém seu locatário do Azure AD B2C. Selecione o ícone Diretórios + assinaturas na barra de ferramentas do portal.

  3. Nas configurações do Portal | Página Diretórios + assinaturas , localize seu diretório do Azure AD B2C na lista Nome do diretório e selecione Alternar.

  4. No portal do Azure, procure e selecione Azure AD B2C.

  5. Selecione Registos de aplicações e, em seguida, selecione Novo registo.

  6. Em Name, insira um nome para o aplicativo (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta suportados.

  7. Selecione Registar.

  8. Depois que o registro do aplicativo for concluído, selecione Visão geral.

  9. Registre o valor da ID do aplicativo (cliente) para uso posterior ao configurar o aplicativo Web.

    Screenshot that demonstrates how to get a web A P I application I D.

Etapa 2.2: Configurar escopos

  1. Selecione o aplicativo my-api1 que você criou (ID do aplicativo: 2) para abrir a página Visão geral.

  2. Em Gerenciar, selecione Expor uma API.

  3. Ao lado de URI da ID do aplicativo, selecione o link Definir. Substitua o valor padrão (GUID) por um nome exclusivo (por exemplo, tasks-api) e selecione Salvar.

    Quando seu aplicativo Web solicita um token de acesso para a API da Web, ele deve adicionar esse URI como o prefixo para cada escopo que você define para a API.

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

  5. Para criar um escopo que defina o acesso de leitura à API:

    1. Em Nome do escopo, insira tasks.read.
    2. Para Nome de exibição do consentimento do administrador, insira API de acesso de leitura às tarefas.
    3. Para Descrição do consentimento do administrador, insira Permite acesso de leitura à API de tarefas.

  6. Selecione Adicionar escopo.

  7. Selecione Adicionar um escopo e adicione um escopo que defina o acesso de gravação à API:

    1. Em Nome do escopo, insira tasks.write.
    2. Para Nome de exibição do consentimento do administrador, digite Acesso de gravação à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permite acesso de gravação à API de tarefas.

  8. Selecione Adicionar escopo.

Etapa 2.3: Registrar o aplicativo Web

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

  1. Inicie sessão 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 seu locatário do Azure AD B2C no menu Diretórios + assinaturas .
  3. Procure e selecione Azure AD B2C.
  4. Selecione Registos de aplicações e, em seguida, selecione Novo registo.
  5. Insira um Nome para o aplicativo (por exemplo, ID do aplicativo: 1).
  6. Em Tipos de conta suportados, selecione Contas em qualquer provedor de identidade ou diretório organizacional (para autenticar usuários com fluxos de usuários).
  7. Em Redirecionar URI, selecione Web e digite http://localhost:3000/redirect a caixa de texto URL
  8. Em Permissões, marque a caixa de seleção Conceder consentimento de administrador para permissões de acesso openid e offline.
  9. Selecione Registar.

Etapa 2.4: Criar um segredo do cliente

  1. Na página Azure AD B2C - Registros de aplicativos, selecione o aplicativo que você criou, por exemplo, ID do aplicativo: 1.
  2. No menu à esquerda, em Gerenciar, selecione Segredos de certificados&.
  3. Selecione Novo segredo do cliente.
  4. Insira uma descrição para o segredo do cliente na caixa Descrição . Por exemplo, clientsecret1.
  5. Em Expira, selecione uma duração para a qual o segredo é válido e, em seguida, selecione Adicionar.
  6. Registre o valor do segredo para uso no código do aplicativo cliente. Este valor secreto nunca mais é apresentado depois de sair desta página. Você usa esse valor como o segredo do aplicativo no código do seu aplicativo.

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

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

  1. Selecione Registos de aplicações e, em seguida, selecione a aplicação que criou (ID da aplicação: 1).

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

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

  4. Selecione a guia Minhas APIs .

  5. Selecione a API (ID do aplicativo: 2) à qual o aplicativo Web deve ter acesso. Por exemplo, digite my-api1.

  6. Em Permissão, expanda tarefas e selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).

  7. Selecione Adicionar permissões.

  8. Selecione Conceder consentimento de administrador para <o nome> do seu inquilino.

  9. Selecione Yes (Sim).

  10. Selecione Atualizar e verifique se Concedido para ... aparece em Status para ambos os escopos.

  11. Na lista Permissões configuradas, selecione seu escopo e copie o nome completo do escopo.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

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 de usuários. Em seguida, o aplicativo adquire um token de acesso e chama uma API da Web protegida.

Para obter o código de exemplo do aplicativo Web, siga um destes procedimentos:

  • Faça o download de 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

  1. Abra uma janela de console e mude 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

  2. 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 seu provedor de identidade do Azure AD B2C. Atualize as seguintes configurações do aplicativo:

Key valor
APP_CLIENT_ID O ID do aplicativo (cliente) para o aplicativo Web que você registrou na etapa 2.3.
APP_CLIENT_SECRET O valor secreto do cliente para o aplicativo Web criado na etapa 2.4
SIGN_UP_SIGN_IN_POLICY_AUTHORITY A autoridade de fluxo de usuário Entrar e inscrever para o fluxo de usuário criado 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 pelo nome do seu fluxo de usuário Entrar e <sign-in-sign-up-user-flow-name> Inscrever-se, como B2C_1_susi. Saiba como Obter o nome do seu inquilino.
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 onde o Azure AD B2C retornará 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 pelo nome do seu fluxo de usuário Entrar e <sign-in-sign-up-user-flow-name> Inscrever-se, como B2C_1_susi.

Após a atualização, o 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 da Web

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

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

Etapa 4.1: Atualizar a API da Web

  1. No editor de códigos, abra o config.json arquivo.

  2. Modifique os valores das variáveis com o fluxo de usuário e o registro do aplicativo criados anteriormente:

    • Para tenantName, use o nome do seu locatário , como fabrikamb2c.

    • Para clientID, use a ID do Aplicativo (Cliente) para a API da Web criada na etapa 2.1.

    • Para policyName, use o nome do fluxo de usuário Cante em e inscreva-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": "93733604-cc77-4a3c-a604-87084dd55348"
    },
    "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 do aplicativo

  1. Abra uma janela do console e mude para o diretório que contém o exemplo de API da Web Node.js. Por exemplo:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Execute os seguintes comandos:

    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 da Web. Execute a API Web Node.js e o aplicativo Web de exemplo em sua máquina local.

  1. No terminal, navegue até a API Web de exemplo e execute start the Node.js web API server. Por exemplo: «

    cd active-directory-b2c-javascript-nodejs-webapi
node index.js

    A janela do console exibe o número da porta de onde o aplicativo está hospedado.

    Listening on port 5000...

  2. Em outra instância do terminal, navegue até o aplicativo Web de exemplo e execute iniciar o servidor do aplicativo Web Node.js. Por exemplo:

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js

    A janela do console exibe o número da porta de onde o aplicativo está hospedado.

    Msal Node Auth Code Sample app listening on port !3000

  3. No browser, aceda a http://localhost:3000. Você deve ver a página com dois botões, Entrar para chamar API PROTEGIDA e Ou chamar a API ANÔNIMA.

    Web page for sign in to call protected A P I.

  4. Para chamar a API anônima, selecione Ou chame a API ANÔNIMA. A API responde com objeto JSON com date chave como:

        {"date":"2022-01-27T14:21:22.681Z"}

    A API anônima é um ponto de extremidade desprotegido na API da Web. Você não precisa de um token de acesso para acessá-lo.

  5. Para chamar o ponto de extremidade da API protegida, selecione o botão Entrar para chamar a API PROTEGIDA. Ser-lhe-á pedido para iniciar sessão.

  6. Introduza as suas credenciais de início de sessão, como endereço de e-mail e palavra-passe. Se não tiver uma conta, selecione Inscrever-se agora para criar uma conta. Depois de entrar ou se inscrever com êxito, você verá a seguinte página com o botão Chamar a API PROTEGIDA.

    Web page for signed to call protected A P I.

  7. 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óximos passos

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