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

TOP > 設定 > 会員機能

１ Facebook ＩＤ連携の利用設定をする

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

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

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

■ Facebookにログインをします

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

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

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

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. アプリＩＤ と app secret を確認しメモ帳で保存します。ショップサーブの管理画面への設定方法は、次項の「1-3」で詳しくご案内します。


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

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

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

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

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


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

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

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

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


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

■コールバックＵＲＬを入力します

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


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


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

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

■アプリを公開します

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

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

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

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

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

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

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

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

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

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

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


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

■商品をカートに入れる

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


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

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

■ログインを認証する

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

■カート画面に戻る

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

３ FacebookとＩＤ連携する

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

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

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

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

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

■Facebook ＩＤと連携する

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

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

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

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

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

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

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

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

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