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

1 TwitterID連携の利用設定をする

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

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

APIキーを取得するには、まず開発者アカウントを登録する必要があります。 以下の流れは、初めて開発者登録する方向けの手順です。


開発者プラットフォームは英文になっています。日本語に翻訳するブラウザ機能などを活用しましょう。

■ Twitterにログインします

Twitterにログインします。必要に応じて、開発者登録用のTwitterアカウントを新規作成してからログインしてください。
アカウントの作成方法については、 サービス提供元にご確認ください。
Twitter:https://twitter.com/

■開発者ポータルにアクセスします


下記URLよりTwitterの開発者プラットフォームを開いてください。
https://developer.twitter.com/ja
  1. 画面右上の「開発者ポータル」をクリックします。
  2. 画面下部の「Sign for Free Account」をクリックします。

■TwitterAPIの用途を説明し、必要事項に同意します

  1. Twitter APIの用途について英文250文字以上で説明します。


    日本語で文章を作成してからGoogle翻訳し、英文で入力しましょう。
    以下は、翻訳前と翻訳後の例文です。

    ■翻訳前
    私たちのサービスの目的は、ユーザーが私たちが運営しているネットショップに簡単にログインできるようにすることです。パスワードを忘れてもツイッターでログインできることでお買い物が便利になり、私たちの顧客により良いユーザー体験を提供します。

    ■翻訳後
    The purpose of our service is to allow users to easily log in to the netshops we operate. Even if you forget your password, logging in with Twitter makes shopping convenient and gives our customers a better user experience.

  2. 3つすべてにチェックします。
  3. 「submit」をクリックします。
    画面遷移し、ダッシュボードが表示されます。

■「API Key」と「API Secret Key」を確認します

  1. 左サイドメニューの「Project &Apps」から該当のappnameをクリックします。
  2. メインエリア上部の「Keys and tokens」をクリックします。
  3. 「REgenerate」をクリックします。
  4. 開いた画面で「Yes,regenerate」をクリックします。
  5. 表示された「API Key」と「API Secret Key」をそれぞれ控えます。
    後ほどショップサーブの管理画面に設定します。次章の「1-3 Twitterで取得した情報をショップサーブに設定する」で詳しくご案内します。


    それぞれの右側にある「Copy」をクリックするとクリップボードにコピーされるので便利です。テキストエディタなどに貼り付けて保存してください。


    セキュリティ上の理由から、APIキーは1回しか確認できません。

1-2 Twitterのログイン認証を有効にする

■設定画面を開きます

  1. メインエリア画面上部の「Settings」をクリックします。
  2. 「Set up」をクリックします。

■必要事項を設定します

  1. App permissions(アプリの許可)
    ⇒「 Read (読む) 」を選択します。
  2. Request email address from users (optional)
    ⇒プライバシーポリシーと利用規約のURLの提供を有効にします。
  3. Type of App
    ⇒「Web App,Automated App or Bot」を選択します。
  4. Callback URLs(コールバックURL)
    ショップサーブの管理画面に表示されているコールバックURLをすべて設定します。


    「+Add another (追加する)」をクリックして入力枠を追加します。スペースが入らないよう1行づつ、コピーしてURLを貼り付けましょう。

  5. Website URL(ウェブサイトのURL)
    お店のURLを入力します。
  6. Organization name(組織名) 
    組織名を英語で入力します。任意入力です。
  7. Organization URL(組織のURL) 
    組織のURLを入力します。任意入力です。
  8. Team of Service URL(利用規約URL)
    ご利用案内ページのURLを入力します。


    お客さんはマイページからTwitterID連携を解除できるなど、他サイトID連携の利用方法を追記してください。
    >>サンプルの文面

  9. Privacy policy URL(プライバシーポリシーのURL)
    個人情報保護取り扱いページのURL を入力します。
  10. すべて入力が完了したら「Save(設定を保存)」をクリックします。
    アプリの詳細設定の画面に戻ります。


    URLの各入力欄にスペースが入らないように入力してください。設定が保存できません。

■アプリの設定を保存します

再編集を行う場合は、「 Edit(編集する)」をクリックしてください。

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

ショップサーブの管理画面に、Twitter App情報の API Key API Secret Key を設定します。

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

■アプリ情報を設定する

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

■利用するに切り替える

5. Twitterを「利用する」に切り替えます。


6.  画面最下部の「設定を保存する」をクリックします。

2 カートの流れ

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


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

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

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

■商品をカートに入れる

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

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

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

■ログインを認証する

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


Googleアナリティクスをご利用の場合、参照元除外リストに Twitterログイン認証画面のドメイン(api.twitter.com)を追加してください。

■新規会員登録を完了する

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


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

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

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

■商品をカートに入れる

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


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

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


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

■ログインを認証する

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

■カート画面に戻る

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

3 TwitterとID連携する

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


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

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

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

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

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

■Twitter IDと連携する

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

4. Twitterアカウントでログインします。

Twitterアカウントでログインしてください。 Twitterのログイン認証画面が表示されたら「 連携アプリ認証 」ボタンをクリックして認証を許可します。
5. マイページの画面に戻ると連携されています。
ID連携は、いつでも解除できます。

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

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

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

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

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

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