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

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 com tempo de vida limitado ajuda o seu aplicativo a se adaptar às limitações modernas da privacidade dos 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 MSAL.js.

Fluxo de subvenções 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 a aplicação obtenha tokens de ID e Acesso do endpoint de autorização. Ao contrário do fluxo de código de autorização, o fluxo de concessão implícita não retorna um token de atualização.

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 uma instância existente do Azure AD B2C.

Registar a Aplicação SPA

1. Inicie sessão no portal Azure.

2. Se tiver acesso a vários inquilinos, selecione o ícone Definições no menu superior para mudar para o inquilino do Azure AD B2C no menu Diretórios + subscrições.

3. No portal do Azure, procure e selecione Azure AD B2C.

4. Selecione Registos de aplicaçõese, 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 endpoint URI de redirecionamento recebe o token de acesso ou o código de autorização após a autorização bem-sucedida. Numa aplicação em produção, é tipicamente um endpoint acessível publicamente onde a sua aplicação está a correr, 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 da aplicação, podes adicionar o endpoint onde a tua aplicação 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 a .../abc/response-oidc podem ser excluídos se forem redirecionados para o URL com diferença de maiúsculas e minúsculas .../ABC/response-oidc.

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

9. Selecione Register.

Habilitar o fluxo de concessão implícito

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:

1. Selecione o registro do aplicativo que você criou.

2. Em Gerir, selecione Autenticação.

3. Em Concessão implícita e fluxos híbridos, selecione ambas as caixas de seleção de Tokens de acesso (usados para fluxos implícitos) e Tokens de ID (usados para fluxos implícitos e híbridos).

4. Selecione Guardar.

Migrar do fluxo de concessão 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 com PKCE 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, desselecione as caixas de seleção de 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.