Registrar um aplicativo de página única no Azure Ative Directory B2C

  • Artigo

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

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

Muitos aplicativos Web modernos são criados como aplicativos de página única do lado do cliente ("SPAs"). 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 tradicionais do lado do servidor.

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

Fluxo de 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 por tokens de ID para representar 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 dos usuários sem exigir interação com esses usuários.

Esta é a abordagem recomendada . Ter tokens de atualização de vida limitada ajuda seu aplicativo a se adaptar às limitações modernas de privacidade de cookies do navegador, como o Safari ITP.

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

Single-page applications-auth

Fluxo de subvenção implícito

Algumas bibliotecas, como MSAL.js 1.x, suportam apenas o fluxo de concessão implícito 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ícito permite que o aplicativo obtenha tokens de ID e Access . Ao contrário do fluxo de código de autorização, o fluxo de concessão implícito não retorna um token Refresh.

Single-page applications-implicit

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

Pré-requisitos

  • Se não tiver uma subscrição 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. Você pode usar um locatário existente do Azure AD B2C.

Registar a aplicação SPA

  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. No portal do Azure, 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, spaapp1.

  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 Aplicativo de página única (SPA) e digite https://jwt.ms na caixa de texto URL.

    O URI de redirecionamento é o ponto de extremidade para onde o servidor de autorização (Azure AD B2C, neste caso) envia o usuário depois que ele conclui sua interação com o usuário. Além disso, o ponto de extremidade URI de redirecionamento recebe o token de acesso ou o código de autorização após a autorização bem-sucedida. Em um aplicativo de produção, normalmente é um ponto de extremidade acessível publicamente onde seu aplicativo está sendo executado, como https://contoso.com/auth-response. Para fins de teste como este guia, você pode defini-lo como https://jwt.ms, um aplicativo Web de propriedade da Microsoft que exibe o conteúdo decodificado de um token (o conteúdo do token nunca sai do seu navegador). Durante o desenvolvimento do aplicativo, você pode adicionar o ponto de extremidade onde seu aplicativo escuta localmente, como http://localhost:5000. Você pode adicionar e modificar URIs de redirecionamento em seus aplicativos registrados a qualquer momento.

    As seguintes restrições se aplicam aos URIs de redirecionamento:

    • O URL de resposta deve começar com o esquema https, a menos que use localhost.
    • O URL de resposta diferencia maiúsculas de minúsculas. Seu caso deve corresponder ao caso do caminho da URL do seu aplicativo em execução. Por exemplo, se seu aplicativo incluir como parte de seu caminho .../abc/response-oidc, não especifique .../ABC/response-oidc na URL de resposta. Como o navegador da Web trata os caminhos como diferenciadores de maiúsculas e minúsculas, os cookies associados podem .../abc/response-oidc ser excluídos se redirecionados para o URL incompatível com maiúsculas e minúsculas .../ABC/response-oidc .

  8. Em Permissões, marque a caixa de seleção Conceder consentimento de administrador para permissões openid e offline_access .

  9. Selecione Registar.

Ativar 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ícito em seu aplicativo SPA, ou se configurar o aplicativo para testar um fluxo de usuário ou uma política personalizada, precisará habilitar o https://jwt.ms/ fluxo de concessão implícito no registro do aplicativo:

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

  2. Em Concessão implícita e fluxos híbridos, marque 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 Guardar.

Se seu aplicativo usa MSAL.js 2.0 ou posterior, não habilite a concessão de fluxo implícito como MSAL.js 2.0+ suporta o fluxo de código de autorização com PKCE.

Migrar do fluxo implícito

Se você tiver um aplicativo existente que usa o fluxo implícito, recomendamos que migre para usar o fluxo de código de autorização usando uma estrutura que ofereça suporte a ele, como MSAL.js 2.0+.

Quando todo o seu SPA de produção representado por um registro de aplicativo começar a usar o fluxo de código de autorização, desative as configurações de fluxo de concessão implícitas da seguinte maneira:

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

Os aplicativos que usam o fluxo implícito podem continuar a funcionar se você deixar o fluxo implícito ativado (marcado).

Próximos passos

Saiba como Criar fluxos de usuário no Azure Ative Directory B2C.