Configurar autenticação em um aplicativo de página única de amostra usando o Azure AD B2C

  • Artigo

Este artigo usa um SPA (aplicativo de página única) JavaScript de exemplo para ilustrar como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) aos seu SPA.

Visão geral

O OIDC (OpenID Connect) é um protocolo de autenticação criado com base no OAuth 2.0. Você pode usá-lo para conectar um usuário com segurança a um aplicativo. Este exemplo de SPA usa MSAL.js e o fluxo PKCE OIDC. MSAL.js é uma biblioteca fornecida pela Microsoft que simplifica a adição de suporte de autenticação e autorização a SPAs.

Fluxo de entrada

O fluxo de entrada envolve as seguintes etapas:

  1. O usuário acessa o aplicativo Web e seleciona Entrar.
  2. O aplicativo inicia uma solicitação de autenticação e redireciona os usuários ao Azure Active Directory B2C.
  3. Os usuários se inscrevem ou entram e redefinem a senha. Como alternativa, é possível entrar com uma conta de rede social.
  4. Depois que os usuários se conectam, o Azure AD B2C retorna um código de autorização para o aplicativo.
  5. O aplicativo de página única valida o token de ID, lê as declarações e permite que os usuários chamem recursos e API protegidos.

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 Active Directory B2C após a autenticação desses usuários com o Azure Active Directory B2C ser concluída. 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.

  • 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.

A arquitetura e os registros do aplicativo são ilustrados no diagrama a seguir:

Diagram of a web app with web API call registrations and tokens.

Chamar uma API Web

Após a autenticação, os usuários interagem com o aplicativo, que invoca uma API Web protegida. A API Web usa a autenticação de token de portador. O token de portador é o token de acesso que o aplicativo obteve do Azure AD B2C. O aplicativo passa o token no cabeçalho de autorização da solicitação HTTPS.

Authorization: Bearer <access token>

Se o escopo do token de acesso não corresponder aos escopos da API Web, a biblioteca de autenticação obterá um novo token de acesso com os escopos corretos.

Fluxo de saída

O fluxo de saída envolve as seguintes etapas:

  1. No aplicativo, os usuários sairão.
  2. O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de tokens.
  3. O aplicativo leva os usuários para o ponto de extremidade de saída do Azure AD B2C para encerrar a sessão do Azure AD B2C.
  4. Os usuários são redirecionados de volta para o aplicativo.

Pré-requisitos

Um computador que esteja executando:

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 torna-se B2C_1_susi.

Etapa 2: registrar o SPA e a API

Nesta etapa, você cria o SPA 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:

  1. Entre no portal do Azure.

  2. 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.

  3. 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, em seguida, selecione Alternar.

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

  5. Escolha Registros de aplicativo e Novo registro.

  6. 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.

  7. Selecione Registrar.

  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, quando você configurar o aplicativo Web.

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

Etapa 2.2: configurar os escopos

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

  2. Em Gerenciar, selecione Expor uma API.

  3. 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.

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

  5. 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.

  6. Selecione Adicionar escopo.

  7. 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.

  8. Selecione Adicionar escopo.

Etapa 2.3: registrar o SPA

Para criar o registro de SPA, use as seguintes 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. Pesquise e selecione Azure AD B2C.
  4. Escolha Registros de aplicativo e Novo registro.
  5. Insira um Nome para o aplicativo, (por exemplo MyApp).
  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 SPA (Aplicativo de página única) e, na caixa de texto da URL, insira http://localhost:6420.
  8. Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e acesso offline.
  9. Selecione Registrar.

Registre a ID do aplicativo (cliente) para usar posteriormente ao configurar o aplicativo Web.

Screenshot of the web app Overview page for recording your web application ID.

Etapa 2.4: habilitar o fluxo de concessão implícita

Em seu próprio ambiente, se o aplicativo SPA usar o MSAL.js 1.3 ou anterior e o fluxo de concessão implícita ou se você configurar o aplicativo https://jwt.ms/ para testar um fluxo de usuário ou uma política personalizada, você precisará habilitar o fluxo de concessão implícita no registro do aplicativo:

  1. No menu à esquerda, em Gerenciar, selecione Autenticação.

  2. Em Concessões implícitas e fluxos híbridos, selecione as caixas de seleção Tokens de acesso (usados para fluxos implícitos) e Tokens de ID (usados para fluxos implícitos e híbridos).

  3. Selecione Salvar.

Se o aplicativo usar MSAL.js 2.0 ou posterior, não habilite a concessão de fluxo implícita, pois o MSAL.js 2.0+ dá suporte ao fluxo de código de autorização com PKCE. O aplicativo SPA neste artigo usa o fluxo PKCE e, portanto, você não precisa habilitar o fluxo de concessão implícito.

Etapa 2.5: conceder permissões

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

  1. Selecione Registros de aplicativo e, em seguida, selecione o aplicativo que você criou (ID do Aplicativo: 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) que deverá conceder acesso ao aplicativo Web. Por exemplo, insira my-api1.

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

  7. Selecione Adicionar Permissões.

  8. Selecione Fornecer consentimento do administrador para <nome do seu locatário>.

  9. Selecione Sim.

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

  11. Na lista Permissões configuradas, selecione o escopo e, em seguida, 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 de SPA

Este exemplo descreve como um aplicativo de página única pode usar o Azure AD B2C para a inscrição e a entrada de 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 SPA, você pode fazer o seguinte:

  • Baixe um arquivo zip.

  • Clone o exemplo do GitHub executando o seguinte comando:

    git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

Etapa 3.1: atualizar o exemplo de SPA

Agora que você obteve o exemplo de SPA, atualize o código com seus valores do Azure AD B2C e API Web. Na pasta de exemplo, na pasta App, abra os arquivos JavaScript listados na tabela a seguir e, em seguida, atualize-os com seus valores correspondentes.

Arquivo Chave Valor
authConfig.js clientId A ID do SPA da etapa 2.3.
policies.js nomes Os fluxos dos usuários ou a política personalizada que você criou na etapa 1.
policies.js autoridades Seus fluxos de usuário do Azure AD B2C ou autoridades de políticas personalizadas, como https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>. Substitua your-sign-in-sign-up-policy com o fluxo do usuário ou a política personalizada criada na etapa 1
policies.js authorityDomain Seu domínio de autoridade de Azure AD B2C, como <your-tenant-name>.b2clogin.com.
apiConfig.js b2cScopes Os escopos da API Web criados na etapa 2.2 (por exemplo, b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]).
apiConfig.js webApi A URL da API Web, http://localhost:5000/hello.

O código de resultado deverá ser semelhante ao seguinte exemplo:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

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:

Etapa 4.1: atualizar a API Web

  1. Abra o arquivo config.json no editor de códigos.

  2. Modifique os valores de variáveis com o registro de aplicativo que você criou anteriormente. Atualize o policyName com o fluxo de usuário que você criou como parte dos pré-requisitos (por exemplo, b2c_1_susi).

    "credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},

Etapa 4.2: habilitar CORS

Para permitir que seu aplicativo de página única chame a API Web do Node.js, é necessário habilitar CORS (compartilhamento de recursos entre origens) na API Web. Em um aplicativo de produção, tenha cuidado com o domínio que está fazendo a solicitação. Neste exemplo, permita solicitações de qualquer domínio.

Para habilitar o CORS, use o middleware a seguir. No exemplo de código da API Web do Node.js que você baixou, ele já foi adicionado ao arquivo index.js.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Etapa 5: executar o SPA e a API Web

Agora você está pronto para testar o acesso no escopo à API do aplicativo de página única. Execute a API Web do Node.js e o aplicativo de página única JavaScript de exemplo em seu computador local. Em seguida, entre no aplicativo de página única e selecione o botão Chamar API para iniciar uma solicitação à API protegida.

Executar a API Web Node.Js

  1. 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

  2. Execute os seguintes comandos:

    npm install && npm update
node index.js

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

    Listening on port 5000...

Executar o aplicativo de página única

  1. Abra outra janela do console e vá para o diretório que contém o SPA do JavaScript de exemplo. Por exemplo:

    cd ms-identity-b2c-javascript-spa

  2. Execute os seguintes comandos:

    npm install && npm update
npm start

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

    Listening on port 6420...

  3. Acesse http://localhost:6420 no navegador para exibir o aplicativo.

    Screenshot of the SPA sample app displayed in the browser window.

  4. Conclua o processo de inscrição ou de entrada. Depois de fazer logon com sucesso, você deverá ver s mensagem "Usuário <seu nome de usuário> conectado".

  5. Selecione o botão Chamar API. O SPA envia o token de acesso em uma solicitação para a API Web protegida, que retorna o nome de exibição do usuário conectado:

    Screenshot of the SPA in a browser window, showing the username JSON result that's returned by the API.

Implantar seu aplicativo

Em um aplicativo de produção, o URI de redirecionamento do registro de aplicativo normalmente é um ponto de extremidade de acesso público no qual o aplicativo está em execução, como https://contoso.com/signin-oidc.

Adicione e modifique URIs de redirecionamento nos aplicativos registrados a qualquer momento. As restrições a seguir se aplicam a URLs de redirecionamento:

  • A URL de resposta deve começar com o esquema https.
  • A URL de resposta diferencia maiúsculas de minúsculas. As letras maiúsculas e minúsculas devem corresponder às letras maiúsculas e minúsculas do caminho da URL do aplicativo em execução.

Próximas etapas

Para obter mais informações sobre os conceitos abordados neste artigo: