ソーシャルログインの実装

PWA Kitには、買い物客にソーシャルログインを使用するオプションが標準装備されています。この機能をProgressive Web App (PWA) Kitサイトに含めて、買い物客の体験を向上させます。ソーシャルログインを使用すると、買い物客はソーシャルネットワークアカウントを使用してサイトにすばやくログインし、プロフィールを作成できます。

デモサイトでは、ソーシャルログインのデフォルト実装を示しています。

PWA Kit サイトのソーシャル ログインを有効にして構成するには、このガイドの手順に従います。このガイドでは、URL がhttps://www.example.comであるサンプルのストアフロントを使用します。example.comをドメイン名に置き換えてください。

ソーシャルログインはハイブリッドストアフロントではサポートされていません。

PWA Kit では、「サポートされている ID プロバイダー」に記載されている ID プロバイダー (IdP) がサポートされています。

前提条件を満たしている場合、Google と Apple のソーシャルログインはデフォルトで Retail React App で使用できます。

ソーシャルログインを使用するには:

  • Composable Storefront とRetail React Appバージョン 6.0 以降を使用してサイトを構築します。
  • 選択した IdP を追加するには、「ID プロバイダーの登録」の手順を実行します。
  • Shopper Login and API Access (SLAS) クライアントを構成します。クライアントの [Redirect URI (リダイレクト URI)] 項目に、ソーシャルログインフローで使用するリダイレクト URI を入力します。デフォルトでは、PWA Kit はパスとして/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 にワイルドカードを使用できますが、パスは完全に一致する必要があります。

b.オプション: 環境変数を使用してリダイレクト URI を設定する

ソーシャル・ログインの環境変数の値は、template-retail-react-app/config/default.jsで追加した値をオーバーライドします。

必要に応じて、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コンポーネントにインポートします。

b.IDP_CONFIGオブジェクトの拡張

SocialLoginコンポーネントのIDP_CONFIGオブジェクトを使用して、追加のソーシャルログイン用のボタンを、それぞれそれぞれのアイコンとローカライズされたメッセージとともに表示します。

この例では、Facebook の設定を追加します。各 IdP キーが、選択した IdP の小文字の名前と一致することを確認します。

  • セキュリティのベストプラクティスに従って、買い物客のアカウントを保護します。たとえば、次のようになります。
  • 買い物客による認証オプションの使用状況を追跡し、問題を効率的に診断します。たとえば、Log Centerを使用して、Managed Runtime (MRT) と B2C Commerce インスタンスからのログにアクセスします。
  • Shopper Login and API Access Service (SLAS) で買い物客プロフィールをマージすることで、B2C Commerce ID とサードパーティ IdP の両方を持つ買い物客が、重複するアカウントを作成することなくシームレスにログインできるようになります。
  • loginMergeClaimsを設定する前と、買い物客がサイトにログインする前に両方のプロフィールが存在する場合、マージは実行されません。過去にさかのぼってアカウントを統合することはできません。
  • 「買い物客プロフィールの統合」ガイドの手順は、B2C Commerce プロフィールとサードパーティ IdP のログイン ID が同じである買い物客に適用されます。

プロファイルの統合とサポートされているユースケースの詳細については、「買い物客のプロフィールをマージする」を参照してください。

このセクションでは、ソーシャルログインに関連して発生する可能性のあるいくつかの一般的なエラーに対して推奨される解決策を提供します。

**考えられる原因:**ソーシャルログイン設定が正しくありません。

推奨される解決策: PWA Kit プロジェクトで構成されているリダイレクト URI パスが、SLAS クライアントで構成されているパスと一致していることを確認します。「ソーシャルログインの設定」を参照してください。

**考えられる原因:**買い物客は、B2C Commerce とサードパーティ IdP 用に別々のプロフィールを持ちます。

推奨される解決策:「買い物客プロフィールの統合」の手順に従って、B2C Commerce とサードパーティ IdP に登録されている買い物客のレコードをマージします。