要使用FB Login等FB外掛服務,一定要申請一組FB APP
下方為FB APP申請流程教學

Step1 前往FB開發者頁面 (Facebook for developers)

由此連結前往 https://developers.facebook.com/
點擊右上角登入按鈕。

登入後點擊右上角"我的應用程式",點擊下方子選單按鈕" 建立應用程式 "


Step2 建立應用程式

輸入品牌名稱 (方便記憶的名詞就好) 和電子郵件,點擊右下角 “建立應用程式編號"

Step3 新增 Facebook 登入應用程式

點擊下圖設定按鈕

點擊設定進入後,點擊下圖"網站"開始設定

進入"網站"頁面後,輸入網站網址,網址開頭必須為 https:// 安全加密網址
輸入完後點擊右下角 save按鈕

Step4:基本資料設定

第一區塊,如下圖所示,有7個欄位


1.應用程式網域:

使用獨有網址,輸入你的主網域,例如:https://www.test123.com

使用tinybot網址,輸入如下:https://tinybot.cc

把紅色的地方替換為你的網址即可。

2.隱私政策網址:
主要是描述網站會 “如何處理使用者個人資料”
使用者同意此聲明後,即具有契約效力。
於網站中編輯一個分頁,並將該分頁連結貼到這。

3.應用程式圖示:
消費者FB登入時,會出現此圖示
上傳尺寸 1024 x 1024像素,圖片大小 5MB 內

4.商業用途:
自營店:選“支持我自己的企業商家”
代理/待營運 幫商家建立,請選“為其他企業商家提供服務”

5.命名空間:欄位留空不用填。

6.服務條款網址:
網址連結會顯示在FB登入應用程式視窗 “應用程式條款" 裡
於網站中編輯一個分頁,並將該分頁連結貼到這。

7.類別:
依自己品牌的產業類型選擇。

第二區塊、第三區塊,如下圖所示

第二區塊:驗證訪客
這邊有兩種驗證方法 “商家驗證" “個人驗證" 選擇一種方式驗證即可。

商家驗證:要使用 “商家驗證",必須要先申請 FB企業管理平台 (FaceBook Business) 帳號

點擊 “立即開始" 按鈕,選擇 “企業管理平台帳號" 後點擊右下角 “提交" 按鈕
提交完畢後會自動變為下圖,驗證成功的狀態

個人驗證:
教學文章的撰寫時間為2020/5月初,目前FB因疫情關係,暫時關閉個人驗證的部分
待恢復正常後補充

第三區塊:給資料保護長的聯絡資料:可留空跳過。

設定完畢後,點擊右下角的 儲存變更 按鈕

Step5:前往路徑 Facebook 登入/設定,設定相關選項

啟用指定功能
以下4項功能,調整為啟用
1. “用戶端 OAuth 登入" 啟用
2. “網路 OAuth 登入" 啟用
3. “強制採用 HTTPS" 啟用
4. “對重新導向 URI 使用 Strict 模式" 啟用z

5.在 “有效的 OAuth 重新導向 URI"
請依照下列方法將連結貼到此欄位,貼上後按下Enter鍵
當連結變為藍底灰字才算輸入完成

使用獨有網址,輸入你的主網域,例如:https://www.test123.com/?wc-api=auth&done=facebook

使用tinybot網址,輸入如下,例如:https://tinybot.cc/test123/?wc-api=auth&done=facebook

把紅色的地方替換為你的網址即可。

6.取消授權,下方的所有欄位皆留空。

Step6 確認應用程式狀態

要確認應用程式狀態變為 “上線"
“上線" 代表他啟用成功

如果應用程式狀態為 “調整中" 代表應用程式尚未開啟,需要手動將他切換為 “上線"

Step7 取得編號與密鑰

前往設定/基本資料,複製 “應用程式編號" “應用程式密鑰"
密鑰需點擊右側的的 “顯示" 按鈕,讓他密鑰秀出來
取得這兩組代碼後,給予客服人員,客服人員會協助你綁定

Step8 前往商店測試,是否能正常使用 Facebook帳號 註冊/登入

前往我的帳號頁面,點擊Facebook登入按鈕,登入測試