Implementa l'accesso social

PWA Kit è pronto all'uso con la possibilità di utilizzare l'accesso social per i tuoi acquirenti. Includere questa funzionalità nel sito del kit Progressive Web App (PWA) per migliorare l'esperienza degli acquirenti. Con la procedura di accesso tramite social, gli acquirenti possono accedere rapidamente al sito e creare profili utilizzando i propri account di social network.

Il nostro sito demo mostra l'implementazione predefinita del social login.

Per abilitare e configurare l'accesso social per il tuo sito PWA Kit, segui i passaggi descritti in questa guida. In questa guida viene utilizzato un esempio di storefront con l'URL: https://www.example.com. Sostituisci example.com con il tuo nome di dominio.

L'accesso tramite social network non è supportato negli storefront ibridi.

PWA Kit supporta i provider di identità (IdP) elencati in Provider di identità supportati.

Se soddisfi i prerequisiti, gli accessi social di Google e Apple sono disponibili nella Retail React App per impostazione predefinita.

Per utilizzare l'accesso social:

  • Crea il tuo sito utilizzando Composable Storefront e Retail React App versione 6.0 o successiva.
  • Per aggiungere l'IdP scelto, completare la procedura descritta in Registrazione di un provider di identità.
  • Configurare un client SLAS (Shopper Login and API Access). Nel campo URI di reindirizzamento del cliente, immettere l'URI di reindirizzamento che si desidera utilizzare nel flusso di accesso social. Per impostazione predefinita, PWA Kit viene utilizzato /social-callback come percorso. Ad esempio, se il dominio è example.com, inserire: https://www.example.com/social-callback. Sostituisci example.com con il tuo dominio effettivo.

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

Per configurare l'accesso social nel progetto PWA Kit, aggiorna template-retail-react-app/config/default.js come mostrato in questo esempio.

Verificare che il percorso dell'URI di reindirizzamento configurato nel progetto PWA Kit corrisponda al percorso configurato nel client SLAS. Il client SLAS può utilizzare un carattere jolly per l'URI completo, ma i percorsi devono corrispondere esattamente.

b. Facoltativo: Utilizzare una variabile di ambiente per impostare l'URI di reindirizzamento

Il valore della variabile di ambiente per l'accesso social sostituisce tutti i valori aggiunti in template-retail-react-app/config/default.js.

Facoltativamente, è possibile impostare l'URI di reindirizzamento utilizzando una variabile di template-retail-react-app/config/default.jsambiente anziché . Da utilizzare template-retail-react-app/config/default.js per abilitare l'accesso social e impostare gli IdP. Configurare questa variabile di ambiente per impostare l'URI di reindirizzamento.

SOCIAL_LOGIN_REDIRECT_URI

Vedere Variabili di ambiente.

Per impostazione predefinita, PWA Kit importa e configura le icone per gli accessi social di Google e Apple nel componente nel SocialLogin file template-retail-react-app/app/components/social-login/index.jsx. Sul tuo sito puoi includere icone per altri IdP supportati. A tale scopo, completare questi passaggi.

a. Importazione di icone nel SocialLogin componente

In questo esempio, importiamo l'icona di Facebook nel SocialLogin componente.

b. Estendi l'oggetto IDP_CONFIG

Utilizzare l'oggetto IDP_CONFIG SocialLogin nel componente per visualizzare i pulsanti per gli accessi social aggiuntivi, ciascuno con le rispettive icone e messaggi localizzati.

In questo esempio, aggiungiamo la configurazione per Facebook. Assicurati che ogni chiave IdP corrisponda al nome minuscolo dell'IdP scelto.

  • Seguire le best practice di sicurezza per proteggere gli account degli acquirenti. Ad esempio:
  • Monitora l'utilizzo delle opzioni di autenticazione da parte degli acquirenti e diagnostica i problemi in modo efficiente. Ad esempio, utilizzare Log Center per accedere ai registri da Managed Runtime (MRT) e dall'istanza di B2C Commerce.
  • Unisci i profili degli acquirenti in Shopper Login and API Access Service (SLAS) per assicurarti che gli acquirenti con un'identità B2C Commerce e un IdP di terze parti possano accedere senza problemi senza creare account duplicati.
  • Se entrambi i profili esistono prima della configurazione loginMergeClaims e prima che un acquirente abbia eseguito l'accesso al sito, l'unione non viene eseguita. Gli account non possono essere uniti retroattivamente.
  • I passaggi descritti nella guida Unisci profili acquirente si applicano agli acquirenti che dispongono dello stesso ID di accesso per il proprio profilo B2C Commerce e di un IdP di terze parti.

Per ulteriori dettagli sull'unione dei profili e sui casi d'uso supportati, vedere Unione dei profili acquirente.

In questa sezione vengono suggerite soluzioni per alcuni errori comuni che possono verificarsi in relazione all'accesso tramite social network.

Causa potenziale: La configurazione dell'accesso social non è corretta.

Soluzione suggerita: Verificare che il percorso dell'URI di reindirizzamento configurato nel progetto PWA Kit corrisponda al percorso configurato nel client SLAS. Vedere Configurare l'accesso tramite social networking.

Causa potenziale: Gli acquirenti hanno profili separati per B2C Commerce e per gli IdP di terze parti.

Soluzione suggerita: Seguire la procedura descritta in Unione dei profili degli acquirenti per unire i record degli acquirenti registrati con B2C Commerce e un IdP di terze parti.