Registre um aplicativo de página única no Azure Active Directory B2C

  • Artigo

Antes que os aplicativos possam interagir com o Azure Active Directory B2C (Azure AD B2C), eles deverão ser registrados em um locatário gerenciado por você. Este guia mostra como registrar um "SPA" (aplicativo de página única) usando o portal do Azure.

Visão geral das opções de autenticação

Muitos aplicativos Web modernos são criados como "SPAs" (aplicativos de página única). Os desenvolvedores os escrevem usando JavaScript ou uma estrutura SPA, como Angular, Vue e React. Esses aplicativos são executados em um navegador da Web e têm características de autenticação diferentes dos aplicativos Web do lado do servidor tradicionais.

O Azure AD B2C fornece duas opções para permitir que aplicativos de página única conectem usuários e obtenham tokens para acessar serviços de back-end ou APIs Web:

Fluxo do código de autorização (com PKCE)

O fluxo de código de autorização do OAuth 2.0 (com PKCE) permite que o aplicativo troque um código de autorização para tokens de ID representarem o usuário autenticado e tokens de Acesso necessários para chamar APIs protegidas. Além disso, ele retorna tokens de Atualização que fornecem acesso de longo prazo a recursos em nome de usuários sem exigir interação com esses usuários.

Essa é a abordagem recomendada. Ter tokens de atualização com tempo de vida limitado ajuda o aplicativo a se adaptar às limitações de privacidade de cookie dos navegadores modernos, como o Safari ITP.

Para aproveitar esse fluxo, seu aplicativo pode usar uma biblioteca de autenticação que dá suporte a ele, como MSAL.js.

Single-page applications-auth

Fluxo de concessão implícita

Algumas bibliotecas, como MSAL.js 1.x, só dão suporte ao fluxo de concessão implícita ou seus aplicativos são implementados para usar o fluxo implícito. Nesses casos, o Azure AD B2C dá suporte ao fluxo implícito do OAuth 2.0. O fluxo de concessão implícita permite que o aplicativo obtenha os tokens de ID e Acesso. Diferentemente do fluxo de código de autorização, o fluxo de concessão implícita não retorna um token de Atualização.

Single-page applications-implicit

Esse fluxo de autenticação não inclui cenários de aplicativos que usam estruturas JavaScript de multiplataforma, como o Electron e React-Native. Esses cenários exigem mais funcionalidades para interação com as plataformas nativas.

Pré-requisitos

  • Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.

  • Se você não tiver um Locatário do Azure AD B2C, crie um agora. É possível usar um locatário existente do Azure AD B2C.

Registrar o aplicativo SPA

  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. No portal do Azure, pesquise e selecione Azure AD B2C.

  4. Escolha Registros de aplicativo e Novo registro.

  5. Insira um Nome para o aplicativo. Por exemplo, spaapp1.

  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 insira https://jwt.ms na caixa de texto da URL.

    O URI de redirecionamento é o ponto de extremidade para onde o servidor de autorização (Azure AD B2C, nesse caso) envia o usuário após concluir sua interação com o usuário. Além disso, o ponto de extremidade do URI de redirecionamento recebe o código de autorização ou o token de acesso após a autorização bem-sucedida. Em um aplicativo de produção, normalmente é um ponto de extremidade de acesso público no qual o aplicativo está em execução, como https://contoso.com/auth-response. Para fins de teste, como este guia, você pode defini-lo como https://jwt.ms, um aplicativo da Web de propriedade da Microsoft que exibe o conteúdo decodificado de um token (o conteúdo do token nunca deixa o navegador). Durante o desenvolvimento do aplicativo, é possível adicionar o ponto de extremidade onde o aplicativo escuta localmente, como http://localhost:5000. 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 precisa começar com o esquema https, a menos que esteja usando localhost.
    • 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. Por exemplo, se o aplicativo incluir .../abc/response-oidc como parte de seu caminho, não especifique .../ABC/response-oidc na URL de resposta. Como o navegador da Web trata os caminhos diferenciando maiúsculas de minúsculas, os cookies associados a .../abc/response-oidc podem ser excluídos se forem redirecionados para a URL de .../ABC/response-oidc com maiúsculas e minúsculas não correspondentes.

  8. Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e offline_access.

  9. Selecione Registrar.

Habilitar o fluxo implícito

Se você estiver usando o MSAL.js 1.3 ou uma versão anterior com o fluxo de concessão implícita em seu aplicativo SPA 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.

Fazer a migração do fluxo implícito

Se você tem um aplicativo existente que usa o fluxo implícito, recomendamos migrar para o uso do fluxo de código de autorização usando uma estrutura que dê suporte a ele, como MSAL.js 2.0+.

Quando todos os SPAs de produção representados por um registro de aplicativo começarem a usar o fluxo de código de autorização, desabilite as configurações de fluxo de concessão implícita da seguinte forma:

  1. No menu à esquerda, em Gerenciar, selecione Autenticação.
  2. Em Concessão implícita, desmarque a seleção de ambas as caixas de seleção Tokens de acesso e Tokens de ID.
  3. Selecione Salvar.

Os aplicativos que usam o fluxo implícito continuarão funcionando se você deixar o fluxo implícito habilitado (marcado).

Próximas etapas

Saiba como Criar fluxos de usuários no Azure Active Directory B2C.