Implementar Login Social | Construir seu site | Composable Storefront

PWA Kit sai da caixa com a opção de usar o login social para seus compradores. Inclua o recurso no site do seu Kit Progressive Web App (PWA) para melhorar a experiência do comprador. Com o logon social, os compradores pode fazer logon rapidamente no seu site e criar perfis usando suas contas de rede social.

Nosso site de demonstração mostra a implementação padrão do login social.

Para habilitar e configurar o logon social 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 social não é suportado em vitrines híbridas.

PWA Kit oferece suporte aos provedores de identidade (IdPs) listados em Provedores de identidade com suporte.

Se você atender aos pré-requisitos, os logins sociais do Google e da Apple estarão disponíveis no Retail React App por padrão.

Para usar o login social:

Crie seu site usando o Composable Storefront e Retail React App versão 6.0 ou posterior.
Para adicionar o IdP escolhido, conclua as etapas em Registrando um provedor de identidade.
Configure um cliente de login do comprador e acesso à API (SLAS). No campo URI de redirecionamento do cliente, insira o URI de redirecionamento que você deseja usar no fluxo de logon social. Por padrão, PWA Kit usa /social-callback como caminho. Por exemplo, se o seu domínio for example.com, digite: https://www.example.com/social-callback. Substitua example.com pelo seu domínio real.

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

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

Certifique-se de que o caminho de URI de redirecionamento configurado em seu projeto PWA Kit corresponda ao caminho configurado em seu cliente SLAS. O cliente SLAS pode usar um curinga para o URI completo, mas os caminhos devem corresponder exatamente.

b. Opcional: Usar uma variável de ambiente para definir o URI de redirecionamento

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

Opcionalmente, você pode definir o URI de redirecionamento 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 login social e definir os IdPs. Configure essa variável de ambiente para definir o URI de redirecionamento.

SOCIAL_LOGIN_REDIRECT_URI

Consulte Variáveis de ambiente.

Por padrão, o PWA Kit importa e configura os ícones para os logins sociais do Google e da Apple no SocialLogin componente do template-retail-react-app/app/components/social-login/index.jsx arquivo. Em seu site, você pode incluir ícones para outros IdPs compatíveis. Para fazer isso, conclua estas etapas.

a. Importar ícones para o SocialLogin componente

Neste exemplo, importamos o ícone do Facebook para o SocialLogin componente.

b. Estender o IDP_CONFIG objeto

Use o IDP_CONFIG objeto no SocialLogin componente para exibir botões para seus logons sociais adicionais, cada um com seus respectivos ícones e mensagens localizadas.

Neste exemplo, adicionamos a configuração para o Facebook. Certifique-se de que cada chave IdP corresponda ao nome minúsculo do IdP escolhido.

Siga as práticas recomendadas de segurança para proteger as contas dos compradores. Por exemplo:
- Se você estiver usando CDN integrado (eCDN), poderá aplicar regras de limitação de taxa eCDN.
- 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.
Mescle perfis de compradores no Shopper Login and API Access Service (SLAS) para garantir que compradores com uma identidade do B2C Commerce e um IdP de terceiros possam fazer logon sem criar contas duplicadas.

:::observação

Se ambos os perfis existirem antes de você configurar loginMergeClaims e antes de um comprador fazer logon em seu site, nenhuma mesclagem será executada. As contas não podem ser mescladas retroativamente.
As etapas do guia Mesclar perfis de comprador se aplicam a compradores que têm o mesmo ID de login para seu perfil do B2C Commerce e um IdP de terceiros.

:::

Para obter mais detalhes sobre a mesclagem de perfis e os casos de uso compatíveis, consulte Mesclar perfis de compradores.

Esta seção fornece soluções sugeridas para alguns erros comuns que você pode encontrar relacionados ao logon social.

Causa potencial: A configuração de login social está incorreta.

Solução sugerida: Certifique-se de que o caminho de URI de redirecionamento configurado em seu projeto PWA Kit corresponda ao caminho configurado em seu cliente SLAS. Consulte Configurar login social.

Causa potencial: Os compradores têm perfis separados para o B2C Commerce e IdPs de terceiros.

Solução sugerida: Siga as etapas em Mesclar perfis de compradores para mesclar registros de compradores registrados no B2C Commerce e um IdP de terceiros.

Provedores de identidade SLAS