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

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

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

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

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

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

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

https://developers.line.biz/ja/services/line-login/


LINEログイン「 今すぐはじめよう」をクリックします。

■LINEアカウントでログインします

LINEアカウント または、ビジネスアカウントでログインして、
開発者ページにアクセスします。


アカウントをお持ちでない場合、アカウントを作成して下さい。

■開発者アカウントを作成します

LINEアカウントでログインすると開発者ページが開きます。
初回ログイン時のみ開発者登録が必要です。

  1. 開発者名を入力します。
  2. メールアドレスを入力します。
  3. LINE開発者契約の内容に同意してチェックを入れます。
  4. 「アカウントを作成」ボタンをクリックします。

    開発者アカウントの作成が完了します。

1-2 LINEログインのチャネルを作成する

新規プロバイダーを作成し、LINEログインのチャネルを作成します。

■新規プロバイダー作成します

  1. プロバイダー
    プルダウンメニューで 「新規プロバイダー作成」を選択します。
  2. プロバイダー名
    プロバイダーとは、アプリのサービス提供者(店舗さん)のことです。
    ご自分の名前や貴社名を入力してください。
  1. チャネルアイコン(任意)
    お店のアイコンを登録します。
  2. チャネル名
    お店の名前を入力します。
  3. チャネルの説明
    お店の説明を入力します。
  4. アプリタイプ
    「ウェブアプリ」にチェックを入れます。

  5. LINEでログインした時に、お店のアイコン画像や名前はLINEの認証画面に表示されます。

  1. メールアドレス
    お店のメールアドレスを入力します。
  2. プライバシーポリシーURL(任意)
    「個人情報の取り扱いについて」のページURLを入力します。
  3. サービス利用規約URL(任意)
    「特定商取引法の表示」のページURLを入力します。
  4. LINE開発者契約の内容に同意します。
  5. 「作成」ボタンをクリックします。
     
     チャネルの作成が完了します。

■チャネルID と チャネルシークレットを確認します

  1. チャネル ID をコピーして、メモ帳に保存しておきましょう。
  2. チャネルシークレットをコピーして、メモ帳に保存しておきましょう。

    チャネルID と チャネルシークレットは、ショップサーブの管理画面へ設定します。詳しくは、後述する「1-3」を参照してください。

  3. メールアドレス取得権限を申請します。
    詳しくは、後述する「1-4」を参照してください。

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

  1. 「 LINEログイン設定 」のタブをクリックします
  2. コールバックURLを入力します。
    「編集」ボタンをクリックすると入力欄が表示されます。ショップサーブの管理画面に表示されているコールバックURLをすべて入力します。


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


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

  3. 「更新」ボタンをクリックします。

■アプリを公開します

  1. 「 非公開 」をクリックすると、ポップアップウィンドウが開きます。
  2. 注意事項を読み、「 公開 」をクリックし切り替えます。
  3. ステータスが「 公開済み 」に切り替わります。


LINEログインは「公開済み」から「非公開」にできません。
チャネルとプロバイダーは削除できます。

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

チャネル IDチャネルシークレット をショップサーブの管理画面に設定します。

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

■チャネル ID とチャネルシークレットを設定します

  1. LINEの「利用設定」をクリックします。
  2. LINEのチャネル基本設定画面から、チャネル IDチャネルシークレット をコピーして、ショップサーブの管理画面に貼り付けます。
  3. 「設定を保存する」ボタンをクリックします。
  4. 「閉じる」ボタンをクリックします。

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

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

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

1-4 メールアドレス取得権限の申請をする

LINEに登録しているメールアドレスを取得するためには、お客さんにメールアドレスを取得してログインしている旨を同意いただく必要があります。そのため、お店ページにメールアドレスの取得と利用目的の説明を追加してください。また、掲載画面のスクリーンショットをLINEにアップロードし、メールアドレスの取得権限の申請をしてください。


ご利用案内ページ以外の他のページに掲載しても構いません。

■ご利用案内に追加します

  1. 「 自由設定欄の追加 」に見出しを入力します。
  2. 「 欄を追加する 」ボタンをクリックすると説明の入力欄が表示されます。
  3. LINEに登録してあるメールアドレスの取得・利用目的について説明を入力します。
  4. 画面最下部にある「設定を保存する」をクリックします。

  5. 以下は、サンプルの文面です。店舗さんが利用する他サイトID連携に合わせて編集してください。

    LINE、Facebook、TwitterおよびYahoo!JAPANに登録している情報と当店の会員登録情報を連携することにより、 各サイトIDを使ってログインすることができます。 ログイン画面にある、【他サイトIDでログイン】ボタンより手続きを行ってください。 なお、ログイン時の認証画面にて許可をいただいた場合のみ、各サイトの登録情報を取得し連携します。 取得情報は以下の項目となります。

    ■LINE               名前・メールアドレス
    ■Facebook         姓名・姓名の読み仮名・メールアドレス
    ■Twitter            メールアドレス
    ■Yahoo! JAPAN   姓名・性別・郵便番号・メールアドレス
    ■Amazon            姓名・メールアドレス

    また、各サイトID連携を解除したい場合は、マイページ内にある「他サイトとのID連携」にて【解除する】ボタンをクリックしてください。

■お店ページ更新します

5. 管理画面左上の「お店ページの更新へ」ボタンをクリックします。

6. 「利用中のテーマでお店を更新」をクリックします。
ベーシックテンプレートを利用の場合は「更新を開始」ボタンをクリックします。

■スクリーンショットを撮ります

  1. お店ページを開き、追加した説明文を確認します。
  2. 説明が掲載されている箇所のスクリーンショットを撮ります。

■スクリーンショットを登録します

  1. OpenID Connectの「申請」ボタンをクリックします。
  2. 内容を読み、2箇所にチェックを入れます。
  3. スクリーンショットした画像を登録します。


    ファイルサイズ:3MB以内
    形式:JPEG、PNG、GIF、またはBMP

  4. 「保存」ボタンをクリックします。
    元の画面の戻ると、ステータスが「未申請」→「申請済」になります。
LINEのチャネル基本設定画面

2 カートの流れ

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


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

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

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

■商品をカートに入れる

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

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

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

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

■LINEでログインする

LINEのログイン画面が開きますのでLINEアカウントでログインします。 ログイン済みであれば、アカウント名を確認して「ログイン」ボタンをクリックします。
LINEのログイン認証画面が表示されたら認証を許可してください。


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


 

■会員登録を完了する

ショップサーブの画面に戻り、新規会員登録をします。

  1. 必須項目を入力します。
    会員ID、パスワードなどの必須項目をすべて入力します。

    「メールアドレス」「お名前」の入力欄に、LINEアカウントの登録情報が自動で反映されています。反映された情報の編集もできます。

  2. 会員規約に同意します。
  3. 「会員登録する」ボタンをクリックします。
    次の確認画面で、会員登録を完了してください。


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

 

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

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

■商品をカートに入れる

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


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

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


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

■LINEでログインする

LINEのログイン画面が開きますのでLINEアカウントでログインします。 ログイン済みであれば、アカウント名を確認して「ログイン」ボタンをクリックします。
LINEのログイン認証画面が表示されたら認証を許可してください。

■カート画面に戻る

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

3 LINEとID連携する

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


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

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

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

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

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

■LINE IDと連携する

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

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

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

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

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

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

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

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

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