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連携する流れと同様です。
【参考】通常のブラウザで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ログイン」した後、「ログイン」画面に遷移します。
- 会員登録ボタンを押下します。
- 会員カードをお持ちの場合は、カード認証を行います。
- 会員情報を入力し、会員登録すると会員登録完了画面へ遷移します。
- マイページから「会員カードの表示」を選択すると、会員カード画面へ遷移し、会員バーコードを表示できます。