如何設定 LINE 帳號可註冊/登入商店會員

SHOPLINE_____.jpg

 

SHOPLINE 提供多元的會員註冊及登入方式讓店家做選擇,顧客除了可透過 Email 和 Facebook 帳號註冊/登入會員 外,現在店家也可以設定讓顧客使用 LINE 帳號成為商店會員,當商店有簡單方便的註冊/登入方法,可以提高顧客加入商店會員的意願,幫助店家累積會員數。

* 此功能為特定計畫限定,符合計畫的店家可至後台「擴充功能>擴充功能商店」裡找到「LINE 快速註冊與登入」,安裝後須於 LINE 應用程式(LINE Developers)的介面完成相關設定,並將專屬的設定值填入後台相對應欄位,完成後顧客即可使用 LINE 帳號註冊/登入會員

 

【設定流程十二步驟】

步驟一 :安裝「LINE 功能串接」及「LINE 快速註冊與登入」

至後台「擴充功能>擴充功能商店」找到「LINE 功能串接」及「LINE 快速註冊與登入」,並且務必確認皆完成安裝,如下圖:

Pasted_Image_22_05_2019__17_14.png

 

步驟二 :第三方服務整合

安裝「LINE 快速註冊與登入」後會跳轉至下圖畫面,請點「前往設定」,如下圖:

Screen_Shot_2019-05-22_at_17.20.43.png

同時左方功能選項也會出現成「第三方服務整合」,店家亦可從下方的「LINE」選項進入同樣的設定頁面。

Screen_Shot_2019-05-22_at_17.26.06.png

 

步驟三 :開啟 LINE 註冊及登入

將「開啟 LINE 註冊及登入」的開關調整為開啟後會跳轉至設定頁面

Pasted_Image_22_05_2019__17_37.png

*該頁面其餘功能與 LINE@ 相關,屬旗艦計畫 / O2O 計畫支援,如有興趣了解更多,可於右下角對話視窗留下聯絡方式。

 

步驟四 :LINE developer

請先進入「LINE developer」,並於該頁面點擊「LINE Login > Start now」後用 LINE 帳號登入,若為公司戶,可使用公司的 LINE 帳號。

Pasted_Image_22_05_2019__17_47.png

Pasted_Image_22_05_2019__17_48.png

 

步驟五:輸入「Name」及「Email address」欄位

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

Pasted_Image_22_05_2019__17_59.png

Pasted_Image_22_05_2019__18_13.png

 

步驟六:點擊「Create New Provider」

*下圖中箭頭處可修改上一步輸入的「Name」、「Email address」內容「驗證 Email 信箱」

Pasted_Image_22_05_2019__18_43.png

 

並於「Provider name」欄位輸入全小寫的「shopline」後點「Confirm」及下一步的「Create」。

Pasted_Image_22_05_2019__18_47.png

Pasted_Image_22_05_2019__18_52.png

 *請注意:務必輸入全小寫的 shopline 作為 provider 名稱,如輸入大寫英文字元,在保存時可能會出現下圖的錯誤提示:

image__4_.png

 

步驟七:點 LINE Login 框裡的「Create Channel」

Pasted_Image_22_05_2019__18_56_1.png

並上傳一張圖店(可用商店 Logo 圖)、輸入「App name」及「App description」,這些內容在顧客透過 LINE 註冊時,會於頁面中看到,保存後亦可再做編輯,務必留意於「App name」欄位請勿輸入空格,避免在最後保存時出現錯誤提示。

Pasted_Image_23_05_2019__13_24.png

接著在「App type (can select more than one) 」同時勾選「Use WEB [WEB]」和「Use NATIVE_APP [NATIVE_APP]」,再於下方輸入 Email 地址後點「Confirm」及下一步勾選「我已閱讀且同意 LINE 應用程式協議」再點「Create」。
*Email address 欄位下方的「Privacy Policy URL」和「Terms Of Use URL」為選填,留空即可。

Pasted_Image_23_05_2019__13_13.png

Pasted_Image_23_05_2019__13_18.png

 

步驟八:進入名稱為 shopline 的 Provider 後,點擊剛剛建立的 Channel

Pasted_Image_23_05_2019__13_30.png

 

步驟九:確認設定資訊

進入該 Channel 資訊頁面後,須在「Cannel settings」分頁裡確認非常重要的三件事,請務必確認您有確實完成!以確保商店可以正常使用 LINE 註冊/登入功能!

1. 找到「Channel ID」及「Channel secret」,這是專屬的設定值,請複製後於後台相對應的欄位貼上,務必留意貼上於後台的設定值正確,避免顧客在前台使用 LINE 帳號註冊/登入時看到「400」的錯誤提示。

Pasted_Image_23_05_2019__13_38_1.png

mceclip0.png

2. 找到「App type」確認是否顯示「NATIVE_APP」和「WEB」,若沒有,請點右邊的「Edit」按鈕。

Screen_Shot_2019-05-23_at_13.44.28.png

3. 找到「OpenID Connect > Email」後會先看到預設顯示「Unapplied」,須點右邊的「Submit」

Pasted_Image_23_05_2019__13_45.png

 

接著,勾選下圖中兩個選項,並上傳「商店公告隱私權政策(告知顧客會存取使用者之 Email 地址)」的內容截圖畫面,完成後點「Submit」。

Pasted_Image_23_05_2019__13_47.png

完成後,原先的「Unapplied」會更新為「Applied」。

Pasted_Image_23_05_2019__14_03.png

*若該欄位維持 unapplied,您的顧客在商店前台使用 LINE 帳號註冊/登入時,會看到以下錯誤提示,且無法完成商店會員註冊/登入。

Screen_Shot_2019-05-22_at_12.35.45.png

不過若顯示為 applied,但部分顧客嘗試使用 LINE 帳號註冊/登入時仍看到該錯誤提示,這表示顧客使用的 LINE 帳號未綁定 Email 地址,因此要請顧客使用手機上的 LINE 應用程式,進入「設定>我的帳號」的畫面後於「電子郵件帳號」欄位輸入 Email 綁定即可。

 

步驟十:複製貼上 Callback URL

複製 SHOPLINE 後台的 Callback URL,並進入LINE「App settings」分頁,找到「Redirect settings > Callback URL」右邊的「Edit」按鈕,將剛剛複製的 URL 貼於此欄位。

mceclip0.png

Pasted_Image_23_05_2019__14_14.png

 

若未完成此步驟,顧客在前台使用 LINE 帳號註冊/登入時會看到「400」的錯誤提示

image__5_.png

 

步驟十一:狀態更新為「Published」

加油~來到最後一哩路了!在該頁面右上角可以看到「Developing」的狀態,請點擊後選「Publish」,接著狀態會更新為「Published

line_app_published.gif

 

步驟十二 :連接

於 SHOPLINE 後台「第三方服務整合 > LINE > 連接 LINE 註冊及登入」頁面右下角點擊「連接」,當看到「開啟 LINE 註冊及登入成功!」的提示表示設定成功了哦!

 image12.png

 

完成以上設定步驟且後台「第三方服務整合 > LINE」的「開啟 LINE 註冊及登入」為開啟的狀態下,您商店前台的會員註冊/登入頁面即可看到「使用 LINE 登入」的按鈕。

Screen_Shot_2019-05-23_at_14.47.16.png

如上述步驟完成後,仍無法於商店前台使用 LINE 帳號註冊/登入會員,可於後台留言給線上顧問,並將 support@shoplineapp.com 加入您的 LINE 應用程式管理員,我們會協助查看您於 LINE 應用程式的設定。

*加入 LINE 應用程式管理員步驟: 必須先完成步驟一至七後,可於 Channel 資訊頁面的「Roles」分頁按下「Add」,接著點「Register individual email addresses」並輸入 support@shoplineapp.com 且 Role 須為 Admin,確認後我們會收到邀請信件。

 

還有其他問題?提交請求

評論