LINE 會員註冊/登入會員

meepShop提供LINE會員登入方式讓店家做選擇，您的消費者除了可使用一般 Email註冊/登入 及  Facebook 登入外，也可以設定使用 LINE 帳號一鍵登入成為商店會員，讓你的顧客可以使用 LINE 帳戶便捷地登入你的網店成為會員，不需經過繁複的註冊程序，提供便利的購物體驗。

此為LINE開發之擴充套件，需註冊LINE Developers帳號進行串接設定，meepShop僅提供與LINE登入串接之服務。若您想要在您商店使用該服務，需要先建立好 LINE應用程式 再回到商店後台進行串接，現在就看著以下操作來設定吧！

 

LINE   Developer 串接設定

商店若要開放 LINE 帳號快速登入，需要先至LINE開發者後台新增一組 LINE Login channel 並將相關串接 Channel ID 與 Channel Secret 回填到 meepShop 商店後台。故請依以下步驟設定索取串接 Channel ID 與 Channel Secret 。

 

Step 1 : 請先進入「LINE Developers」，並於該頁面右上方點擊 Login in 登入

Step 2 : 請使用您 LINE 帳號登入進行設定，如您商店有建立 LINE@官方帳號，後續要設定 LINE 登入自動加入您官方帳號好友，這邊 LINE 登入設定請務必使用您 LINE@官方帳號管理員權限帳號登入並進行設定，如您商店沒有使用 LINE@官方帳號，即可使用個人 LINE 帳號登入設定。

＊註：請注意，若後續要設定LINE 登入自動加入您官方帳號好友，因LINE 官方帳號與服務提供者一旦連動後，就無法變更或移除， 建議您先確認您LINE＠官方帳號是否已有啟用過 Messaging API，如之前已有啟用，請您務必使用啟用者的服務提供者帳號來設定 LINE 會員登入。 請參考此說明

 

 

Step 3 : 登入後請選擇下方 LINE Login ，並點選開始體驗進行設定

Step 4: 輸入「Name」及「Email address」欄位

請於「Name」及「Email address」欄位輸入欲在應用程式頁面使用的名稱及電子信箱，並勾選「我已閱讀且同意 LINE 應用程式協議」後點「Confirm」及下一步的「Register」，「Name」及「Email address」之後皆可再做修改。

 

 

 

Step 5: Create a new channel

進入 Create a new channel. 設定畫面，請分別按照以下圖示說明分別設定資訊：

① Channel type ：LINE Login

② Provider ： Create a new Provider

③ Enter the Provider  name  ： 輸入您商店名稱

④ Region ： 請選擇國家 Taiwan

⑤ Company or owner’s country or region ：Taiwan

 

⑥ Channel icon ： 請上傳您商店LOGO

⑦ Channel name ： 請輸入商店名稱

⑧ Channel description ：請設定您商店登入歡迎詞

 

⑨ App types ： 請同時勾選『Mobile app』和『 Web app 』

⑩ Email address ： 請輸入您商店聯絡電子信箱

⑪ Privacy policy URL：為選填，可留空或貼入您商店的隱私權政策頁面網址

⑫ Terms of use URL：為選填，可留空或貼入您商店的服務條款頁面網址

⑬ I have read and agree to the LINE Developers Agreement ： 請勾選表示同意

上方資訊設定完成後，請點擊最下方『 Create 』

 

 

Step 6：設定 Callback URL

進入您剛設立好的「公司名稱」 的 Provider 後，點按剛剛建立的 Channel

 

接著請點擊上方 LINE Login 頁籤，並於 Callback URL 點擊『 Edit 』 按鈕

 

請輸入您商店的網址，並在後方加上 『/api/auth/line-login』。

例如：商店網址為 https://www.apple123.com，請輸入『https://www.apple123.com/api/auth/line-login』

完成後請按下『Update』更新資訊

Step 7：進行提交

請點選上方 Basic setings 頁籤 ，直接將頁面拉到最下面的 OpenID Connect 

找到「OpenID Connect  > Email address permission」後會先看到預設顯示「Unapplied」，須點擊右邊的「Apply」，

 

將會顯示相關條例說明如下圖，您需打勾選擇同意，並需您上傳 您商店 隱私權政策頁面的內容截圖畫面（告知消費者將存取使用者之 Email 地址）」的內容截圖畫面，完成後點選最下方「Submit」。

※ 只要有設定此選項，當消費者使用 LINE 登入商店會員後，會出現同意登入的權限提醒，系統會自動抓取該名消費者登入之 Email 為會員資料

設定完成後，頁面將會顯示  Email address permission 『 Applied 』

 

Step 8：進行發佈

於 Basic settings頁面，點擊最上方 Developing ，並按 Publish 進行發佈

發佈成功後，頁面會顯示『 Published 』並顯示綠燈

Step 9：於 Basic settings頁面， 分別複製『Channel ID』及『Channel secret』 

 

回到 meepShop 後台，設定 > 第三方設定 > LINE 整合功能

將Line註冊與登入的按鈕開關開啟後，貼上『Channel ID』及『Channel secret』儲存即可

以上設定完成後，您商店前台登入註冊畫面，將會新增 LINE 會員登入的圖示，消費者即可使用電腦或手機使用LINE帳號進行登入

 

---

 

電腦版使用LINE登入畫面

於您商店前台，進入登入註冊頁面，即會顯示 LINE登入按鈕

 

消費者輸入LINE帳號進行登入 或 已自動偵測到消費者的LINE帳號（如：安裝桌機版 LINE）

頁面跳回首頁為登入成功

 

 

手機版使用LINE登入畫面

進入登入註冊頁面，即會顯示 LINE登入按鈕，手機有安裝並登入LINE的帳號時，按登入會自動偵測到消費者的LINE帳號，消費者需認證『電子郵件帳號』按許可

 

註：如使用 iOS Safari 瀏覽器登入 LINE 會員出現錯誤無法登入時，請確認消費者是否使用私密瀏覽，因LINE帳號登入之功能不支援私密瀏覽，故建議請消費者使用一般模式進入商店，即可正常使用LINE帳號登入會員喔！

 

消費者使用LINE帳號登入會員後，可以從 meepShop 後台「會員列表」中瀏覽會員資訊，只要消費者登入會員時有許可存取電子郵件帳號資訊，就會存取消費者登入 LINE 的 Email，作為會員 Email

 

若消費者之前已使用 Email帳號註冊會員，而消費者的Email帳號與LINE帳號為同一組，此時消費者使用LINE帳號進行登入，系統將會整併為同一個會員喔！該Email帳號下單過的訂單也都會合併喔～

 

PS.消費者可於LINE設定內查看到自己綁定的Email信箱 

 

---

LINE 會員註冊/登入時自動加入 LINE 好友設定

若您商店有LINE＠官方帳號，希望商店消費者在初次使用 LINE 註冊加入會員時，可同時自動加入您商店 LINE 官方帳號成為好友，可繼續依照下方步驟進行設定串接

Step1:  請先登入LINE @ 官方帳號的後台管理  LINE Official Account Manager 

點選右上方「設定」頁  – >  進入左側選單 點選「Messaging API」，並「啟用Messaging API」

選擇服務提供者時，請選擇與 商店的 LINE 會員登入 同一個提供者(Providers)  ，並請注意，LINE 官方帳號與服務提供者一旦連動後，就無法變更或移除。

註：如您官方帳號之前已經有啟用過 Messaging API，請參考此進行設定

 

隱私權政策及服務條款為選填欄位，可不輸入相關資訊，直接點選下方「確定」

請務必再次確認您「服務提供者名稱」是否與 LINE 會員登入為同一個提供者(Providers)。 

LINE 官方帳號與服務提供者一旦連動後，就無法變更或移除。若無誤請按下「確認」按鈕。

 

接著回到 LINE 會員登入的設定頁，可以看到 Providers 下方的 Channels 多了 Messaging API 

請在 Channels 點選您商店 LINE 會員登入 LINE Login 

進入頁面後，請點選「Basic settings」並將頁面往下滑

找到「Linked LINE Official Account」按下Edit

 

點選下拉選單，選擇您的 LINE 官方帳號

確認後點選「Update」完成串接設定

 

後續消費者若從您的商店第一次使用  LINE 註冊/登入您商店會員時，即會跳出加入 LINE 官方帳號好友的視窗，邀請消費者加入 LINE 好友囉！

設定完後，建議您先至商店前台登入確認是否有串接成功喔！

註：如您的line帳號之前已有line登入到您的商店無法盡人測試，建議可以參考此篇，將您的line帳號與官網授權先取消，後續再進行測試喔～

 

---

自動加入 LINE 好友設定，但 Messaging API 已被綁定的設定方式

如您LINE@ 官方帳號之前已經有啟用 Messaging API 來串接其他服務，您點選左側啟用Messaging API 的畫面應如下圖，

 

因 LINE 官方帳號與服務提供者一旦連動後，就無法變更或移除，故您必須使用之前啟用 Messaging API 的服務提供者之帳號，進入 LINE 開發者後台，確認 Channels 是否有之前『Messaging API 』的串接設定 （如下圖），若您 LINE登入設定非使用此服務提供者之帳號進行設定（像下圖一樣 沒有LINE Login )，則需使用該服務提供者之帳號重新設定 LINE登入

註：若您找不到啟用『Messaging API 』的服務提供者之帳號，我們不建議在您在LINE開發者後台用自己的帳號重新新增『Messaging API 』做串接，因自行於開發者後台新增『Messaging API 』為LINE幫您再建立一組新的line@官方帳號，故必須使用之前啟用 Messaging API 的服務提供者之帳號做後續設定才能完成

 

當您設定串接完 LINE Login 會員登入，或您之前是使用該服務提供者帳號設定 LINE Login 會員登入，畫面應該會如下圖呈現 有『LINE Login 』和 『Messaging API 』，接著請點擊『 LINE Login 』進入   

 

進入頁面後，請點選「Basic settings」並將頁面往下滑

 

找到「Linked LINE Official Account 」點選 Edit 下拉選單選擇您的 LINE 官方帳號 ，請選取您的官方帳號進行串接

確認後點選「Update」完成串接設定囉！

設定完後，建議您先至商店前台登入確認是否有串接成功喔！

如您的line帳號之前已有line登入到您的商店無法盡人測試，建議可以參考此篇，將您的line帳號與官網授權先取消，後續再進行測試喔～