PWA Kitには、買い物客にソーシャルログインを使用するオプションが標準装備されています。この機能をProgressive Web App (PWA) Kitサイトに含めて、買い物客の体験を向上させます。ソーシャルログインを使用すると、買い物客はソーシャルネットワークアカウントを使用してサイトにすばやくログインし、プロフィールを作成できます。
デモサイトでは、ソーシャルログインのデフォルト実装を示しています。
PWA Kit サイトのソーシャル ログインを有効にして構成するには、このガイドの手順に従います。このガイドでは、URL がhttps://www.example.comであるサンプルのストアフロントを使用します。example.comをドメイン名に置き換えてください。
ソーシャルログインはハイブリッドストアフロントではサポートされていません。
Note
PWA Kit では、「サポートされている ID プロバイダー」に記載されている ID プロバイダー (IdP) がサポートされています。
前提条件を満たしている場合、Google と Apple のソーシャルログインはデフォルトで Retail React App で使用できます。
ソーシャルログインを使用するには:
/social-callbackを使用します。たとえば、ドメインがexample.comの場合は、「https://www.example.com/social-callback」と入力します。example.comを実際のドメインに置き換えてください。a.更新template-retail-react-app/config/default.js
PWA Kitプロジェクトでソーシャルログインを設定するには、次の例に示すようにtemplate-retail-react-app/config/default.jsを更新します。
PWA Kit プロジェクトで構成されているリダイレクト URI パスが、SLAS クライアントで構成されているパスと一致していることを確認します。SLAS クライアントは完全な URI にワイルドカードを使用できますが、パスは完全に一致する必要があります。
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.オプション: 環境変数を使用してリダイレクト URI を設定する
ソーシャル・ログインの環境変数の値は、template-retail-react-app/config/default.jsで追加した値をオーバーライドします。
Note
必要に応じて、template-retail-react-app/config/default.jsの代わりに環境変数を使用してリダイレクト URI を設定できます。template-retail-react-app/config/default.jsを使用してソーシャルログインを有効にし、IdP を設定します。この環境変数を構成して、リダイレクト URI を設定します。
SOCIAL_LOGIN_REDIRECT_URI
環境変数を参照してください。
デフォルトでは、PWA Kit はtemplate-retail-react-app/app/components/social-login/index.jsxファイルのSocialLoginコンポーネントに Google と Apple のソーシャルログインのアイコンをインポートして構成します。サイトでは、サポートされている他の IdPのアイコンを含めることができます。これを行うには、次の手順を実行します。
a.SocialLoginコンポーネントへのアイコンのインポート
この例では、Facebook アイコンをSocialLoginコンポーネントにインポートします。
1// Icons
2import {AppleIcon, GoogleIcon, FacebookIcon} from '@salesforce/retail-react-app/app/components/icons'b.IDP_CONFIGオブジェクトの拡張
SocialLoginコンポーネントのIDP_CONFIGオブジェクトを使用して、追加のソーシャルログイン用のボタンを、それぞれそれぞれのアイコンとローカライズされたメッセージとともに表示します。
この例では、Facebook の設定を追加します。各 IdP キーが、選択した IdP の小文字の名前と一致することを確認します。
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}loginMergeClaimsを設定する前と、買い物客がサイトにログインする前に両方のプロフィールが存在する場合、マージは実行されません。過去にさかのぼってアカウントを統合することはできません。Note
プロファイルの統合とサポートされているユースケースの詳細については、「買い物客のプロフィールをマージする」を参照してください。
このセクションでは、ソーシャルログインに関連して発生する可能性のあるいくつかの一般的なエラーに対して推奨される解決策を提供します。
**考えられる原因:**ソーシャルログイン設定が正しくありません。
推奨される解決策: PWA Kit プロジェクトで構成されているリダイレクト URI パスが、SLAS クライアントで構成されているパスと一致していることを確認します。「ソーシャルログインの設定」を参照してください。
**考えられる原因:**買い物客は、B2C Commerce とサードパーティ IdP 用に別々のプロフィールを持ちます。
推奨される解決策:「買い物客プロフィールの統合」の手順に従って、B2C Commerce とサードパーティ IdP に登録されている買い物客のレコードをマージします。
j