Configurar a autenticação em um aplicativo de página única angular de exemplo usando o Azure Active Directory B2C

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.

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

Visão geral

O OIDC (OpenID Connect) é um protocolo de autenticação baseado no OAuth 2.0 que pode ser usado para conectar com segurança um usuário a um aplicativo. Este exemplo angular usa o MSAL Angular e o MSAL Browser. A MSAL é uma biblioteca fornecida pela Microsoft que simplifica a adição de suporte de autenticação e autorização a SPAs angulares.

Fluxo de entrada

O fluxo de entrada envolve as seguintes etapas:

1. O usuário abre o aplicativo e seleciona Entrar.
2. O aplicativo inicia uma solicitação de autenticação e redireciona o usuário para o Azure AD B2C.
3. O usuário se inscreve ou entra e redefine a senha ou entra com uma conta social.
4. Após a entrada bem-sucedida, o Azure AD B2C retorna um código de autorização para o aplicativo. O aplicativo executa as seguintes ações:
   1. Troca o código de autorização por um token de ID, token de acesso e token de atualização.
   2. Lê as declarações de token de ID.
   3. Armazena o token de acesso e o token de atualização em um cache na memória para uso posterior. O token de acesso permite que o usuário chame recursos protegidos, como uma API Web. O token de atualização é usado para adquirir um novo token de acesso.

Registro do aplicativo

Para permitir que seu aplicativo entre com o Azure AD B2C e chame uma API Web, você deve registrar dois aplicativos em seu locatário do Azure AD B2C:

• O registro do aplicativo de página única (Angular) permite que o seu aplicativo entre com o Azure AD B2C. Durante o registro do aplicativo, você especifica o URI de redirecionamento. A URI de redirecionamento é o ponto de extremidade para o qual o usuário é redirecionado depois de se autenticar no Azure AD B2C. O processo de registro do aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Este artigo usa a ID do aplicativo de exemplo: 1.

• O registro da API Web permite que seu aplicativo chame uma API Web protegida. O registro expõe as permissões da API Web (escopos). O processo de registro do aplicativo gera uma ID do aplicativo que identifica exclusivamente sua API Web. Este artigo usa a ID do aplicativo de exemplo: 2. Conceda ao aplicativo (ID do aplicativo: 1) permissões para os escopos da API Web (ID do aplicativo: 2).

O diagrama a seguir descreve os registros do aplicativo e a arquitetura do aplicativo.

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

Antes de seguir os procedimentos deste artigo, verifique se o computador está em execução:

• Visual Studio Code ou qualquer outro editor de código.
• Runtime do Node.js e npm.
• Angular CLI

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: Registre seu Angular SPA e a API

Nesta etapa, você criará os registros para o SPA Angular e o aplicativo de API Web. Você também especifica os escopos da API Web.

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

   

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

2.3 Registrar o aplicativo Angular

Siga estas etapas para criar o registro do aplicativo Angular:

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 seu locatário do Azure AD 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, insira 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, em seguida, insira http://localhost:4200 na caixa URL.
8. Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e acesso offline.
9. Selecione Registrar.
10. Registre o valor da ID do aplicativo (cliente) para uso em uma etapa posterior ao configurar o aplicativo Web.

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.

    

Etapa 3: Obter o código de exemplo angular

Este exemplo demonstra como um aplicativo de página única angular 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.

Baixe um arquivo .zip do exemplo ou clone o exemplo do repositório GitHub usando o seguinte comando:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Configurar o exemplo angular

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 src/app , abra o arquivo auth-config.ts . Atualize as chaves com os valores correspondentes:

Seção	Chave	Valor
políticas B2C	Nomes	O fluxo de usuário ou a política personalizada que você criou na etapa 1.
políticas B2C	Autoridades	Substitua your-tenant-name pelo nome do locatário do Azure AD B2C. Por exemplo, use contoso.onmicrosoft.com. Em seguida, substitua o nome da política pelo fluxo de usuário ou pela política personalizada que você criou na etapa 1. Por exemplo: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
políticas B2C	domínio de autoridade	Seu nome do locatário do Azure AD B2C. Por exemplo: contoso.onmicrosoft.com.
Configuração	ID do cliente	A ID do aplicativo do Angular da etapa 2.3.
protectedResources	ponto de extremidade	A URL da API Web: http://localhost:5000/api/todolist.
protectedResources	Escopos	Os escopos da API Web que você criou na etapa 2.2. Por exemplo: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

O código src/app/auth-config.ts resultante deve ser semelhante ao seguinte exemplo:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

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.

Baixe um *.zip arquivo ou clone o projeto de API Web de exemplo do GitHub. Você também pode navegar diretamente para o projeto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi no GitHub usando o seguinte comando:

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

4.1 Configurar a API Web

Na pasta de exemplo, abra o arquivo config.json . Este arquivo contém informações sobre o provedor de identidade do Azure AD B2C. O aplicativo de API Web usa essas informações para validar o token de acesso que o aplicativo Web passa como um token de portador. Atualize as seguintes propriedades das configurações do aplicativo:

Seção	Chave	Valor
credenciais	nomeDoInquilino	A primeira parte do nome do locatário do Azure AD B2C. Por exemplo: contoso.
credenciais	ID do cliente	A ID do aplicativo da API Web da etapa 2.1. No diagrama anterior, é o aplicativo com a ID do Aplicativo: 2.
credenciais	emissor	(Opcional) O valor da declaração iss do emissor do token. Por padrão, o Azure AD B2C retorna o token no seguinte formato: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Substitua <your-tenant-name> pela primeira parte do nome do locatário do Azure AD B2C. Substitua <your-tenant-ID> pelo ID do locatário do Azure AD B2C.
políticas	Nome da política	O fluxo de usuário ou a política personalizada que você criou na etapa 1. Se o aplicativo usar vários fluxos de usuário ou políticas personalizadas, especifique apenas um. Por exemplo, use o fluxo de usuário de inscrição ou entrada.
recurso	âmbito	Os escopos do registro do aplicativo da API Web da etapa 2.5.

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

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

Etapa 5: Executar o SPA angular e a API Web

Agora você está pronto para testar o acesso com escopo angular à API. Nesta etapa, execute a API Web e o aplicativo Angular de exemplo em seu computador local. Em seguida, entre no aplicativo Angular e selecione o botão TodoList para iniciar uma solicitação à API protegida.

Executar a API Web

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

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

2. Execute os comandos a seguir:

   npm install && npm update
   node index.js
   

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

   Listening on port 5000...
   

Executar o aplicativo Angular

1. Abra outra janela do console e altere para o diretório que contém o exemplo angular. Por exemplo:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Execute os comandos a seguir:

   npm install && npm update
   npm start
   

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

   Listening on port 4200...
   

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

4. Selecione Logon.

   

5. Conclua o processo de inscrição ou de entrada.

6. Após a entrada bem-sucedida, você deverá ver seu perfil. Do menu, selecione TodoList.

   

7. Selecione Adicionar para adicionar novos itens à lista ou use os ícones para excluir ou editar itens.

   

Implantar seu aplicativo

Em um aplicativo de produção, o URI de redirecionamento para o registro do aplicativo normalmente é um ponto de extremidade acessível publicamente em que seu aplicativo está em execução, como https://contoso.com.

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.

Conteúdo relacionado

• Saiba mais sobre o exemplo de código
• Habilitar a autenticação em seu próprio aplicativo Angular
• Configurar opções de autenticação em seu aplicativo Angular
• Habilitar a autenticação em sua própria API Web