Configurar páginas personalizadas para entradas dos usuários

Artigo
07/25/2024

Este artigo descreve como criar páginas personalizadas no Microsoft Dynamics 365 Commerce que lidem com entradas personalizadas para usuários nos locatários de B2C do Microsoft Entra.

Para usar as páginas personalizadas criadas no Dynamics 365 Commerce para manipular fluxos de inscrições de usuário, você deve configurar as políticas do Microsoft Entra que serão referenciadas no ambiente de comércio. Você pode configurar as políticas B2C "Se inscrever e entrar," "Edição de perfil," e "Redefinição de senha" Microsoft Entra usando o aplicativo B2C do Microsoft Entra. O locatário B2C do Microsoft Entra e nomes de política podem ser referenciados durante o processo de provisionamento feito para o ambiente de comércio usando Microsoft Dynamics Lifecycle Services (LCS).

As páginas personalizadas do Commerce podem ser criadas usando conectar, inscrever, edição de perfil da conta, redefinição de senha ou módulos do Microsoft Entra genéricos. As URLs da página publicadas para essas páginas personalizadas devem ser referenciadas nas configurações de política do Microsoft Entra B2C no portal do Azure.

Aviso

O Microsoft Entra B2C removeu os fluxos de usuário antigos (herdados) até 1º de agosto de 2021. Portanto, você deve planejar a migração dos fluxos de usuário para a nova versão recomendada. A nova versão oferece paridade de recursos e novos recursos. Para obter mais informações, consulte Fluxos de usuário no Microsoft Entra ID B2C.

A biblioteca de módulos do Commerce versão 10.0.15 ou superior deve ser usada com os fluxos de usuário de B2C recomendados. As páginas da política de usuário padrão oferecidas no Microsoft Entra ID B2C também podem ser usadas e permitem alterações de imagem de plano de fundo, logotipo e cor de plano de fundo relacionadas à identidade visual da empresa. Embora seja mais limitado em recursos de design, as páginas de política de usuário padrão fornecem a funcionalidade de política do Microsoft Entra B2C, sem criar e configurar páginas personalizadas dedicadas.

Configurar políticas B2C

Depois de ter configurado seu locatário B2C Microsoft Entra e associá-lo com seu ambiente de comércio, Acesse a página Microsoft Entra B2C no portal do Azure e depois, no menu, em Políticas, selecione Fluxos de usuário (políticas).

Comando fluxos de usuário (políticas) no menu.

Agora você pode configurar fluxos de entrada de usuário de "Se inscrever e entrar," "Edição de perfil," e "Redefinição de senha".

Para configurar a política ""Se inscrever e entrar", siga estas etapas.

Selecione Novo fluxo do usuário, selecione Inscrever-se e entrar, selecione a guia Recomendado e selecione Criar.
Insira um nome para a política (por exemplo, B2C_1_SignInSignUp).
Na seção Provedores de Identidade, selecione os provedores de identidade para usar a política. Ao mínimo, Inscrição por email deve estar selecionado.
Na coluna Coletar atributo, marque as caixas de seleção Endereço de email, Nome fornecido e Sobrenome.
Na coluna Retornar reivindicação, marque as caixas de seleção Endereços de email, Nome fornecido, Provedor de identidade, Sobrenome e ID do objeto de usuário.
Selecione OK para criar a política.
Clique duas vezes no nome da política, e depois no painel de navegação, selecione Propriedades.
Defina a opção Habilitar layout de página garantindo JavaScript (visualização) como Ligado.

Observação

O nome da política será referenciado por completo no ambiente de comércio. (O prefixo B2C_1_ será incluído na referência). As políticas não podem ser renomeadas após serem criadas. Se você está substituindo uma política existente para seu ambiente de comércio, você pode excluir a política original e criar uma nova política que tem o mesmo nome. Alternativamente, se o ambiente já foi provisionado, você pode enviar o novo nome de política por meio de solicitação de serviço.

Você retornará a esta política para concluir a configuração depois de criar páginas personalizadas. Por hora, feche a política para retornar à página Fluxos de usuário (políticas) no portal do Azure.

Configurar a política "Edição de perfil"

Para configurar a política "Edição de perfil", siga as etapas a seguir.

Selecione Novo fluxo do usuário, selecione Edição de perfil, selecione a guia Recomendado e selecione Criar.
Insira um nome para a política (por exemplo, B2C_1_EditProfile).
Na seção Provedores de Identidade, selecione os provedores de identidade para usar a política. Ao mínimo, Inscrição de conta local deve estar selecionado.
Na coluna Coletar atributo, marque as caixas de seleção Nome Fornecido e Sobrenome.
Na coluna Retornar reivindicação, marque as caixas de seleção Endereços de email, Nome fornecido, Provedor de identidade, Sobrenome e ID do objeto de usuário.
Selecione OK para criar a política.
Clique duas vezes no nome da política, e depois no painel de navegação, selecione Propriedades.
Defina a opção Habilitar layout de página garantindo JavaScript (visualização) como Ligado.

Configurar a política "Redefinir senha"

Para configurar a política "Redefinir senha", siga as etapas a seguir.

Selecione Novo fluxo de usuário e selecione a opção Redefinição de senha, escolha a guia Recomendado e clique em Criar.
Insira um nome para a política (por exemplo, B2C_1_ForgetPassword).
Na seção Provedores de Identidade, selecione Redefinir senha usando endereço de email.
Na coluna Retornar reivindicação, marque as caixas de seleção Endereços de email, Nome fornecido, Sobrenome e ID do objeto de usuário.
Selecione OK para criar a política.
Clique duas vezes no nome da política, e depois no painel de navegação, selecione Propriedades.
Defina a opção Habilitar layout de página garantindo JavaScript (visualização) como Ligado.

Criar as páginas personalizadas

Os módulos Microsoft Entra dedicados são incluídos no Commerce para criar páginas personalizadas para políticas do usuário do Microsoft Entra B2C. As páginas podem ser criadas especificamente para o layout de cada página da política do usuário usando os principais módulos do Microsoft Entra B2C detalhados a seguir. Como alternativa, o módulo Genérico do Microsoft Entra pode ser usado para todos os layouts de página e políticas no Microsoft Entra ID B2C (mesmo para as opções de layout de página em políticas não listadas abaixo).

Os módulos específicos da página do Microsoft Entra são vinculados a itens de entrada de dados processados pelo Microsoft Entra ID B2C. Esses módulos fornecem mais controle sobre o posicionamento dos elementos em suas páginas. No entanto, mais páginas e extensões de módulo talvez precisem ser criadas para conta para variações além das configurações padrão descritas abaixo.
O módulo Genérico do Microsoft Entra cria o elemento "div" para que o Microsoft Entra B2C renderize todos os elementos no layout da página de política de usuário, proporcionando mais flexibilidade às funções B2C da página, mas menos controle do posicionamento e do estilo (embora CSS possa ser usado para corresponder à aparência do seu site).

Você pode criar uma única página com o módulo Genérico do Microsoft Entra e usá-la para todas as páginas de política de usuário ou pode criar páginas específicas usando os módulos individuais do Microsoft Entra para entrada, inscrição, edição de perfil, redefinição de senha e verificação de redefinição de senha. Você também pode usar uma combinação de ambos, usando as páginas específicas do Microsoft Entra para os layouts de página indicados abaixo e a página módulo genérico do Microsoft Entra para os layouts das página restantes nessas páginas ou em outras páginas de políticas de usuário.

Para saber mais sobre os Módulos do Microsoft Entra fornecidos com a biblioteca de módulos, leia mais em Páginas e módulos de gerenciamento de identidades.

Para criar as páginas personalizadas com módulos de identidade específicos para lidar com credenciais de usuários, siga estas etapas.

No construtor de sites do Commerce, navegue até o seu site.
Crie os cinco modelos e páginas a seguir (caso ainda não estejam presentes no site):
- Um modelo de Entrada e página que usa o módulo de entrada.
- Um modelo de Inscrição e página que usa o módulo de inscrição.
- Um modelo e a página para Redefinir senha que usa o módulo para redefinir senha.
- Um modelo e a página para Verificação para redefinir senha que usa o módulo de verificação para redefinir senha.
- Um modelo e página Edição de Perfil que usa o módulo de edição do perfil da conta.

Quando você cria páginas, siga estas diretrizes:

Para cada página ou módulo, use o layout e estilo que melhor atende aos seus requisitos de empresa.
Publicar todas as páginas e URLs que devem ser usadas na configuração do Microsoft Entra B2C.
Após as páginas e URLs serem publicadas, colete as URLs que devem ser usadas para configurações da política Microsoft Entra B2C. Um sufixo ?preloadscripts=true será adicionado a cada URL quando é usado.

Importante

As páginas criadas para serem referenciadas no Microsoft Entra B2C são servidas diretamente do domínio do locatário do Microsoft Entra B2C. Não reutilize cabeçalhos e rodapés universais com links relacionados. Como essas páginas estão hospedadas no domínio Microsoft Entra B2C quando são usadas, apenas URLs absolutas devem ser usadas para todos os links. É recomendável criar um cabeçalho e um rodapé específicos com URLs absolutas para suas páginas personalizadas relacionadas do Microsoft Entra, com todos os módulos específicos do Commerce que exigem conexão com o Retail Service removido. Por exemplo, os módulos favoritos, barra de pesquisa, link de entrada e carrinho não devem ser incluídos em páginas que serão usadas nos fluxos de usuário do Microsoft Entra B2C.

Configurar políticas Microsoft Entra B2C com informações de página personalizadas

No portal do Azure, volte à página do Microsoft Entra B2C e depois no menu, em Políticas, selecione Fluxos de usuário (políticas).

Para atualizar a política "Se inscrever e entrar" com informações de página personalizadas, siga estas etapas.

Na política Se inscrever e entrar que você configurou anteriormente, no painel de navegação, selecione Layouts de página.
Selecione o layout Unificar entrada ou inscrição na página.
Defina a opção Usar conteúdo de página personalizado como Sim.
No campo URL de página personalizada, insira a URL de entrada completa. Inclua o sufixo ?preloadscripts=true. Por exemplo, insira www.<my domain>.com/sign-in?preloadscripts=true.
No campo Versão de Layout de Página, selecione versão 2.1.0 ou posterior (requer biblioteca de módulos para versão 10.0.15 ou superior do Commerce).
Selecione Salvar.
Selecione o layout Página de inscrição de conta local.
Defina a opção Usar conteúdo de página personalizado como Sim.
No campo URL de página personalizada, insira a URL de entrada completa. Inclua o sufixo ?preloadscripts=true. Por exemplo, insira www.<my domain>.com/sign-up?preloadscripts=true.
No campo Versão de Layout de Página, selecione versão 2.1.0 ou posterior (requer biblioteca de módulos para versão 10.0.15 ou superior do Commerce).
Na seção Atributos de usuário, siga estas etapas:
1. Para os atributos Nome Fornecido e Sobrenome, selecione Não na coluna Requer Verificação.
2. Para o atributo Endereço de Email, é recomendável deixar o valor padrão Sim selecionado na coluna Requer Verificação. Esta opção garante que os usuários que se inscrevem em um determinado endereço de email verifique se eles possuem o endereço de email.
3. Para os atributos Endereço de Email, Nome Fornecido e Sobrenome, selecione Não na coluna Opcional.
Selecione Salvar.

Atualizar a política "Edição de perfil" com informações de página personalizadas

Para atualizar a política "Edição de perfil" com informações de página personalizadas, siga estas etapas.

Na política Edição de perfil que você configurou anteriormente, no painel de navegação, selecione Layouts de página.
Selecione o layout Página de edição do perfil (pode exigir a rolagem para baixo além das outras opções de layout, dependendo da tela).
Defina a opção Usar conteúdo de página personalizado como Sim.
No campo URL de página personalizada, insira a URL de edição de perfil completa. Inclua o sufixo ?preloadscripts=true. Por exemplo, insira www.<my domain>.com/profile-edit?preloadscripts=true.
Para Versão de Layout de Página, selecione versão 2.1.0 ou posterior (requer biblioteca de módulos para versão 10.0.15 ou superior do Commerce).
Na seção Atributos de usuário, siga estas etapas:
1. Para os atributos Nome e Sobrenome, selecione Não na coluna Opcional.
2. Para os atributos Nome Fornecido e Sobrenome, selecione Não na coluna Requer verificação.
Selecione Salvar.

Atualizar a política "Redefinir senha" com informações de página personalizadas

Para atualizar a política "Redefinir senha" com informações de página personalizadas, siga estas etapas.

Na política Redefinir senha que você configurou anteriormente, no painel de navegação, selecione Layouts de página.
Selecione o layout da página Esqueceu senha.
Defina a opção Usar conteúdo de página personalizado como Sim.
No campo URL de página personalizada, insira a URL de verificação redefinição de senha completa. Inclua o sufixo ?preloadscripts=true. Por exemplo, insira www.<my domain>.com/password-reset-verification?preloadscripts=true.
No campo Versão de Layout de Página, selecione versão 2.1.0 ou posterior (requer biblioteca de módulos para versão 10.0.15 ou superior do Commerce).
Selecione Salvar.
Selecione o layout da página Alterar senha.
Defina a opção Usar conteúdo de página personalizado como Sim.
No campo URL de página personalizada, insira a URL de redefinição de senha completa. Inclua o sufixo ?preloadscripts=true. Por exemplo, insira www.<my domain>.com/password-reset?preloadscripts=true.
No campo Versão de Layout de Página, selecione versão 2.1.0 ou posterior (requer biblioteca de módulos para versão 10.0.15 ou superior do Commerce).
Selecione Salvar.

Personalizar caracteres de texto padrão e rótulos para descrições

Na biblioteca de módulos, os módulos de entrada são previamente preenchidos com caracteres de texto padrão para os rótulos e descrições. Você pode personalizar as cadeias de caracteres no painel de propriedades do módulo no qual está trabalhando. As cadeias de caracteres adicionais na página (como o link de Esqueceu a senha? ou o texto de chamada à ação Criar uma conta) exigirão o uso do kit de desenvolvimento de software (SDK) do Commerce e a atualização dos valores no arquivo global.json para o módulo de entrada.

Por exemplo, o texto padrão para o link de senha esquecida é Esqueceu a senha?. A seguir veja um texto padrão na página de entrada.

Texto padrão para o link de senha esquecida na página de entrada.

No entanto, no arquivo global.json para o módulo de entrada da biblioteca de módulos, você pode editar o texto para Esqueceu a senha?, conforme mostrado na ilustração a seguir.

Texto de link atualizado no arquivo global.json do módulo de entrada.

Depois de atualizar o arquivo global.json e publicar suas alterações, o novo texto de link será exibido no módulo de entrada no Commerce e na página de entrada ativa.