Pular para o conteúdo
Abrir um chamadoPortal do cliente

Ainda precisa de ajuda?

Fale com nosso time

Não encontrou o que procurava? Abra um chamado e nossa equipe vai te ajudar.

Abrir um chamado
Categorias · 11. Configurações

Login Social Azure AD B2C

Atualizado em

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:

      • Nome

      • Sobrenome

      • Nome para Exibição

      • Endereços de Email

      • ID de Objeto do Usuário

      • 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

Links úteis:

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.