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

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

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

*請留意:Facebook 應用程式為貴司透過 Facebook 個人帳號建立的資產,並不屬於 SHOPLINE 擁有,請您留意權限與使用情況外,也請特別留意 Facebook 每年發出的通知與資料審核情況,若日後有在應用程式收件夾收到 Facebook 「資料使用情形檢查」訊息,請您在期限內回覆以免您的應用程式遭到 Facebook 停用。

 

 

設定步驟

步驟一:進入 Facebook for Developers 

請您點選此連結進入 Facebook for Developers 並使用您 Facebook 個人帳號登入,並點選「我的應用程式」>>「建立應用程式」開始來建立 Facebook 應用程式。
注意:由於 Facebook for Developers 應用程式是綁定並建立在個人帳號旗下,為避免貴司內部人員、權限異動建議使用貴司可共同管理的 Facebook 個人帳號建立程式,並請留意「步驟十」在最後新增貴司相關人員同為此應用程式管理員,以便後續維護管理。___2020-11-06___4.40.22.png

 

______.jpg

 

提醒您,如果您的 Facebook 帳號已經有建立過 Facebook 應用程式,當您點選「建立應用程式」後,網頁會出現詢問您「選擇應用程式類型」的視窗,請您點選第一項「消費者」來建立您的 Facebook 登入應用程式,並接續以下的步驟完成 Facebook 登入功能的設定。

TW_1-1-3.png
 

步驟二:建立 Facebook 應用程式

請注意「應用程式顯示名稱」會出現在登入流程讓顧客查看,會建議您填寫「商店/品牌名稱」並填寫您/公司的聯絡電子郵件,若是您擁有 Facebook 企業管理平台,也可以在下方「選填」欄位選取您管理此應用程式的平台,再來請點選「建立應用程式」

______.png

點選後會出現「安全驗證」的彈跳視窗,請完成驗證後點選「提交」 

TC_Step5.png


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

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

 

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


步驟四: 輸入商店網址

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


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

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

_______.png

 

1. 應用程式網域(必填)

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

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

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

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

注意:請填寫您的商店網址而非 SHOPLINE 官方網址。

 

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

2020 年開始 Facebook 提升對 Facebook 帳戶的保護,針對外部網站隱私政策的審核更加嚴格。建議您先回到 SHOPLINE 後台「網店設計」>>「網店分頁」中,使用「文字分頁」或是「進階分頁」建立商店的「隱私政策 Privacy Policy」頁面,再取得網頁連結放置在此欄位中。撰寫格式可參考:示範商店案例(僅供參考,請依實際規範及需求撰寫),並請在分頁 網路搜尋最佳化/SEO設定 的「標題」中包含「隱私權政策 Privacy Policy」;以及在「描述性URL」 中包含privacy-policy」讓 Facebook 容易識別頁面具有隱私權的相關內容。

____.png

設定完成後,再回到 上方設定畫面中,在「2. 隱私政策網址」處填入:

2_______.png

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

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

注意:請填寫您的商店網址而非 SHOPLINE 官方網址。

 

3. 用戶資料刪除(必填)

3_______.png
如果欄位空白請輸入商店首頁網址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,請注意:務必要填寫 https:// 開頭的安全性加密網址

 

4. 類別(必填)

4___.png
請依照您的商店販售的商品或是服務類型,從選單中選取合適的選項。

 

5. 服務條款網址(建議填寫)

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

 

6. 應用程式圖示(必填)
6_____.png

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

 

7. 應用程式用途(必填)
7______.png

  • 如果您是為自己商店建立的,請點選「你自己或你的商家」
  • 如果您是 代理商/代營運 為商家建立的話,請點選「客戶」 

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

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

注意:請填寫您的商店網址而非 SHOPLINE 官方網址。

完成設定後 請點選右下角「儲存變更」按鈕。
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 for Developers 應用程式是綁定並建立在個人帳號旗下,為避免貴司內部人員異動建議使用貴司管理的 Facebook 個人帳號,並請留意「步驟十」在最後新增貴司相關人員同為此應用程式管理員,以便後續維護管理。

_____.png


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

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

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

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

TC_Step18.jpg

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

 

注意事項

1. 若是顧客無法使用 Facebook 登入,該如何協助排除?

a. 顯示「無法使用此功能」的提示:由於 Facebook 會不定期進行應用程式審核與更新,這邊會建議店家可以定時回到 Facebook for Developers 的商店應用程式,查看左側「提示」內的「收件匣」查看 Facebook 最新提示,並依照訊息內容回覆 Facebook (尤其是 Facebook 向您發出的「資料使用情況檢查」);並查看「設定」>>「進階」中的 API 版本,將版本下拉選取最新版本。

fb_login_hint1.png

 

請在應用程式「收件夾」務必回覆 Facebook 資料使用情況,勾選下列欄位後點選「繼續」提交回覆,以免遭到 Facebook 停用您的應用程式導致無法使用此登入功能:

___2021-03-12___4.01.41.png

 

_____api__.png

 

b. 顯示「No authorization code」或是無法存取電郵等提示:.Facebook 註冊/登入時,商店會存取顧客 Facebook 帳號的姓名與電郵建立會員資料,若是顧客使用 Facebook 登入時有出現紅色 no authorization code 的授權提示,請引導顧客至 Facebook 帳號設定中確認有填寫姓名、電郵並「Facebook > 設定集隱私>>設定」確認「一般」的聯絡資料中有填寫姓名、主要聯絡電郵,以及在「應用程式及網站」同意授權登入功能使用,與收信完成認證。

login_hint_2.png

 

c.若上述兩個情況已經確認排除,但是顧客還是無法登入使用,請您重新依照此文章的設定步驟確認 Facebook 應用程式的「設定欄位」與「上線狀態」,若有問題也請您提供相關的截圖從後台聯繫線上顧客協助您。

 

2. 我已有 Facebook 快速登入功能,但為什麼登入在 Facebook for Developers 上找不到我的應用程式?應用程式的編號怎麼與後台不同?

若商店已有 Facebook 快速登入功能,表示已經在 Facebook 建立過快速登入的應用程式,Facebook for Developers 應用程式是綁定個人 Facebook 帳戶管理的,因此若使用與先前不同人的 Facebook 帳戶登入,也並未有原先應用程式的管理權限時,在 Facebook for Developer 中會找不到安裝在商店的應用程式。

這時會建議您請原先設定該功能的同仁協助登入 Facebook for Developer 並調整商店的應用程式,並參考「步驟十:將貴司相關同仁 Facebook 帳號都加入管理員」將貴司相關同仁都納入管理員,以便後續維護與管理。

 

 

 

 

 

 

 

還有其他問題?提交請求

評論