LINE ID連携ご利用時の画面遷移
LINE連携オプションご利用時のLINE ID連携、関連各画面の説明をします。
スマートフォン版（LINEアプリ内ブラウザも同じ）の画面遷移です。
- LINE連携に関するユーザー画面側の表示は、お客様（消費者）がスマートフォンにてECサイトを表示した際のみ表示されます。
LINE ID連携の詳細と、ID連携機能のはじめかた、および活用方法については、「LINEとのID連携」オプションのはじめかたをご覧ください。 閲覧デバイスなどの注意事項につきまして、必ずご注意事項をご覧ください。
LINE連携オプションは『LINE＠向け「Messaging API」 利用規約』および『API型LINE@運用ガイドラインのAPI型LINE@運営ルール』に従ってご利用ください。
＜目次＞
「LINE ID連携」画面からLINE ID連携の流れ －まずはじめに
このセクションでは、ECサイトのトップページやその他広告や告知LP上に、「LINE ID連携」画面へのリンクを張り、LINE ID連携をおすすめするなどの導線を想定しています。
「LINE ID連携」画面は、「マイページ」内の画面ですが、ログインなしで閲覧できます。
＜まずはじめに＞
LINE ID連携をしていただくには、まずはじめにショップが運営する公式LINEアカウントと「友だち」 になっている必要があります。
「友だち」になっていただくためのQRコードや検索用のアカウント名を事前に告知しておきましょう。
以下は、「友だち」追加完了している状態のお客様（消費者）がID連携を行う際の画面遷移です。
「LINE ID連携」画面からLINE ID連携の流れ －はじめてLINE ID連携する場合の流れ
「LINE ID連携」画面にて、「LINE ID連携」ボタンを押下
LINE「ログイン」画面が開く
※LINEアプリで「LINE ID連携」ボタンをタップした場合は、この画面は表示されません。次画面に遷移します。
この画面はLINEの（LINEヤフー株式会社のシステムで生成される）画面です。（https://line.me/配下の画面） LINEにご登録の情報（メールアドレスとパスワード）を入力してログインボタンを押下してください。（Android、LINEアプリ内ブラウザなど一部の環境では「ログイン」画面が表示されません。）
ログインが成功したら、LINEで「友だち」かどうか確認をし、「友だち」でなければ自動的に「友だち」に追加します。
※iPhone Safariの場合
すでにLINEの友だち追加済みだが、ブロックされていた場合
「LINE ID連携」画面に戻る
LINE ID連携」を行う前に「LINE友だち追加」ボタンをタップしてください。
LINEアプリを起動しブロック解除していただきます。
LINEアプリで友だちブロックを解除
LINEアプリが起動しますので、ブロック解除します。
※LINEアプリにて「設定（歯車アイコン）→友だち→ブロックリスト」にて編集ボタンから「ブロック解除」をタップしてもブロック解除できます。（iOS版LINEアプリの場合）
再度「LINE ID連携」ボタンを押下
LINEアプリで友だちを追加し終わったら、ブラウザに戻り、もう一度「LINE ID連携」ボタンを押下します。
LINEチャネル認証をする
同意するボタンを押下してください。
LINE ID連携時「LINEチャネル認証」画面での「権限を編集」について
LINE ID連携時に「LINEチャネル認証」画面が表示される場合があります。お客様（消費者）の操作により、お友だち追加ができなくなる場合がございますので、【参照】LINE「認証」画面での「権限を編集」についてをご覧ください。
連携を行う
お客様（消費者）の会員登録状況・ログイン状況により、以下のように遷移するので、それぞれ以下のように連携を完了します。
すでにECサイト会員IDでログイン中であった場合
「ログイン」画面は表示されず、「LINE連携完了」画面に遷移します。
ECサイトに会員登録済みで、すでに友だちだった場合/LINE友だち追加が成功した場合
「ログイン」画面に遷移します。
「ログイン」画面にて、ECサイトにログインすると、ID連携が完了し、「LINE連携完了」画面に遷移します。
ECサイトに会員に登録していない場合
「ログイン」画面で会員登録ボタンを押下し会員登録すると、会員登録完了と同時にLINE ID連携が完了します。
詳しい流れは、LINE ID連携と同時に会員登録する場合の流れをご覧ください。
LINE ID連携会員になれば、次回からはLINEでログインできるようになります。
「LINE連携完了」画面が表示
LINE ID連携が完了しました。
「LINE ID連携」画面からLINE ID連携の流れ －LINE ID連携と同時に会員登録する場合の流れ
「LINE ID連携」画面にて、「LINE ID連携」ボタンを押下する
はじめてLINE ID連携する場合の流れと同様です。
LINE「ログイン」画面が開く
はじめてLINE ID連携する場合の流れと同様です。
LINEチャネル認証をする
はじめてLINE ID連携する場合の流れと同様です。
「ログイン」画面が開く
「ログイン」画面が表示されますので、会員登録ボタンを押下します。
「会員登録」画面で会員登録をする
会員情報を入力します。
LINE ID連携済みの会員登録が完了
「マイページ」からのLINE ID連携の流れ －まずはじめに
＜マイページトップのメニュー表示＞
＜「LINE連携する」メニューの表示＞
マイページトップに「LINE連携する」リンクが表示されます。
「LINE ID連携」画面に遷移します。
表示方法は、設定＞購入者・会員情報＞会員設定-マイページ設定-LINE ID連携設定「マイページトップにLINE ID連携へのリンクを表示する」にチェックします。
＜「ログイン連携」メニューの表示（コマースクリエイター運用中（新規・切替後）のみ）＞
マイページトップに「ログイン連携」リンクが表示されます。 「ログイン連携」画面に遷移します。
表示方法は、設定＞購入者・会員情報＞会員設定-マイページ設定-ログイン連携設定「マイページトップにログイン連携へのリンクを表示する」にチェックします。
表示手順については、「LINEとのID連携」オプションのはじめかた-マイページに「LINE ID連携」「ログイン連携」メニューを表示するもご参照ください。
「マイページ」からのLINE ID連携の流れ －「LINE ID連携」画面からのログイン連携の流れ
「マイページトップ」の「LINE ID連携」メニューを押下すると、「LINE ID連携」画面が開きます。
その後の流れは、LINE ID連携する流れと同様です。
「マイページ」からのLINE ID連携の流れ
－「ログイン連携」画面からログイン連携の流れ（コマースクリエイター運用中（新規・切替後）のみ）
「マイページ」内の「ログイン連携」画面から「LINE ID」と連携が可能です。
「マイページ」トップより［ログイン連携］メニューを押下する
「ログイン連携」画面に表示された連携ボタンを押下する
「LINE ID連携」画面が開く
その後の流れは、LINE ID連携する流れと同様です。
「ログイン連携」画面に戻ると、連携済みサービスの表示が切り替わる
連携済みとなると、連携ステータスと連携ボタンの表示が以下のように切替ります。
「連携中」「停止する」のラベルは変更可能です。 詳しくは、ログイン連携パーツをご覧ください。
サインインした「LINE ID」が、ログイン中の会員IDとは別会員IDと連携済みである場合
ログイン中の会員IDとは、連携できません。左図のようにエラー表示となります。
以下のいずれかの方法で対応してください。
- 【方法1】連携済みの会員情報で本ログイン後、「ログイン連携」画面から連携解除を行います。
さらにログアウトし、先ほどログイン中だった会員情報にて、再度連携操作を行います。 - 【方法2】ログイン中の会員IDとの連携をキャンセルし、連携済みの会員情報で本ログインしなおして、利用します。
LINEログインする流れ
ゲスト（会員未登録）のお客様（消費者）は「LINE ID連携」と会員登録を同時に行う流れになります。LINE ID連携と同時に会員登録する場合の流れをご覧ください。
- コマースクリエイター切替後の流れです。コマースクリエイター未利用/切替前の場合は、マニュアル表示のステータスを「コマースクリエイター移行中（切替前）」に変更しこちらをご覧ください。
LINEアプリからのログイン
LINE ID連携済みの場合、LINEアプリでメッセージにあるURLをタップして、アプリ内ブラウザにてECサイトを表示した際は、自動的にログインできます。
ECサイト（スマートフォン）からのログイン
「ログイン」画面にて［LINEでログイン］を押下します。
未ログイン状態であった場合
［A-1］登録済み会員IDが、「LINE ID」と既に連携済みである場合
連携ログイン完了となり、「マイページ」などのログイン後の画面へ遷移します。
※複数の会員IDをお持ちの場合は、連携済みの会員ID側でログインとなります。意図した会員情報でログインしているか確認が必要です。
［A-2］登録済み会員IDが「LINE ID」と未連携である場合
「LINE ID連携」画面に遷移します。その後の流れについては、はじめてLINE ID連携する場合の流れと同様です。
※複数の会員IDをお持ちの場合、いずれの会員IDも未連携である場合を指します。
いずれかが連携済みの場合は［A-1：登録済み会員IDが、「LINE ID」と既に連携済みである場合］の流れとなります。
仮（自動）ログイン状態であった場合
- ログイン状態が保持されている状態を指します。
仮ですでにログインしている状態のため、仮ログイン中の会員情報以外の会員情報や連携情報でログインしようとする（連携しようとする）と、すべてエラーとなります。具体的な流れは以下でご確認ください。
［B-1］登録済み会員IDが、「LINE ID」と既に連携済みである場合
［B-1-1］連携済みの会員IDが、仮ログイン中の会員IDである場合
連携ログイン完了となり、「マイページ」などのログイン後の画面へ遷移します。
［B-1-2］（複数の会員IDをお持ちで）連携済みの会員IDが、仮ログイン中とは別の会員IDである場合
連携ログインできず、「ログイン」画面に遷移します。
以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。
＜仮ログインしていた会員ID側で連携し直したい場合＞
以下の手順で行います。
- ログアウトします。
- 連携済みの別の会員情報でログインし、「ログイン連携」画面にて連携解除し、ログアウトします。
- 先ほど仮ログイン状態であった会員情報で再度ログインし、「ログイン連携」画面より連携します。 エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。
［B-2］登録済み会員IDが「LINE ID」と未連携である場合
複数の会員IDをお持ちの場合、いずれの会員IDも未連携である場合を指します。
いずれかが連携済みの場合は［B-1：登録済み会員IDが、「LINE ID」と既に連携済みである場合］の流れとなります。
連携ログインできず、「ログイン」画面に遷移します。
以下のように「別のアカウントでログインする場合は一旦ログアウトしてください。」とエラーメッセージが表示されます。
この状態で仮ログイン中の会員情報で本ログインしても連携されません。
＜仮ログイン中の会員IDと連携したい場合＞
メールアドレス・パスワードでログインし、「ログイン連携」画面にて連携します。
＜複数会員IDをお持ちで、別の会員IDと連携したい場合＞
以下の手順で行ってください。
- ログアウトします。
- 再度連携したい会員IDでログインし、「ログイン連携」画面にて連携します。
エラー表示された以降の「ログイン」画面では、仮ログイン中の会員情報以外ではログインできなくなります。
本ログイン状態の場合
「ログイン」画面は表示されません。
「マイページ」内の「ログイン連携」画面から連携可能です。
画面遷移については「ログイン連携」画面からログイン連携の流れ（コマースクリエイター運用中（新規・切替後）のみ）をご覧ください。
連携解除の流れ
操作画面：マイページ＞「ログイン連携」画面
「ログイン連携」画面を表示するには、マイページに「LINE ID連携」「ログイン連携」メニューを表示するを行う必要があります。
「連携中」と［停止する］ボタン
「ログイン連携停止」モーダル
＜手順＞
- 「マイページ」から［ログイン連携］メニューを押下し、「ログイン連携」画面に入ります。
- 「連携中」のサービスを確認します。サービス名欄に「連携中」、および［停止する］ボタンが表示されています。
- ［停止する］を押下すると、「ログイン連携停止」モーダルが表示されます。
- ［ログイン連携を停止する］を押下すると、連携が解除されます。
- 「ログイン連携」画面の該当サービス欄に「未連携」［各サービスの連携ボタン］が表示されていることを確認してください。
「ログイン連携」画面の、「連携中」「未連携」「停止する」のラベルは変更可能です。詳しくは、ログイン連携パーツをご覧ください。
＜注意事項＞
- ログイン連携を解除しても、ログイン状態は継続されます。（ログアウトされるわけではありません。）
- 本手順での連携解除は、ECサイト側のみの連携解除となります。
各サービスでは、連携しているサイトとして情報が残っている場合があります。
完全に連携を解除するには、お客様（消費者）が各サービスの管理画面上で連携解除を行う必要があります。
【参考】通常のブラウザでECサイトを表示する方法
LINEアプリでメッセージに記載されたURLをタップすると、通常LINEアプリ内ブラウザでECサイトが表示されますが、URLの末尾に「openExternalBrowser=1」とつけると、通常のブラウザ（SafariやAndroid標準ブラウザなど）でECサイトが表示されるようになります。（例：http://example.com/fs/sample/group?openExternalBrowser=1）
- Amazon Payご利用店舗の場合、スマートフォン版LINEアプリのメッセージからLINEアプリ内ブラウザでECサイトを表示すると、お届け先・お支払い方法（クレジットカード）選択ウィジェット（LINE IDの登録情報が表示され、選択できる部分）がエラーになる場合があります。こちらはLINEアプリのセキュリティ仕様とAmazon Payの仕様によるものです。
通常のブラウザの場合、LINEログイン時にメールアドレスとパスワードを入力することになりますが、Amazon Payは正常に動作します。
【参考】各「ログイン連携」ボタンの並び替え方法
「Apple」・「Google」・「Amazon」・「LINE」の、すべての連携オプションを利用している場合を例としてご説明します。
マイページ内の「ログイン連携」画面、「ログイン」画面でのボタンの並び順は、CSS、もしくはシステムパーツの並び替えにて変更可能です。
以下のページに、いくつか変更例を記載しておりますので、参考にしてください。
マイページ内の「ログイン連携」画面での並び替え方法
各ログイン連携用のボタンは、初期値では「Apple」「Google」「Amazon」「LINE」の並びで表示されます。
「ログイン」画面での並び替え方法
「ログイン」画面では、「Apple」「Google」「Amazon」について、CSSで変更可能です。
「LINE」は別のシステムパーツで出力されるため、表示位置は一番下か上に限られます。
【参照】LINE「認証」画面での「権限を編集」について
LINE ID連携時に、LINE「認証」画面が表示される場合があります。 このまま「同意する」ボタンを押下すれば、認証は完了します。
認証画面にある「権限を編集」を押下すると、店舗様によっては、「公式アカウントの友だち追加」が任意項目として表示されます。
（LINE ID連携を行う場合、「権限の編集」を押下する必要はありません。）
「公式アカウントの友だち追加」のチェックをOFFにして「同意する」を押下すると友だち追加されず、LINE ID連携機能を正しくご利用いただけなくなります。 必要に応じて、お客様へ告知や注意をしていたけますようお願いします。
LINEアプリの設定（歯車アイコン）＞個人情報-アカウント＞連動アプリから、店舗様のアカウントを選択すると、「権限を編集」メニューが表示されます。こちらで「公式アカウントの友だち追加」チェックをONにすることもできます。
【futureshop omni-channelご利用時】LINE ID連携と同時に会員登録後、会員カードへの画面遷移について
新規会員登録から「会員バーコード」が表示できる会員カード画面までの画面遷移は以下となります。
ECサイトの「LINE ID連携」画面にて、にてID連携ボタンを押下します。
- 「LINEログイン」した後、「ログイン」画面に遷移します。
- 会員登録ボタンを押下します。
- 会員カードをお持ちの場合は、カード認証を行います。
- 会員情報を入力し、会員登録すると会員登録完了画面へ遷移します。
- マイページから「会員カードの表示」を選択すると、会員カード画面へ遷移し、会員バーコードを表示できます。