O conto de como eu configurei o Azure AD B2C em React e React Native Part 1 (Tutorial)

imagem

Prefácio


Estamos desenvolvendo software multiplataforma e enfrentamos a tarefa de "Criar um sistema de autorização comum".

Era necessário criar um banco de dados de usuário comum para os três aplicativos, mas ao mesmo tempo, cada aplicativo tinha seu próprio recurso distintivo. Também temos microsserviços comuns e gostaríamos que o token fosse gerado e verificado a partir de uma fonte. Porque Utilizamos os serviços do Azure. A escolha caiu no Azure AD B2C. Quando você montou todas essas coisas, várias armadilhas foram reveladas. Vou dividir a história toda em várias partes:


Criar e configurar aplicativos no Azure AD B2C


Para criar o Azure B2C:

1. no portal do Azure, digite "Azure B2C" na barra de pesquisa

imagem

2. execute todas as etapas deste tutorial

Em seguida, o usuário tem duas opções:

  1. Use threads básicos do usuário
  2. Crie fluxo de usuário personalizado.

Mesmo se você quiser usar um fluxo de usuário personalizado, ainda precisará criar um aplicativo no fluxo de usuário base


Da minha experiência - nos fluxos básicos, você pode aproveitar ao máximo a funcionalidade necessária, a saber:

  1. Página personalizada para autorização.
  2. Escolha quais dados coletar sobre o usuário
  3. Quais dados enviar no token.

MAS

  1. Você não pode enviar uma carta personalizada para confirmar o e-mail
  2. Você não pode criar um campo com seus próprios valores

Threads básicos do usuário


Para criar um fluxo de usuários básico:

1. vá para a seção de registro do aplicativo (visualização)

2. Clique em Novo registro
. Veremos a seguinte imagem:

imagem

3. Selecione uma marca de seleção
Contas em qualquer diretório da organização ou provedor de identidade. Selecione esta opção para autenticação no Azure AD B2C.

Etapas para customizar o fluxo base (necessário apenas se você não desejar customizar)
« » « ». :

image

, Azure \ .. :

image

:


Fluxos de usuários personalizados


Para criar fluxos de usuário customizados, você precisa ir para o diretório criado e criar dois aplicativos:

  1. IdentityExperienceFramework
  2. ProxyIdentityExperienceFramework

imagem

Sobre como criá-los aqui .

Fiz tudo conforme indicado nas instruções "Registro de aplicativos (versão preliminar)".

E aqui já surge a primeira armadilha, que me levou a um estupor.

Uma das etapas nas instruções diz:
Na seção "Configurações avançadas", ative "tratar o aplicativo como um cliente público (selecione Sim)".

E o botão a seguir deve aparecer no aplicativo ProxyIdentityExperienceFramework :

imagem

Mas não será exibido (sem ele, a propósito, nada funcionará). Para que apareça, é necessário executar duas etapas nas instruções do IdentityExperienceFramework no ProxyIdentityExperienceFramework , a saber
1. Na seção Gerenciamento , selecione Provisionamento de API.

2. Selecione Adicionar escopo , selecione salvar e continue a aceitar o URI do identificador de aplicativo padrão.

Em seguida, você precisa fazer o download do repositório .

Abra a guia Identity Experience Framework e baixe arquivos de uma das pastas na raiz (exceto cenários) na seguinte ordem:
a.TrustFrameworkBase.xml
b.TrustFrameworkExtensions.xml
c.SignUpOrSignin. XML
d.ProfileEdit. XML
e.PasswordReset. XML

Conclusão


Como resultado do trabalho realizado, você receberá um serviço preparado para um trabalho conveniente com seus usuários.

Obrigado pela atenção!

All Articles