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.
Note
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:
/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.
1module.exports = {
2 app: {
3 login: {
4 social: {
5
6 // Enable social login and add your chosen IdPs and Redirect URI.
7 enabled: true,
8 idps: ['Google', 'Apple'],
9 redirectURI: '/social-callback' // relative path
10 }
11 // More code here...
12
13 sites,
14 commerceAPI: {
15 proxyPath: `/mobify/proxy/api`,
16 parameters: {
17
18 // Add your clientId, organizationId, short code, and siteId.
19 clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
20 organizationId: 'f_ecom_zzrf_001',
21 shortCode: '8o7m175y',
22 siteId: 'RefArchGlobal'
23 }
24
25 // More code here...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.
Note
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.
1// Icons
2import {AppleIcon, GoogleIcon, FacebookIcon} from '@salesforce/retail-react-app/app/components/icons'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.
1const IDP_CONFIG = {
2 apple: {
3 icon: AppleIcon,
4 message: defineMessage({
5 id: 'login_form.button.apple',
6 defaultMessage: 'Apple'
7 })
8 },
9 google: {
10 icon: GoogleIcon,
11 message: defineMessage({
12 id: 'login_form.button.google',
13 defaultMessage: 'Google'
14 })
15 },
16 facebook: {
17 icon: FacebookIcon,
18 message: defineMessage({
19 id: 'login_form.button.facebook',
20 defaultMessage: 'Facebook'
21 })
22 }
23}:::observação
loginMergeClaims e antes de um comprador fazer logon em seu site, nenhuma mesclagem será executada. As contas não podem ser mescladas retroativamente.:::
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.
j