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.
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.
Configurare l'accesso social in PWA Kit
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.
1module.exports = {2 app:{3 login:{4 social:{56 // Enable social login and add your chosen IdPs and Redirect URI.7 enabled: true,8 idps:['Google', 'Apple'],9 redirectURI: '/social-callback' // relative path10}11 // More code here...1213 sites,14 commerceAPI:{15 proxyPath: `/mobify/proxy/api`,16 parameters:{1718 // 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}2425 // More code here...
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.
Note
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.
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.
Utilizzare l’oggetto IDP_CONFIGSocialLogin 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.
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.
Risoluzione dei problemi relativi all'accesso tramite social network
In questa sezione vengono suggerite soluzioni per alcuni errori comuni che possono verificarsi in relazione all’accesso tramite social network.
Gli acquirenti non riescono ad accedere
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.
Si verificano conflitti tra i profili degli acquirenti
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.
j