Implementar login sem senha

PWA Kit sai da caixa com a opção de usar login sem senha para seus compradores. Inclua esse recurso no site do seu Kit Progressive Web App (PWA) para melhorar a experiência do comprador. Com o logon sem senha, os compradores podem fazer logon com segurança no seu site usando um código de verificação ou um link em um e-mail ou texto em vez de uma senha.

Nosso site de demonstração mostra a implementação padrão de login sem senha.

Para habilitar e configurar o logon sem senha para seu site PWA Kit, siga as etapas neste guia. Ao longo deste guia, usamos um exemplo de vitrine com o URL: https://www.example.com. Substitua pelo example.com seu nome de domínio.

O login sem senha não é suportado em vitrines híbridas.

Para usar o login sem senha:

  • Crie seu site usando o Composable Storefront e Retail React App versão 6.0 ou posterior.
  • Configure um cliente privado de Shopper Login e Acesso à API (SLAS). Para obter as informações específicas envolvidas na configuração de um cliente privado SLAS para logon sem senha, consulte Configurar logon sem senha.

Há três etapas de configuração.

  1. Configurar o URL de retorno de chamada
  2. Coloque o URL de retorno de chamada na allowlist
  3. Concluir a configuração em seu projeto PWA Kit
  • Os compradores devem fazer login em seu site com seu nome de usuário e senha pelo menos uma vez antes de poderem usar o login sem senha.
  • Ao contrário do campo URL de redirecionamento, o campo URL de retorno de chamada não é compatível com curingas. Sempre inclua o URL completo de um retorno de chamada, incluindo o protocolo.

Forneça um URL de retorno de chamada para SLAS. Dessa forma, SLAS pode enviar a esse URL todas as informações que seu site precisa para criar um token de login (código de verificação ou um link em um e-mail ou texto) para um comprador. Para obter mais informações básicas, consulte Logon sem senha com SLAS e Logon sem senha com SMS.

SLAS faz uma solicitação HTTP POST para o URL de retorno de chamada para encaminhar as credenciais do comprador para um destino de sua escolha, geralmente um provedor de serviços de e-mail ou marketing. Por padrão, o PWA Kit gera um link seguro e usa o Salesforce Marketing Cloud para encaminhar o link em um e-mail. Para personalizar essa funcionalidade, descreva o mecanismo que você deseja usar para garantir que os compradores obtenham o token sem senha de oito dígitos gerado por SLAS.

Estas são três opções possíveis para descrever o mecanismo para fornecer uma URL de retorno de chamada para SLAS. Eles são descritos em detalhes abaixo.

  • a. Usar um URL de retorno de chamada externo
  • b. Usar uma integração do Marketing Cloud
  • c. Usar um ponto de extremidade POST personalizado em seu projeto PWA Kit

a. Usar um URL de retorno de chamada externo

  • Forneça qualquer URL de retorno de chamada externo acessível publicamente que possa processar a entrega do token usando o e-mail do comprador.

    Exemplos desse URL de retorno de chamada são uma instância do B2C Commerce, um ambiente de tempo de execução gerenciado ou seu próprio servidor.

  • Configure um SLAS Private Client. No campo URL de retorno de chamada, insira seu URL de retorno de chamada acessível publicamente.

ou

b. Usar uma integração do Marketing Cloud

Se você tiver uma licença do Marketing Cloud, poderá enviar o token por e-mail ou texto (dependendo dos termos do contrato). Esta é a implementação padrão incluída no PWA Kit.

Pré-requisitos

Para ver todos os pré-requisitos e etapas que se aplicam ao uso de uma integração com o Marketing Cloud, consulte estes guias.

Configure sua integração

Para obter os valores de configuração do Marketing Cloud abaixo, consulte Criar uma integração de API OAuth 2.0.

  • Defina essas variáveis de ambiente no Managed Runtime.

    • MARKETING_CLOUD_CLIENT_ID para seu ID de cliente do Marketing Cloud
    • MARKETING_CLOUD_CLIENT_SECRET para o segredo do seu cliente do Marketing Cloud
    • MARKETING_CLOUD_SUBDOMAIN para seu subdomínio do Marketing Cloud
    • MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE à chave de definição de evento exclusiva para o evento da API transacional anexada ao modelo de e-mail armazenado no Marketing Cloud.

    Consulte Variáveis de ambiente.

  • Configure o URL de retorno de chamada completo em seu SLAS Client. Por exemplo, https://example.com/passwordless-login-callback. Consulte Configurar um cliente SLAS privado.

Se você quiser personalizar o caminho de retorno de chamada do , atualize-o também no ssr.js local onde o ponto de /passwordless-login-callback extremidade POST está configurado. Ver opção c. Use um ponto de extremidade POST personalizado em seu projeto PWA Kit abaixo.

ou

c. Usar um ponto de extremidade POST personalizado em seu projeto PWA Kit

  • Configure um ponto de extremidade POST personalizado para app/ssr.js lidar com a entrega de token usando a opção escolhida: e-mail ou texto. Veja esta implementação do Marketing Cloud como app/ssr.js exemplo.
  • Configure um SLAS Private Client. No campo URL de retorno de chamada, insira o URL de retorno de chamada que você configurou em seu endpoint POST personalizado.

Para qualquer uma das três opções de URL de retorno de chamada, verifique se o URL de retorno de chamada que você configurou está na lista de permissões no Callback URL campo do cliente SLAS que você está usando. Para fazer isso:

  • Acesse SLAS interface do usuário do administrador: Faça login na instância do seu Salesforce B2C Commerce e vá para a seção SLAS Admin.
  • Criar ou editar um cliente: Selecione seu cliente SLAS onde deseja gerenciar URLs de retorno de chamada.
  • Adicionar URLs permitidos: Na configuração do cliente, forneça uma lista dos URLs de retorno de chamada válidos para seu site.

a. Atualizar template-retail-react-app/config/default.js

Se você ainda não tiver feito isso, preencha os Pré-requisitos.

Para configurar o logon sem senha em seu projeto PWA Kit, atualize template-retail-react-app/config/default.js conforme mostrado neste exemplo.

Em seu projeto PWA Kit, use a URL de retorno de chamada que você configurou como parte dos pré-requisitos para atualizar template-retail-react-app/config/default.js da seguinte maneira.

b. Opcional: Usar uma variável de ambiente para definir o URL de retorno de chamada

O valor da variável de ambiente para logon sem senha substitui quaisquer valores adicionados no template-retail-react-app/config/default.js.

Opcionalmente, você pode definir a URL de retorno de chamada usando uma variável de ambiente em vez de template-retail-react-app/config/default.js. Use template-retail-react-app/config/default.js para habilitar o logon sem senha. Configure essa variável de ambiente para definir a URL de retorno de chamada.

PASSWORDLESS_LOGIN_CALLBACK_URI

Consulte Variáveis de ambiente.

  • Implemente o limite de taxa para evitar o abuso do recurso de login sem senha. Por exemplo, se você estiver usando CDN integrado (eCDN), poderá aplicar regras de limitação de taxa eCDN.
  • Use medidas de segurança robustas para proteger as contas dos compradores. Por exemplo, se você estiver usando uma rede de entrega de conteúdo (CDN) de terceiros, como o Cloudfare, poderá Bloquear solicitações por pontuação de ameaça.
  • Rastreie o uso das opções de autenticação pelo comprador e diagnostique problemas de forma eficiente. Por exemplo, use Log Center para acessar logs do Managed Runtime (MRT) e sua instância do B2C Commerce.

Esta seção fornece uma solução sugerida para um erro comum que você pode encontrar relacionado ao logon sem senha.

Causa potencial: O escopo ou URL de retorno de chamada está incorreto.

Solução sugerida: Verifique se o escopo e a URL de retorno de chamada estão configurados corretamente. Consulte Configurar um cliente SLAS privado.