Imagem 5 - Propriedades do fluxo de usuário

 

Certifique se as opções obrigatórias estão marcadas:

                                                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:

                                                 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:

• https://{DOMINIO}/customer/login_microsoft

• https://{DOMINIO}/customer/login_microsoft/cnpj

• https://{DOMINIO}/customer/registration_microsoft

• https://{DOMINIO}/customer/registration_microsoft/cnpj

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

 

Exemplo:

 

                               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:

                                 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...:

                                                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.

 

                                                 Imagem 11 - Expor uma API

 

Links úteis:

• Desabilitar Verificação de Email no Fluxo de Cadastro: Disable email verification during customer sign-up - Azure AD B2C

 

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

                                         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.

                                      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.

                                          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.

                                             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.