Social Login implementieren | Erstellen Sie Ihre Website | Composable Storefront

PWA Kit wird mit der Option geliefert, Social Login für Ihre Käufer zu verwenden. Fügen Sie die Funktion in Ihre Progressive Web App (PWA) Kit-Website ein, um das Einkaufserlebnis zu verbessern. Mit der Anmeldung über soziale Netzwerke können sich Käufer schnell bei Ihrer Website anmelden und Profile über ihre Konten in sozialen Netzwerken erstellen.

Unsere Demo-Site zeigt die Standardimplementierung von Social Login.

Führen Sie die Schritte in diesem Leitfaden aus, um die Anmeldung über soziale Netzwerke für Ihre PWA Kit-Website zu aktivieren und zu konfigurieren. In diesem Leitfaden verwenden wir eine Beispiel-Storefront mit der URL: https://www.example.com. Ersetzen Sie example.com durch Ihren Domainnamen.

Die Anmeldung über soziale Netzwerke wird in hybriden Storefronts nicht unterstützt.

Note

Unterstützte IdPs

PWA Kit unterstützt die Identitätsanbieter (IdPs), die unter Unterstützte Identitätsanbieter aufgeführt sind.

Wenn Sie die Voraussetzungen erfüllen, sind die Social Logins von Google und Apple standardmäßig in der Retail React App verfügbar.

Voraussetzungen

So verwenden Sie Social Login:

Erstellen Sie Ihre Website mit Composable Storefront und Retail React App Version 6.0 oder höher.
Um den von Ihnen gewählten IdP hinzuzufügen, führen Sie die Schritte unter Registrieren eines Identitätsanbieters aus.
Konfigurieren Sie einen SLAS-Client (Shopper Login and API Access). Geben Sie im Feld Umleitungs-URI Ihres Clients den Umleitungs-URI ein, den Sie im Social-Login-Ablauf verwenden möchten. Standardmäßig wird von PWA Kit als Pfad verwendet /social-callback. Wenn Ihre Domain beispielsweise ist example.com, geben Sie Folgendes ein: https://www.example.com/social-callback. Ersetzen Sie example.com durch Ihre tatsächliche Domain.

Konfigurieren von Social Login im PWA Kit

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

Um die Anmeldung über soziale Netzwerke in Ihrem PWA Kit-Projekt zu konfigurieren, aktualisieren template-retail-react-app/config/default.js Sie wie in diesem Beispiel gezeigt.

Stellen Sie sicher, dass der Umleitungs-URI-Pfad, der in Ihrem PWA Kit-Projekt konfiguriert ist, mit dem Pfad übereinstimmt, der in Ihrem SLAS-Client konfiguriert ist. Der SLAS-Client kann einen Platzhalter für den vollständigen URI verwenden, aber die Pfade müssen genau übereinstimmen.

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. Optional: Verwenden einer Umgebungsvariablen zum Festlegen des Umleitungs-URI

Der Wert der Umgebungsvariablen für die Anmeldung über soziale Netzwerke überschreibt alle Werte, die Sie in template-retail-react-app/config/default.jshinzugefügt haben.

Note

Optional können Sie den Umleitungs-URI mit einer Umgebungsvariablen anstelle von template-retail-react-app/config/default.jsfestlegen. Verwenden Sie diese Option template-retail-react-app/config/default.js, um die Anmeldung über soziale Netzwerke zu aktivieren und die IdPs festzulegen. Konfigurieren Sie diese Umgebungsvariable, um den Umleitungs-URI festzulegen.

SOCIAL_LOGIN_REDIRECT_URI

unter Environment Variables (Umgebungsvariablen).

Hinzufügen von Symbolen für unterstützte IdPs

Standardmäßig importiert und konfiguriert PWA Kit die Symbole für die Social-Media-Anmeldungen von Google und Apple in der SocialLogin Komponente in der template-retail-react-app/app/components/social-login/index.jsx Datei. Auf Ihrer Website können Sie Symbole für andere unterstützte IdPs einfügen. Führen Sie dazu die folgenden Schritte aus.

a. Importieren von Symbolen in die SocialLogin Komponente

In diesem Beispiel importieren wir das Facebook-Symbol in die SocialLogin Komponente.

1// Icons
2import {AppleIcon, GoogleIcon, FacebookIcon} from '@salesforce/retail-react-app/app/components/icons'

b. Erweitern des Objekts IDP_CONFIG

Verwenden Sie das IDP_CONFIG Objekt in der SocialLogin Komponente, um Schaltflächen für Ihre zusätzlichen Social-Media-Logins anzuzeigen, jeweils mit ihren jeweiligen Symbolen und lokalisierten Nachrichten.

In diesem Beispiel fügen wir die Konfiguration für Facebook hinzu. Stellen Sie sicher, dass jeder IdP-Schlüssel mit dem Kleinbuchstaben des von Ihnen gewählten IdP übereinstimmt.

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}

Best Practices für Social Login

Befolgen Sie Best Practices für die Sicherheit, um Käuferkonten zu schützen. Beispiel:
- Wenn Sie ein eingebettetes CDN (eCDN) verwenden, können Sie eCDN-Ratenbegrenzungsregeln anwenden.
- Wenn Sie ein Content Delivery Network (CDN) eines Drittanbieters wie Cloudfare verwenden, können Sie Anfragen nach Bedrohungsbewertung blockieren.
Verfolgen Sie die Nutzung von Authentifizierungsoptionen durch Kunden und diagnostizieren Sie Probleme effizient. Verwenden Sie z. B. Log Center, um auf Protokolle von Managed Runtime (MRT) und Ihrer B2C Commerce-Instanz zuzugreifen.
Führen Sie Käuferprofile in Shopper Login und API Access Service (SLAS) zusammen, um sicherzustellen, dass Käufer mit einer B2C Commerce-Identität und einem Drittanbieter-IdP sich nahtlos anmelden können, ohne doppelte Konten zu erstellen.

Wenn beide Profile vor der Konfiguration und vor der Anmeldung loginMergeClaims eines Käufers auf Ihrer Website vorhanden sind, wird keine Zusammenführung durchgeführt. Konten können nicht rückwirkend zusammengeführt werden.
Die Schritte im Leitfaden zum Zusammenführen von Käuferprofilen gelten für Käufer, die dieselbe Anmelde-ID für ihr B2C Commerce-Profil und einen Drittanbieter-IdP haben.

Weitere Informationen zum Zusammenführen von Profilen und den unterstützten Anwendungsfällen finden Sie unter Zusammenführen von Shopper-Profilen.

Fehlerbehebung bei der Anmeldung in sozialen Netzwerken

In diesem Abschnitt finden Sie Lösungsvorschläge für einige häufige Fehler, die im Zusammenhang mit der Anmeldung in sozialen Netzwerken auftreten können.

Käufer können sich nicht anmelden

Mögliche Ursache: Die Konfiguration der Anmeldung über soziale Netzwerke ist falsch.

Vorgeschlagene Lösung: Stellen Sie sicher, dass der Umleitungs-URI-Pfad, der in Ihrem PWA Kit-Projekt konfiguriert ist, mit dem Pfad übereinstimmt, der in Ihrem SLAS-Client konfiguriert ist. Siehe Konfigurieren von Social Login.

Konflikte mit Käuferprofilen treten auf

Mögliche Ursache: Käufer haben separate Profile für B2C Commerce und IdPs von Drittanbietern.

Vorgeschlagene Lösung: Führen Sie die Schritte unter Zusammenführen von Käuferprofilen aus, um Datensätze für Käufer zusammenzuführen, die bei B2C Commerce und einem Drittanbieter-IdP registriert sind.

Siehe ebenfalls

SLAS-Identitätsanbieter