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

Artigo
10/11/2024

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.

O fluxo de entrada envolve as seguintes etapas:

O usuário acessa o aplicativo Web e seleciona Entrar.
O aplicativo inicia uma solicitação de autenticação e redireciona os usuários ao Azure Active Directory B2C.
Os usuários se inscrevem ou entram e redefinem a senha. Como alternativa, é possível entrar com uma conta de rede social.
Depois que os usuários se conectam, o Azure AD B2C retorna um código de autorização para o aplicativo.
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:

Diagrama de um aplicativo Web com registros e tokens de chamada à API Web.

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:

No aplicativo, os usuários sairão.
O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de tokens.
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.
Os usuários são redirecionados de volta para o aplicativo.

Pré-requisitos

Um computador que esteja executando:

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

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:

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, em seguida, 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 SPA

Para criar o registro de SPA, use as seguintes etapas:

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 o seu locatário do Azure Active Directory B2C no menu Diretórios + assinaturas.
Pesquise e selecione Azure AD B2C.
Escolha Registros de aplicativo e Novo registro.
Insira um Nome para o aplicativo, (por exemplo MyApp).
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 SPA (Aplicativo de página única) e, na caixa de texto da URL, insira http://localhost:6420.
Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e acesso offline.
Selecione Registrar.

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

Captura de tela da página de Visão geral do aplicativo Web para registrar a ID do aplicativo Web.

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

Você pode habilitar o fluxo de concessão implícito por dois motivos, quando estiver usando MSAL.js versão 1.3 ou anterior ou quando usar um registro de aplicativo para testar um fluxo de usuário para fins de teste.

Use estas etapas para habilitar o fluxo de concessão implícito para seu aplicativo:

Selecione o registro do aplicativo que você criou.
Em Gerenciar, selecione Autenticação.
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).
Selecione Salvar.

Observação

Se o aplicativo usar o MSAL.js 2.0 ou posterior, não habilite o fluxo de concessão implícito, pois o MSAL.js 2.0+ é compatível com o fluxo de código de autorização do OAuth 2.0 (com PKCE). Se você habilitar a concessão implícita para testar um fluxo de usuário, certifique-se de desabilitar as configurações de fluxo de concessão implícitas antes de implantar seu aplicativo na produção.

Etapa 2.5: conceder permissões

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

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

Abra o arquivo config.json no editor de códigos.
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

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

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
```
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...
```
Acesse http://localhost:6420 no navegador para exibir o aplicativo.
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".
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:

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:

Compartilhar via

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

Visão geral

Visão geral do registro do aplicativo

Chamar uma API Web

Fluxo de saída

Pré-requisitos

Etapa 1: configurar o fluxo de usuário

Etapa 2: registrar o SPA e a API

Etapa 2.1: registrar o aplicativo de API Web

Etapa 2.2: configurar os escopos

Etapa 2.3: registrar o SPA

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

Etapa 2.5: conceder permissões

Etapa 3: Obter o código de exemplo de SPA

Etapa 3.1: atualizar o exemplo de SPA

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

Etapa 4.1: atualizar a API Web

Etapa 4.2: habilitar CORS

Etapa 5: executar o SPA e a API Web

Executar a API Web Node.Js

Executar o aplicativo de página única

Implantar seu aplicativo

Próximas etapas

Comentários

Recursos adicionais

Compartilhar via

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

Visão geral

Fluxo de entrada

Visão geral do registro do aplicativo

Chamar uma API Web

Fluxo de saída

Pré-requisitos

Etapa 1: configurar o fluxo de usuário

Etapa 2: registrar o SPA e a API

Etapa 2.1: registrar o aplicativo de API Web

Etapa 2.2: configurar os escopos

Etapa 2.3: registrar o SPA

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

Etapa 2.5: conceder permissões

Etapa 3: Obter o código de exemplo de SPA

Etapa 3.1: atualizar o exemplo de SPA

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

Etapa 4.1: atualizar a API Web

Etapa 4.2: habilitar CORS

Etapa 5: executar o SPA e a API Web

Executar a API Web Node.Js

Executar o aplicativo de página única

Implantar seu aplicativo

Próximas etapas

Comentários

Recursos adicionais