Pular para o conteúdo principal

Pesquisa

Bem-vindo à nossa Central de Ajuda!

Login Social Azure AD B2C

Configurações do aplicativo AD B2C no portal da Azure

Para que tudo funcione dentro da plataforma é imprescindível que o aplicativo dentro do portal da azure esteja corretamente configurado

Lembrando que um aplicativo Azure AD normal não funcionará para essa integração, é necessário que o aplicativo seja criado através do Azure AD B2C, conforme imagem abaixo:

image-20220307-125130.png
                               Imagem 1 - Portal Azure criação do aplicativo de AD B2c

 

Essa documentação não incluirá um passo a passo para a criação desse aplicativo, levando em consideração que o cliente já tenha previamente um ambiente dentro da Azure configurado, porém para saber como iniciar do zero, acesse os tutoriais da Microsoft abaixo:

Configuração do Fluxo do Usuário:

Para criar ou editar um fluxo de usuário acesse Página inicial > Azure AD B2C > Fluxos dos usuários:

image-20220307-125824__1_.png

                      Imagem 2 - Fluxos de Usuários

Para criar um novo fluxo, clique no botão Novo fluxo de usuário, selecione o fluxo que deseja (Inscrever-se ou Entrar).

image-20220307-130122.png

                                              Imagem 3 - Listagem de fluxos de usuários

Os demais fluxos não tem integração com a plataforma, apenas Inscrever-se e Entrar.

 

Selecione a versão recomendada:

image-20220307-130258.png

                                             Imagem 4 - Versão do fluxo de usuários

No formulário de criação, defina:

  1. Nome: esse campo é importante, pois ele será utilizado dentro do painel Flexy. Será indicado através do nome qual fluxo a plataforma vai conectar para fazer a autenticação. Ex de nome: B2C_1_marketplace

  2. Provedores de identidade: Selecione Email signin

  3. Autenticação multifator:

    1. Tipo de método: Selecione Email

    2. Imposição de MFA: Selecione Desativado

  4. Declarações do aplicativo IMPORTANTE :

    1. Marque as seguintes opções:

      1. Nome

      2. Sobrenome

      3. Nome para Exibição

      4. Endereços de Email

      5. ID de Objeto do Usuário

      6. Token de acesso do provedor de identidade

    2. Clique em Criar

Os campos citados anteriormente são obrigatórios, a falta deles na configuração implicará no funcionamento do login dentro da plataforma

 

Certifique se as configurações do fluxo estão corretas

image-20220307-131342.png
                                              Imagem 5 - Propriedades do fluxo de usuário
 
Certifique se as opções obrigatórias estão marcadas:
image-20220307-131534.png
                                                Imagem 6 - Declarações do aplicativo
 
 

Certifique se as configurações do aplicativo estão corretas

O primeiro fator a se validar é se os pontos de extremidade do aplicativo estão apontados para o locatário configurado (no momento da criação do aplicativo).

Para isso, acesse o aplicativo e clique no botão Pontos de extremidade:

image-20220307-132006.png

                                                 Imagem 7 - Pontos de extremidades

Importante validar se os pontos de extremidades a seguir consta o locatário (tenant) e o dominio seja b2clogin na URL, conforme imagem.

  • Ponto de extremidade do token OAuth 2.0 do Azure AD B2C (v2)

  • Ponto de extremidade da autorização OAuth 2.0 do Azure AD B2C (v2)

  • Ponto de extremidade de logoff OAuth 2.0 do Azure AD B2C (v2)

  • Documento de metadados do OpenID Connect do Azure AD B2C

  • Ponto de extremidade de metadados do SAML do Azure AD B2C

Configurações de Autenticação:

Acesse o aplicativo dentro do painel Azure e selecione Autenticação.

Configure as URL de callback do aplicativo, ou seja para onde o AD irá redirecionar o usuário após a autenticação, é necessário que seja adicionado as URL abaixo:

Troque o DOMINIO pelo endereço da sua loja/plataforma.

 

Exemplo:

image-20220307-132635.png

 

                               Imagem 8 - Configurações de autenticação do aplicativo

É importante que as opções Tokens de acesso (usados para fluxos implicitos) e Tokens de ID (usados para fluxos implícitos e híbridos) estejam marcados:

image-20220307-133306.png

                                 Imagem 9 - Concessão implícita e fluxos híbridos

 

Permissões de APIs

Certifique que pelo menos as 3 opções do Microsoft Graph estejam listadas e com consentimento do administrador...:

image-20220307-133456.png

                                                Imagem 10 - Permissões configuradas

 

Caso alguma das configurações estejam sem consentimento, clique no botão Conceder consentimento do administrador para Contoso B2C

 

Expor uma API

Também será necessário adicionar um espoco para o locatário.

Acesse o aplicativo, clique em Expor uma API no menu e depois no botão Adicionar um escopo, em seguida clique em salvar e continuar.

image-20220307-134100.png

 

                                                 Imagem 11 - Expor uma API

 

 

Frontend personalizado

Para os clientes que utilizam o frontend da tela de login personalizados, terão de adicionar aos seus botões as urls através das seguintes variáveis:

  • microsoftLoginUrl:Retorna a URL para login com CPF

  • microsoftLoginCnpjUrl: Retorna a URL para login com CNPJ (PJ)

  • microsoftRegisterUrl: Retorna a URL para cadastro com CPF

  • microsoftRegisterCnpjUrl: Retorna a URL para cadastro com CNPJ (PJ)

Exemplo:

Botões de Login

{% if microsoftLoginUrl or microsoftLoginCnpjUrl %}

   <a href="{{ microsoftLoginUrl }}">Entrar com Microsoft</a>

   <a href="{{ microsoftLoginCnpjUrl }}">Entrar com Microsoft (PJ)</a>

{% endif %}


Botões de Cadastro

{% if microsoftRegisterUrl or microsoftRegisterCnpjUrl %}

   <a href="{{ microsoftRegisterUrl }}">Cadastrar com Microsoft</a>

   <a href="{{ microsoftRegisterCnpjUrl }}">Cadastrar com Microsoft (PJ)</a>

{% endif %}

 

 

Exemplos de URL dos botões Microsoft:

  • Login: https://{TENANT}.b2clogin.com/{TENANT}.onmicrosoft.com/{NOME_FLUXO_LOGIN}/oauth2/v2.0/authorize?scope=openid profile email offline_access https%3A%2F%2Fgraph.microsoft.com%2FUser.Read&p={NOME_FLUXO_LOGIN}&state=fd6e871245f3b914ef09613347e4d3fd&response_type=code&approval_prompt=auto&redirect_uri=https%3A%2F%2Fmarketplace.ftwo.local%2Fcustomer%2Flogin_microsoft&client_id={CLIENT_ID}

  • Login CNPJ: https://{TENANT}.b2clogin.com/{TENANT}.onmicrosoft.com/{NOME_FLUXO_LOGIN}/oauth2/v2.0/authorize?scope=openid profile email offline_access https%3A%2F%2Fgraph.microsoft.com%2FUser.Read&p={NOME_FLUXO_LOGIN}&state=d276987b928874c600f236beb6287c74&response_type=code&approval_prompt=auto&redirect_uri=https%3A%2F%2Fmarketplace.ftwo.local%2Fcustomer%2Flogin_microsoft%2Fcnpj&client_id={CLIENT_ID}

  • Cadastro: https://{TENANT}.b2clogin.com/{TENANT}.onmicrosoft.com/{NOME_FLUXO_CADASTRO}/oauth2/v2.0/authorize?scope=openid profile email offline_access https%3A%2F%2Fgraph.microsoft.com%2FUser.Read&p={NOME_FLUXO_CADASTRO}&state=39f0dd7d8678281ff623544dcbd7a2f2&response_type=code&approval_prompt=auto&redirect_uri=https%3A%2F%2Fmarketplace.ftwo.local%2Fcustomer%2Fregistration_microsoft&client_id={CLIENT_ID}

  • Cadastro CNPJ: https://{TENANT}.b2clogin.com/{TENANT}.onmicrosoft.com/{NOME_FLUXO_CADASTRO}/oauth2/v2.0/authorize?scope=openid profile email offline_access https%3A%2F%2Fgraph.microsoft.com%2FUser.Read&p={NOME_FLUXO_CADASTRO}&state=60106d5450c7e70c3932df9ac559c808&response_type=code&approval_prompt=auto&redirect_uri=https%3A%2F%2Fmarketplace.ftwo.local%2Fcustomer%2Fregistration_microsoft%2Fcnpj&client_id={CLIENT_ID}

 

Para o ADMIN do marketplace e ADMIN de B2B e Múltiplos CDS, irá mudar:

Para que seja possível habilitar o login pelo AD B2C da Azure será adicionado na tela de “Configurações > Configurações gerais” novos campos de configuração:

  • Habilitar AD Azure B2C CHECKBOX : Quando ativado habilita a integração com o AD B2C e será disponibilizado outros dois novos botoões Cadastrar com Microsoft e Cadastrar com Microsoft (PJ)

  • Nome do Locatário (Tenant) TEXTFIELD : Nome configurado no momento da criação do aplicativo no portão da azure. Esse campo precisa ser idêntico ao configurado, para identificar o valor correto valide a imagem Imagem 7 - Pontos de extremidades

  • Nome do Fluxo de Cadastro TEXTFIELD : Nome do fluxo de usuário correspondente ao Cadastro dentro do painel da Azure. Esse campo precisa ser idêntico ao configurado, para identificar o valor correto valide a image Imagem 2 - Fluxos de Usuários

  • Nome do Fluxo de Login TEXTFIELD : Nome do fluxo de usuário correspondente ao Login dentro do painel da Azure. Esse campo precisa ser idêntico ao configurado, para identificar o valor correto valide a image Imagem 2 - Fluxos de Usuários

image-20220307-140111.png

                                         Imagem 12 - Configuração AD B2C painel Flexy

Para o ADMIN da lojinha, irá mudar:

Não haverão mudanças significativas para esse usuário.

Para o CONSUMIDOR final, irá mudar:

Na tela de login será adicionado dois novos botões quando AD B2C estiver habilitado “Cadastrar com Microsoft” e “Cadastrar com Microsoft (PJ)”, quando o usuário clicar nesse botão ele irá autenticar com o AD B2C e o login na plataforma/loja será feito automaticamente.

image-20220307-140453.png

                                      Imagem 13 - Tela de Login da Plataforma

 

Quando clicado no botão Entrar com Microsoft ou Entrar com Microsoft (PJ) será renderizado a tela de login configurada no fluxo do usuário.

image-20220307-150845.png

                                          Imagem 14 - Tela de Login AD B2C

 

Quando clicado no botão Cadastrar com Microsoft ou Cadastrar com Microsoft (PJ) será renderizado a tela de cadastro configurada no fluxo do usuário.

image-20220307-150949.png

                                             Imagem 15 - Tela de Cadastro AD B2C

O visual dos formulários do fluxo de usuário pode variar conforme configuração dentro do portal da Azure. O Exemplo acima apresenta um modelo padrão

 

Para o usuário da API, o que irá mudar:

Não haverão mudanças significativas para esse usuário.

Para o Admin da Flexy, o que irá mudar:

Não haverão mudanças significativas para esse usuário.

Esperamos que este material possa ter auxiliado no seu uso à plataforma Flexy, no entanto, caso ainda hajam dúvidas ou necessidades, por favor, entre em contato com nossa equipe de atendimento, que terá prazer em auxiliá-lo.

 

Comentários

0 comentário

Por favor, entre para comentar.

Powered by Zendesk