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 カートの流れ

他サイトID連携を「利用する」に設定をすると、お客さんはカート画面やマイページで、他サイトIDで新規会員登録、および他サイトIDでログインができます。ここでは、Facebookアカウントで新規会員登録、およびログインするときのカートの流れを確認します。


他サイトID連携機能は、お気に入り登録時やLPカートでは利用できません。

2-1 Facebookアカウントで新規会員登録する

Facebookアカウントで新規会員登録を行うと、ショップサーブの会員IDと連携されます。
次回以降は、ショップサーブのお店に、Facebookアカウントを利用して簡単にログインができるようになります。

■商品をカートに入れる

商品をカートに入れて「会員登録して購入手続きへ進む」ボタンをクリックします。新規会員登録する画面を開きます。

■Facebookアカウントで新規会員登録する

Facebookでログインを行ってから新規会員登録をします。

  1. 「他サイトIDで新規会員登録」ボタンをクリックします。
  2. 「Facebookでログイン」ボタンをクリックします。

■ログインを認証する

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


Facebookのログイン認証画面は、Facebook通常ページのドメイン「facebook.com」 と同じです。そのため、Googleアナリティクスの参照元除外設定は推奨しません。除外設定すると「facebook.com」からの流入が全てわからなくなります。

■会員登録を完了する

ショップサーブの画面に戻り、新規会員登録をします。
  1. 必須項目を入力します。
    「メールアドレス」「お名前」の入力欄にFacebookアカウント登録情報が反映されています。反映された情報の編集もできます。
  2. 会員規約に同意します。
  3. 「会員登録する」ボタンをクリックします。
    次の確認画面で、確定して会員登録を完了してください。


カート画面で購入手続き時に会員登録が完了すると、ショップサーブのお店の会員IDとFacebookIDが自動連携されます。マイページで改めて連携する必要はありません。

2-2 Facebookアカウントで会員ログインする

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

■商品をカートに入れる

カート画面で購入手続きする時にFacebookでログインします。
  1. 「他サイトIDでログイン」ボタンをクリックします。
  2. 「Facebookでログイン」ボタンをクリックします。


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

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


カート画面の「他サイトIDでログイン」ボタンは、管理画面メニュー「 お店設定 > ショッピングカート > メッセージの編集 」で画像の変更もできます。

■ログインを認証する

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

■カート画面に戻る

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

3 FacebookとID連携する

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


他サイトIDで連携する方法は、2通りあります。
1、他サイトIDで新規会員登録する    2、マイページでID連携する

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

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

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

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

■Facebook IDと連携する

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

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

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

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

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

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

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

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

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