Facebook 帳號快速註冊/登入會員|顧客設定

TC_Step1.jpg顧客除了可以使用 Email 電郵註冊成為會員外,我們也提供使用 Facebook 帳號登入的功能,讓顧客可以快速一鍵註冊/登入您的商店。

一鍵使用 Facebook 帳號登入為 Facebook 所開發的功能,是透過將 Facebook 的應用程式安裝到商店中才能完成的功能。我們會需要先建立好 Facebook 應用程式再回到商店後台進行安裝,由於設定步驟較多,敬請耐心並依照步驟進行設定。若有畫面與此說明不符或是有相關問題的狀況,請擷取您的螢幕操作畫面提供後台線上顧問幫您確認。 

 

設定步驟

步驟一:進入 Facebook for Developers 

請您點選此連結進入 Facebook for Developers 並使用您 Facebook 個人帳號登入,並點選「我的應用程式」>>「建立應用程式」開始來建立 Facebook 應用程式。TC_Step2.png

TC_Step3.jpg
 

步驟二:建立 Facebook 應用程式

請注意「顯示名稱」會出現在登入流程讓顧客查看,會建議您填寫「商店/品牌名稱」並填寫您/公司的聯絡電子郵件,再來請點選「建立應用程式編號」
TC_Step4.png
 
點選後會出現「安全驗證」的彈跳視窗,請完成驗證後點選「提交」 

TC_Step5.png


步驟三:新增「Facebook 登入」應用程式

接下來會進入新增應用程式的頁面,請找到「Facebook 登入」並點選「設定」
TC_Step6.jpg

 

進入「Facebook 登入」設定頁面後,請選擇要將應用程式使用在「網站」
TC_Step7.jpg


步驟四: 輸入商店網址

請在「網站網址」中輸入您商店首頁網址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,請注意:務必要填寫 https:// 開頭的安全性加密網址,輸入完畢確認後,請點選右下角的「保存 (Save)」按鈕,並待應用程式存取網址。
TC_Step8png.png


步驟五:進入應用程式「基本資料」中設定

接下來請到左側主控版,進入「設定」>>「基本資料」完成應用程式網址、隱私政策網址、應用程式圖示、商業用途、服務條款、類別、網站網址欄位的設定。

TC_Step9.png

TC_Step10.png

1. 應用程式網域(必填)
這個欄位總共會需要輸入 2 個網址 (裸網域包含子網域網址),請依照以下方法取得並分別貼上後按下鍵盤的「Enter(Window) / Return(Mac)」鍵,當網址變成藍底灰字時才代表成功輸入。

  • 如果您的商店使用獨有網址,例如:https://www.test123.com 
    請分別填入 2 個網址:www.test123.com 和 test123.com 

  • 如果您的商店使用免費網址,例如:https://test456.shoplineapp.com
    請分別填入 2 個網址:test456
    .shoplineapp.comshoplineapp.com

以上「紅字粗體的範例網址」請更換成您的商店網址,若不確定您商店獨有網址和免費網址,可進入商店前台首頁複製網址。 

 

2. 隱私政策網址(必填)
隱私政策為網站「將如何對待網路使用者個人資料」之聲明,如網站使用者同意或信賴隱私政策之聲明,則即具有契約效力,且隱私政策應符合網路定型化契約之成立要件而定,商店中是否有揭露「隱私條款」為金流審核、Google 廣告投放審核、Facebook 應用程式的審核項目之一。

2020 年開始 Facebook 提升對 Facebook 帳戶的保護,針對外部網站隱私政策的審核更加嚴格。建議您先回到商店後台使用文字分頁或是進階分頁建立商店的「隱私政策 Privacy Policy」頁面,再取得網頁連結放置在此欄位中。撰寫格式可參考:示範商店案例(僅供參考,請依實際規範及需求撰寫)

請在分頁 網路搜尋最佳化/SEO設定 的「標題」中包含「隱私權政策 Privacy Policy」;以及在「描述性URL」 中包含privacy-policy」讓 Facebook 容易識別頁面具有隱私權的相關內容。

  • 如果您的商店使用獨有網址,您會類似這個網址:
    https://www.test123.com/pages/privacy-policy
  • 如果您的商店使用免費網址,您會類似這個網址:https://test456.shoplineapp.com/pages/privacy-policy

以上「紅字粗體的範例網址」請更換成您的商店網址,若不確定您商店獨有網址和免費網址,可進入商店前台首頁複製網址。 

 

3. 應用程式圖示(建議上傳)
應用程式圖示會和「顯示名稱」一起出現在顧客登入流程,我們會建議您上傳商店 Logo 或是品牌圖示完整呈現給顧客,減少顧客認為是詐騙或是非正式管道搜集用戶資料的疑慮。Facebook 建議上傳尺寸為 1024 x 1024 像素,檔案大小 5MB 以內的圖片。

 

4. 商業用途(建議選取)

  • 如果您是為自己商店建立的,請點選「支持我自己的企業商家」
  • 如果您是 代理商/代營運 為商家建立的話,請點選「為其他企業商家提供服務」 

 

5. 服務條款網址(建議填寫)
此網址連結會顯示在 Facebook 登入應用程式的視窗「應用程式條款」中,我們會建議您編輯商店的預設分頁「條款與細則」,並依實際情況描述您商店的服務項目與交易細則,完成後將分頁網址連結放置在此欄位中。

 

6. 類別(建議選取)
請依照您的商店販售的商品或是服務類型,從選單中選取合適的選項。 

 

7. 網站網址(必填)
接下來請往下滑,到「網站」的區塊,如果欄位空白請再次輸入商店首頁網址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,請注意:務必要填寫 https:// 開頭的安全性加密網址,輸入完畢確認後請點選右下角的「儲存變更」按鈕。
TC_Step11.png


步驟六:進入「Facebook 登入」>>「設定」中設定

接下來請到左側主控版,進入產品「Facebook 登入」>>「設定」中的「用戶端 OAuth 設定」進行設定

 TC_Step12.png

1.將指定功能開關開啟
請開啟以下 4 個功能開關,設定完畢後可以與下圖比對確認

  1. 開啓「用戶端 OAuth 登入」
  2. 開啓「網路 OAuth 登入」
  3. 開啓「對重新導向 URI 使用 Strict 模式」
  4. 開啓「強制採用 HTTPS」 
    TC_Step13.png

 

2.在「有效的 OAuth 重新導向 URI 」輸入連結
請依照以下方法取連結並貼到在「有效的 OAuth 重新導向 URI」欄位,貼上後按下鍵盤的「Enter(Window) / Return(Mac)」鍵,當網址變成藍底灰字時才代表成功輸入。

  • 如果您的商店使用獨有網址,例如:https://www.test123.com 
    請在欄位中貼上:https://www.test123.com/users/auth/facebook/callback  
  • 如果您的商店使用免費網址,例如:https://test456.shoplineapp.com
    請在欄位中貼上:https://test456.shoplineapp.com/users/auth/facebook/callback

以上「紅字粗體的範例網址」請更換成您的商店網址,若不確定您商店獨有網址和免費網址,可進入商店前台首頁複製網址。

完成設定後 請點選右下角「儲存變更」按鈕。
TC_Step14.png

請注意:送出之後請再檢查,「對重新導向 URI 使用 Strict 模式」開關是否變成關閉(「否」的狀態),如果變成關閉(「否」的狀態)請再次開啟(將狀態改為「是」)並再次「儲存變更」即可。 

 

步驟七:確認應用程式狀態

請查看畫面上方「應用程式編號」旁的「開關」,開關應為「開啟」以及會顯示「狀態:上線」這樣應用程式才有辦法使用。(如果開關尚未開啟,會顯示灰色的「調整中」狀態)TC_Step15.jpg

開啟開關時,請點選視窗中的「切換模式」,將您的應用程式調整為「上線」的狀態。如果應用程式的開關是「關閉」的話,顧客將無法使用 Facebook 帳號登入商店喔!

TC_Step7-2.png 

 

步驟八:準備好要輸入在商店後台的資訊

請到左側主控版,進入「設定」>>「基本資料」, 點擊「應用程式密鑰」旁的「顯示」按鈕,讓其代碼顯示出來。將「應用程式編號」以及「應用程式密鑰」複製下來,接下來就要回到 SHOPLINE 商店後台進行設定了!TC_Step16.jpg


步驟九:回到 SHOPLINE 商店後台設定

請到您 SHOPLINE 商店後台,進入「設定」>>「顧客設定」找到「顧客以 Facebook 登入設定」欄位,並將功能開啟。
開啟後將「應用程式編號」以及「應用程式密鑰」貼到對應的欄位中,完成後請點擊右下角的「更新」按鈕保存設定,您的商店就可以使用 Facebook 登入功能。
TC_Step17.png


步驟十:測試是否能正常使用 Facebook 帳號一鍵註冊/登入功能

恭喜您設定完畢,最後就要進入到您的商店前台進行測試!

進入您商店的會員註冊/登入頁面,並點選 Facebook 註冊/登入 按鈕,會跳出 Facebook 視窗請求顧客登入並授權給您的應用程式(應用程式顯示名稱及圖示就是在這個流程出現的)。

這時候顧客必須先授權 Facebook 登入應用程式存取資料,才可使用 Facebook 登入功能,如果顧客選擇不授權的話,就無法使用 Facebook 登入功能。

TC_Step18.jpg

此功能設定步驟較多,如有操作設定的問題,歡迎您再將問題畫面截圖下來提供給線上顧問,我們會協助您處理。 

 

 

 

 

 

還有其他問題?提交請求

評論