結論: Shopifyのお客様アカウントにFacebookログインを追加するには、管理画面の「設定」→「お客様アカウント」からFacebookとの接続を開始し、Meta for Developersのダッシュボードでアプリを作成してOAuthの設定をしたうえで、発行されたApp IDとApp secretを管理画面に登録します。最後に管理画面の「Facebookでサインイン」ページで「オンにする」をクリックすると、お客様がFacebookアカウントでサインインできるようになります。
この手順を終えると、ストアのサインイン画面に、Facebookでサインインするための選択肢が追加されます。Facebookログインと会員登録フォームを併用する設定は、Shop・Google・Facebookログインと会員登録フォームを併用する設定で説明しています。同じ仕組みでGoogleログインを設定する手順は、ShopifyでGoogleログインを設定する方法｜Google Cloudでの準備と手順で説明しており、FacebookとGoogleの両方を有効にして、お客様がどちらでもサインインできるようにすることもできます。
この記事の要点
- Facebookログインの有効化は、管理画面の「設定」→「お客様アカウント」の「認証」セクションから始める
- 設定の途中で、管理画面とMeta for Developersダッシュボードの間をブラウザタブで行き来し、リダイレクトURLやApp IDなどの値をコピーして貼り付ける
- Meta for Developers側では、アプリの作成、Facebookログインの利用ケースの追加、emailの権限の追加、リダイレクトURLとDeauthorize URLの登録までを行う
- ソーシャルログインを使用する際にShopifyに同期される顧客データはメールアドレスのみ
- 独自のIDプロバイダーをお客様アカウントに接続している場合は、ソーシャルログインの接続に外部のIDプロバイダーへの問い合わせが必要
Facebookログインを設定する前に確認することはありますか？
Facebookをお客様アカウントに接続するには、Meta Developerアカウントが必要です。設定はMeta for Developersダッシュボードと管理画面のタブを切り替えながら、タスクを順番に進めます。
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
Facebookログインの設定はどこから始めますか？
管理画面から「設定」→「お客様アカウント」に移動します。「認証」セクションで「管理」をクリックし、「Facebook」の横にある「接続」をクリックすると、「Facebookでサインイン」ページが開きます。
このページには、Meta for Developers側で貼り付ける値が表示されるため、別のタブで開いたままにしておきます。
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
Meta for Developersでアプリを作成し、利用ケースを設定するにはどうしますか？
別のブラウザタブでMeta for Developersダッシュボードに移動し、「ログイン」をクリックしてログインします（Meta Developerアカウントがない場合は、このログイン画面から新規作成します）。
「アプリ」をクリックし、「アプリを作成」をクリックします。「アプリ名」と「アプリの連絡先メールアドレス」のフィールドに入力して「次へ」をクリックします。「ユースケースの追加」ページで「Facebookログインでユーザーを認証してデータをリクエストする」を選択し、「次へ」をクリックします。「このアプリにリンクさせるビジネスポートフォリオ」ページでは、ビジネスポートフォリオを選択するか、「まだビジネスポートフォリオをリンクさせない。」を選択して「次へ」をクリックします。「公開の要件」ページと「概要」ページを確認し、「ダッシュボードに移動」をクリックします。
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
アプリの設定でemailの権限とURLはどう登録しますか？
Meta for Developersダッシュボードの「ユースケース」で「email」の権限を追加し、「設定」で、管理画面に表示されているリダイレクトURLとDeauthorize URLを登録します。
- 「ユースケース」をクリックし、「Facebookログインでユーザーを認証してデータをリクエストする」ユースケースの「カスタマイズ」をクリックする
- 「アクセス許可と機能」セクションの「email」の横にある「追加」をクリックする
- 「設定」をクリックし、「クライアントOAuth設定」に移動する
- 管理画面の「Facebookでサインイン」ページの「リダイレクトURL」セクションからURLをコピーし、「有効なOAuthリダイレクトURI」フィールドに貼り付ける。管理画面に複数のリダイレクトURLがある場合は、URLごとに繰り返す
- 管理画面の「Deauthorize URL」セクションからURLをコピーし、「Settings」ページの「Deauthorize callback URL」フィールドに貼り付けて、「Save changes」をクリックする
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
管理画面にApp IDとApp secretはどう設定しますか？
Meta for Developersダッシュボードの「App settings」→「Basic」にある「App ID」と「App secret」をコピーし、管理画面の「Facebookでサインイン」ページの「資格情報」セクションに貼り付けます。
- Meta for Developersダッシュボードで「App settings」→「Basic」をクリックする
- 「App ID」をコピーし、管理画面の「資格情報」セクションの「App ID」フィールドに貼り付ける
- 「App secret」の横にある「Show」をクリックしてコピーし、管理画面の「App secret」フィールドに貼り付けて「Save」をクリックする
- 管理画面で「変更を保存」をクリックする
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
設定したアプリはどう有効にしますか？
管理画面の「Facebookでサインイン」ページで「その他の操作」→「プレビュー」をクリックし、お客様がストアにサインインしていると想定してFacebook認証フローをテストします。問題がなければ「オンにする」をクリックします。
Facebookでサインインをオンにしたあとは、オンラインストアに移動し、Facebookを使用してお客様アカウントにサインインすることで、実際の顧客体験をテストできます。
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
Facebookログインを有効にすると、どの顧客情報が同期されますか？
Facebookログインを使っても、Shopifyに同期されるお客様のデータはメールアドレスだけです。ストアでは、FacebookログインとGoogleログインのように、複数のソーシャルログインを同時に有効にできます。
会員登録フォームで取得した誕生日・住所・同意情報の使い方は、会員登録で取得した誕生日・住所・同意情報の活用例7つで説明しています。
出典: Shopifyヘルプ「お客様アカウントのソーシャルログイン」
独自のIDプロバイダーを使っているストアでも設定できますか？
独自のIDプロバイダーをお客様アカウントに接続しているストアで、ソーシャルログインも接続するときは、外部のIDプロバイダーに問い合わせます。設定を始める前に、Facebookログインを追加できるかを確認します。
独自のIDプロバイダーとは、ストア独自のログイン認証をお客様アカウントに接続する仕組みです。
出典: Shopifyヘルプ「お客様アカウントのソーシャルログイン」
設定したあと、Facebookでサインインできるかはどう確認しますか？
Facebookでサインインをオンにしたあと、オンラインストアのサインイン画面を開き、Facebookを使用してお客様アカウントにサインインできるかを確認します。
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
設定を進める順番
Shopifyヘルプの手順では、Facebookログインの設定を次のタスクの順番で進めます。設定中は、Meta for Developersダッシュボードと管理画面のタブを切り替えながら、値をコピーして貼り付けます。
- Meta Developerアカウントを準備し、Meta for DevelopersダッシュボードとShopify管理画面の両方を同時に開く
- 管理画面の「設定」→「お客様アカウント」の「認証」セクションで「管理」をクリックし、「Facebook」の横の「接続」から「Facebookでサインイン」ページを開く
- 別のタブでMeta for Developersダッシュボードに移動し、「アプリ」→「アプリを作成」から、アプリ名と連絡先メールアドレスを入力してアプリを作成する
- 「ユースケースの追加」ページで「Facebookログインでユーザーを認証してデータをリクエストする」を選び、ビジネスポートフォリオの選択（または保留）を経て作成を終える
- 「ユースケース」の「カスタマイズ」から「アクセス許可と機能」セクションの「email」の横の「追加」をクリックする
- 管理画面の「リダイレクトURL」と「Deauthorize URL」をそれぞれコピーし、Meta for Developers側の「有効なOAuthリダイレクトURI」と「Deauthorize callback URL」に貼り付けて保存する
- Meta for Developersの「App settings」→「Basic」に表示されるApp IDとApp secretを、管理画面の「資格情報」セクションに貼り付けて保存する
- 管理画面の「プレビュー」でFacebook認証フローを確認する
- 確認が済んだら「オンにする」をクリックして有効にする
- オンラインストアのサインイン画面で、Facebookでサインインできるかを確認する
出典: Shopifyヘルプ「Facebookをお客様アカウントに接続する」
関連記事
よくある質問
Howdyは14日間無料で試せます
Facebookログインを有効にすると、お客様はFacebookアカウントでストアにサインインできるようになります。顧客メタフィールドの作成、会員登録フォームの項目設定、プロフィールページのブロック配置は、Howdyの専任チームが無料で代行します。
