お客様アカウントのソーシャルログイン

お客様アカウントのデフォルトのパスワードレスログイン機能に加えて、Google や Facebook のアカウントを接続し、お客様がソーシャル資格情報を使用してログインできるようにすることができます。

お客様アカウントのソーシャルログインを有効にすると、使い慣れた認証方法を通じて、より迅速なログイン体験をお客様に提供できます。ストアでは、複数のソーシャルログイン方法を有効にすることができます。

独自の ID プロバイダーをお客様アカウントに接続しており、ソーシャルログインを接続する場合は、外部の ID プロバイダーに連絡する必要があります。

お客様アカウントにソーシャルログインを接続する際の注意事項

お客様アカウントにソーシャルログインを接続する際は、以下の注意事項を確認してください。

• お客様アカウントに接続するプロバイダーの開発者アカウントが必要です。
• ソーシャルログインを使用する際、Shopify に同期されるお客様のデータはメールアドレスのみです。

Google をお客様アカウントに接続する

Google をお客様アカウントに接続するには、以下のタスクを順番に完了する必要があります。

• ステップ 1：Shopify の管理画面で「Google でログイン」ページを開く
• ステップ 2：Google Cloud Console でアプリを作成する
• ステップ 3：Google Cloud Console でアプリの OAuth クライアントを設定する
• ステップ 4：Shopify の管理画面で資格情報を設定する
• ステップ 5：Google Cloud Console でアプリを公開する

設定中は、Google Cloud Console と Shopify の管理画面のブラウザタブを切り替える必要があります。Google をお客様アカウントに接続するには、Google Cloud アカウントを設定している必要があります。Google Cloud について詳しくは、Google のヘルプドキュメントを参照してください。

ステップ 1：Shopify の管理画面で「Google でログイン」ページを開く

1. 管理画面から、[設定] > [お客様アカウント] の順に移動します。

2. [認証] セクションで、[管理] をクリックします。

3. Google の横にある [接続] をクリックして、Google でログインページを開きます。

このページには、Google アプリの OAuth クライアントを設定する際にコピーして貼り付ける必要がある情報が含まれているため、別のブラウザタブで開いたままにしておきます。

ステップ 2：Google Cloud Console でアプリを作成する

1. 別のブラウザタブで、Google Cloud Console にログインします。
2. 既存のプロジェクトを選択するか、新しいプロジェクトを作成します。プロジェクトのダッシュボードにリダイレクトされます。
3. をクリックし、[API とサービス] > [認証情報] の順にクリックします。
4. [同意画面を設定] > [開始] の順にクリックします。
5. プロジェクトの OAuth 設定の詳細を完了します。
   1. オンラインストアの名前など、お客様が認識できるアプリ名を入力します。テクニカルサポート用のメールアドレスを入力し、[次へ] をクリックします。
   2. [対象ユーザー] セクションで [外部] を選択し、[次へ] をクリックします。
   3. プロジェクトに関する Google からの通知を受け取るための連絡先メールアドレスを入力し、[次へ] をクリックします。
   4. Google API サービスのユーザーデータポリシーに同意し、[続行] をクリックします。
   5. [作成] をクリックします。
6. 同意画面でお客様に表示されるアプリのポリシー情報を設定します。
   1. [ブランディング] をクリックします。
   2. [アプリのドメイン] セクションに、ホームページへのリンク、公開されているプライバシーポリシーへのリンク、利用規約へのリンクを追加します。ストアポリシーの作成について詳しくはこちらをご覧ください。

ステップ 3：Google Cloud Console でアプリの OAuth クライアントを設定する

このステップでは、Shopify の管理画面の Google でログインページの [設定手順] セクションから詳細をコピーし、Google Cloud Console タブの該当するフィールドに貼り付ける必要があります。

1. Google Cloud Console のプロジェクトのアプリで、[概要] をクリックします。
2. [指標] セクションで、[OAuth クライアントを作成] をクリックします。
3. OAuth クライアントの詳細を設定します。
   1. [アプリケーションの種類] ドロップダウンメニューから、[ウェブアプリケーション] を選択します。
   2. [名前] フィールドに名前を入力します。
4. アプリの [承認済みの JavaScript 生成元] を設定します。
5. [承認済みの JavaScript 生成元] セクションで、[+ URI を追加] をクリックします。
6. Shopify の管理画面の Google でログインページで、[承認済みの JavaScript 生成元] の値をコピーします。
7. Google Cloud Console で、その値を [URI 1] フィールドに貼り付けます。
8. Shopify の管理画面の [承認済みの JavaScript 生成元] セクションに複数の URI がある場合は、追加の URI フィールドに対してもこれらの手順を繰り返します。
9. アプリの [承認済みのリダイレクト URI] を設定します。
10. Google Cloud Console の [承認済みのリダイレクト URI] セクションで、[+ URI を追加] をクリックします。
11. Shopify の管理画面のブラウザタブで、[承認済みのリダイレクト URI] の値をコピーします。
12. Google Cloud Console に戻り、その値を [URI 1] フィールドに貼り付けます。
13. Shopify の管理画面の [承認済みのリダイレクト URI] セクションに複数の URI がある場合は、追加の URI フィールドに対してもこれらの手順を繰り返します。
14. Google Cloud Consoleで、作成 をクリックします。

Google Cloud ConsoleからShopifyの管理画面に情報をコピーして貼り付ける必要があるため、表示される OAuthクライアントを作成しました ダイアログは、ステップ4：Shopifyの管理画面で資格情報を設定する のために開いたままにしておきます。

ステップ4：Shopifyの管理画面で資格情報を設定する

1. Google Cloud Consoleの OAuthクライアントを作成しました ダイアログから、クライアントID をコピーします。
2. Shopifyの管理画面の Googleでサインイン ページにある 資格情報 セクションに、クライアントID を貼り付けます。
3. Google Cloud Consoleの OAuthクライアントを作成しました ダイアログから、クライアントシークレット をコピーします。
4. Shopifyの管理画面の Googleでサインイン ページにある 資格情報 セクションに、クライアントシークレット を貼り付けます。
5. Shopifyの管理画面の Googleでサインイン ページで、保存 をクリックします。

ステップ5：Google Cloud Consoleでアプリを公開する

1. Google Cloud Consoleのプロジェクトのアプリで、オーディエンス をクリックします。
2. アプリを公開 をクリックします。

Facebookをお客様アカウントに接続する

Facebookをお客様アカウントに接続するには、以下のタスクを順番に完了する必要があります。

• ステップ1：Shopifyの管理画面で「Facebookでサインイン」ページを開く
• ステップ2：Meta for Developersダッシュボードでアプリを作成する
• ステップ3：Metaアプリの設定を行う
• ステップ 4：Shopify の管理画面で資格情報を設定する
• ステップ5：「Facebookでサインイン」をテストして有効化する

設定中に、Meta for Developers ダッシュボードとShopifyの管理画面のブラウザタブを切り替える必要があります。Facebookをお客様アカウントに接続するには、Meta開発者アカウントが必要です。Meta開発者として登録する方法をご覧ください。

ステップ1：Shopifyの管理画面で「Facebookでサインイン」ページを開く

1. 管理画面から、[設定] > [お客様アカウント] の順に移動します。

2. [認証] セクションで、[管理] をクリックします。

3. Facebook の横にある 接続 をクリックして、Facebookでサインイン ページを開きます。

ステップ2：Meta for Developersダッシュボードでアプリを作成する

1. 別のブラウザタブで、Meta for Developers ダッシュボードに移動し、ログイン をクリックしてサインインします。Meta開発者アカウントを設定していない場合は、次のステップに進む前に、ログインページから新しいアカウントを作成する必要があります。
2. アプリ をクリックします。
3. アプリを作成 をクリックします。
4. アプリ名 と アプリの連絡先メールアドレス フィールドに入力し、次へ をクリックします。
5. ユースケースを追加 ページで、Facebookログインでユーザーを認証してデータをリクエストする を選択し、次へ をクリックします。
6. このアプリをどのビジネスポートフォリオに接続しますか ページで、ビジネスポートフォリオを選択するか、まだビジネスポートフォリオを接続しない を選択し、次へ をクリックします。
7. 公開要件 ページを確認し、次へ をクリックします。
8. 概要 ページを確認し、ダッシュボードに移動 をクリックします。

ステップ3：Metaアプリの設定を行う

1. アプリを作成したら、Meta for Developersダッシュボードで ユースケース をクリックします。
2. Facebookログインでユーザーを認証してデータをリクエストする のユースケースで、カスタマイズ をクリックします。
3. サインイン時にお客様情報が確実に取得されるようにするため、アクセス許可と機能 セクションの email の横にある 追加 をクリックします。
4. 設定 をクリックし、クライアントOAuth設定 に移動します。
5. Shopifyの管理画面の Facebookでサインイン ページで、リダイレクトURL セクションからリダイレクトURLをコピーします。
6. Meta for Developersダッシュボードの 設定 ページで、有効なOAuthリダイレクトURI フィールドにリダイレクトURLを貼り付けます。
7. Shopifyの管理画面の リダイレクトURL セクションに複数のリダイレクトURLがある場合は、追加のリダイレクトURLについてもこれらの手順を繰り返します。
8. Shopifyの管理画面の Facebookでサインイン ページで、承認解除URL セクションからURLをコピーします。
9. Meta for Developersダッシュボードの 設定 ページで、承認解除コールバックURL フィールドにURLを貼り付けます。
10. Meta for Developersダッシュボードの 設定 ページで、変更を保存 をクリックします。

ステップ4：Shopifyの管理画面で資格情報を設定する

1. ホーム アイコンをクリックしてMeta for Developersダッシュボードに戻り、アプリ設定 > ベーシック をクリックします。
2. Meta for Developersダッシュボードから アプリID をコピーします。
3. Shopifyの管理画面の Facebookでサインイン ページにある 資格情報 セクションの アプリID フィールドに、アプリIDを貼り付けます。
4. Meta for Developersダッシュボードで、App secret の横にある 表示 をクリックし、App secret をコピーします。
5. Shopifyの管理画面の Facebookでサインイン ページにある App secret フィールドにApp secretを貼り付け、保存 をクリックします。
6. Shopifyの管理画面で、変更を保存 をクリックします。

ステップ5：「Facebookでサインイン」をテストして有効化する

1. Shopifyの管理画面の Facebookでサインイン ページで、その他のアクション > プレビュー をクリックし、ストアにサインインするお客様としてFacebookの認証フローをテストします。
2. オンにする をクリックします。

「Facebookでサインイン」をオンにした後、オンラインストアに移動してFacebookでお客様アカウントにサインインし、顧客体験をテストできます。

Shopでサインイン

Shop Pay を有効にしている場合、お客様はShopの資格情報と保存済みのパスキーを使用してサインインできます。また、お客様は Shop Pay を使用してストアでチェックアウトした後、自動的にShopにサインインします。

お客様アカウントでは、「Shop でサインイン」が自動的に有効になります。ストアから削除するには、Shop Pay を無効にする必要があります。

ストアに「Shop でサインイン」ボタンを追加する方法については、こちらをご覧ください。

ソーシャルログインオプションの管理

連携しているソーシャルログイン方法は、編集、オフ、削除することができます。

ソーシャルログイン方法をオフにしたり削除したりした後も、中断を防ぐためにお客様のログイン状態は維持されます。ソーシャルログインのセッションは自然に、またはお客様がログアウトしたときに期限切れになります。

手順:

1. 管理画面から、[設定] > [お客様アカウント] の順に移動します。

2. [認証] セクションで、[管理] をクリックします。

3. 変更するログイン方法の横にある … メニューをクリックします。

4. 以下のいずれかの操作を行います。

   • ログインオプションを編集するには、管理をクリックし、編集する資格情報を更新します。
   • ログインオプションを削除せずにオフにするには、オフにするをクリックします。
   • ログインオプションを削除するには、削除をクリックしてから、ダイアログで削除をクリックします。

お客様アカウントのドメインを変更する際にソーシャルログインを更新する

お客様アカウントのドメインを別の URL に変更する予定がある場合は、Shopify で変更を行う前にソーシャルログインの設定を更新する必要があります。これにより、お客様は中断することなく引き続きログインできるようになります。

これらの手順は、Shopify でお客様アカウントの URL を shopify.com/1234567890/account などのレガシーの形式から新しいサブドメインの形式である account.your-store.com に更新する場合や、既存のサブドメインから別のサブドメインに更新する場合 (account.your-store.com を customers.your-store.com に更新するなど) に必要です。

新しいお客様アカウントのサブドメインをソーシャルプロバイダーに追加する

現在のドメインと並べて、ソーシャルプロバイダーの設定に新しいドメインを追加します。Shopify でお客様アカウントのドメインを変更し、お客様アカウントのログインとログアウトのプロセスが機能することを確認した後に、古いドメインのエントリーを削除できます。

有効にしているソーシャルログインオプションごとに、これらの手順を繰り返す必要があります。

手順: