2025.2.19公開:顧客に安心を、運営に効率を。スパム投稿や不正アクセスを防ぐことができるreCAPTCHAの魅力

Facebookアカウントでログインできるようにする - 他サイトID連携 -

1 Facebook ID連携の利用設定をする

Facebookアカウントを利用して、ショップサーブのお店でログインできるようにするには、Facebookの開発者ページで アプリID App Secret を取得してショップサーブに設定が必要です。 また、管理画面に表示されているコールバックURLをFacebookへ設定する必要があります。

1-1 Facebook開発者の登録をする

以下の流れは、初めて開発者登録をする方向けの手順です。

■ Facebookにログインをします

Facebookにログインしてください。
Facebookアカウントをお持ちでない場合、下記リンクより事前にアカウントを作成しログインしてください。
アカウントの作成方法やFacebookの詳しい操作方法については、 サービス提供元にご確認ください。
Facebook:https://www.facebook.com/

■開発者ページにアクセスします

下記URLより、開発者ページを開きます。

https://developers.facebook.com/apps/

  1. 上部メニューの「スタートガイド」をクリックします。
  1. 開発者ポリシーの内容を確認して、「次へ」ボタンをクリックします。

■認証コードを取得します

電話番号の認証が求められる場合は、以下の手順で認証を行ってください。

  1. 携帯電話番号を入力します。
  2. 「認証SMSを送信」ボタンをクリックします。
    SMS(ショートメール)に、認証コードが送信されます。
  3. 認証コード(数字6桁)を入力します。
  4. 「次へ」ボタンをクリックします。

■メールアドレスを確認します

  1. メールアドレスを確認します。
  2. Facebookと開発者アカウントのメールアドレスを同じでよい場合は、 そのまま「メールアドレスを認証」ボタンをクリックします。

■自分の職業を選択し登録を完了します

  1. あなたの職業に一番近いものを選択してください。
  2. 「登録完了」ボタンをクリックします。

    Facebook開発者として登録が完了します。

1-2 Facebookのアプリを作成する

「 Facebook for Developers へようこそ 」という画面が表示されますので、最初のアプリを作成していきます。

■アプリを作成します

  1. 「 アプリを作成 」ボタンをクリックします。

■アプリの用途を選択します

  1. 「 コネクテッドエクスペリエンスを構築」を選択します。
  2. 「 次へ 」ボタンをクリックします。

■アプリ情報を入力します

  1. アプリ名を入力します。
  2. メールアドレスを入力します。
  3. 「アプリを作成」ボタンをクリックします。

■セキュリティチェックをする

  1. 「私はロボットではありません」にチェックを入れます。
  2. 「送信」ボタンをクリックします。

    アプリの作成が完了します。

■アプリの基本設定を行います

サイドメニュー「 設定 > ベーシック 」をクリックします。
  1. アプリIDapp secret を確認しメモ帳で保存します。ショップサーブの管理画面への設定方法は、次項の「1-3」で詳しくご案内します。


    app secret は非表示になっていますので「表示」をクリックして確認します。Facebookアカウントのパスワードを求められますので認証してください。

  2. 各項目の設定を行います。
    表示名 入力されてます。変更可能です。
    ネームスペース 特に入力不要
    アプリドメイン お店のURL
    連絡先メールアドレス 入力されてます。変更可能です。
    プライバシーポリシーのURL 個人情報保護取り扱いページのURL
    利用規約のURL ご利用案内ページのURL
    他サイトID連携の利用方法を追記してください。
    >>サンプルの文面
    ユーザーデータ削除 「データの削除手順URL」を選択します。Facebookログイン連携をマイページで解除する方法を記載した、ご利用案内ページ等のURLを入力します。
    アプリアイコン Facebookログイン認証時にお客さんに表示されます。
    カテゴリ 「ショッピング」を選択
設定 >ベーシック

■プラットフォームを追加します

  1. 画面下部にある「+プラットフォームを追加」をクリックします。
  2. プラットフォームは「ウェブサイト」を選択します。
  3. 「サイトURL」は、お店のURLを入力します。
  4. 右下の「変更を保存」ボタンをクリックします。

■アプリに製品を追加します


ダッシュボードに戻り、アプリに製品を追加します。

Facebookログインの「設定」をクリックします。
サイドメニューのプロダクトに「Facebookログイン」が追加されます。

■Facebookログインの設定画面を開きます

サイドメニューの「 Facebookログイン > 設定 」をクリックします。


ここでは、クイックスタートは使用しません。

■コールバックURLを入力します

  1. Callback URL(コールバックURL)を入力します。
    ショップサーブの管理画面に表示されているコールバックURLをすべて入力します。


    独自ドメインを利用していない店舗さんは、「共通カートドメイン用」のみが表示されます。


    スペースが入らないよう1行づつ、コピーしてURLを貼り付けましょう。

  2. 「 変更を保存 」ボタンをクリックします。
Facebookログイン > 設定

■アプリを公開します

  1. 「開発中」モードをクリックします。

  2. 「モード切り替え」ボタンをクリックします。
    「ライブ」モードに切り替わり、アプリが公開されます。

1-3 Facebookで取得した情報をショップサーブに設定する

Facebookの アプリIDapp secret をショップサーブの管理画面に設定します。

■ショップサーブの管理画面を開きます

■アプリ ID と App Secretを設定します

  1. Facebookの「利用設定」をクリックします。
  2. Facebookの「 設定 >ベーシック 」から、アプリ IDApp Secretをコピーして、ショップサーブの管理画面に貼り付けます。
  3. 「設定を保存する」ボタンをクリックします。
  4. 「閉じる」ボタンをクリックします。

■利用するに切り替えます

  1. Facebookを「利用する」に切り替えます。
  2. 画面最下部の「設定を保存する」をクリックします。
 

2 カートでFacebookアカウントを使って会員ログインする

ショップサーブのお店の会員IDとFacebookアカウントを連携済のお客さんは、Facebookアカウントで会員ログインができます。ショップサーブのお店の会員ID・パスワードが入力不要なため、パスワードを忘れた場合でも仮パスワード発行手続きの手間がなくなります。


お気に入り登録時やLPカートでは利用できません。

■商品をカートに入れる

カート画面で購入手続きする時にFacebookでログインします。
  1. 「他サイトでログインは以下よりお進みください。」をクリックします。
    他サイトアカウントの一覧が下に開きます。
  2. 「Facebookでログイン」をクリックします。


「他サイトアカウントでログイン」はすでにID連携済のお客さんがクリックするボタンです。ID未連携のお客さんがクリックすると、エラーになりログインできません。マイページでID連携が必要です。

詳しくは、「3-1 マイページでID連携する」を参照してください。

■ログインを認証する

Facebookアカウントでログインしてください。 Facebookのログイン認証画面が表示されたら「 *****としてログイン 」ボタンをクリックします。

■カート画面に戻る

会員ログインした状態でカート画面に戻ります。

3 FacebookとID連携する

普段利用しているアカウントでログインができれば、お店に来店しやすくなりリピート購入につながります。
店舗さんは、すでにお店で会員登録しているお客さんに、会員IDとFacebookアカウントとの連携を促しましょう。

3-1 マイページでID連携する

会員のお客さんが購入手続きする時に、Facebookアカウントでログインできるようにするには、マイページでID連携が必要です。

■マイページでログインをする

  1. お店の会員IDとパスワードを入力してマイページでログインします。
  2. ログイン後、マイページトップ画面下部に移動し「 他サイトID連携 」のリンクをクリックします。

■Facebook IDと連携する

3.「連携する」ボタンをクリックします。
  Facebookのログイン画面が開きます。

4. Facebookアカウントでログインします。Facebookのログイン認証画面が表示されたら「 *****としてログイン 」ボタンをクリックします。

5. マイページの画面に戻ると連携されています。
  ID連携は、いつでも解除できます。

3-2 注文完了後にID連携する

注文完了したお客さんは、「他サイトアカウントで連携」からマイページでID連携ができます。

■会員が注文完了後にID連携する

  1. 注文完了画面で「Facebook で連携」をクリックします。
    マイページの他サイトID連携する画面が開きます。
  2. 「連携する」をクリックし、Facebookアカウントと連携完了します。

■注文完了後に 新規会員登録してID連携する

注文完了画面で会員登録したお客さんも、 会員登録後マイページでID連携ができます。
  1. 会員ID、パスワードなどの必須項目を入力後、会員規約に同意して「会員登録する」ボタンをクリックします。
  2. 会員登録完了画面で「Facebook で連携」をクリックします。
    マイページの他サイトID連携する画面が開きます。
  3. 「連携する」をクリックし、Facebookアカウントと連携完了します。
※2021年2月時点の開発者ページの操作マニュアルを掲載してます。サービス提供元が予告なく仕様変更する場合がございます。
  詳しくは、サービス提供元にご確認ください。なお、当社ではアプリの設定代行は行っておりません。