設定 Facebook 帳號登入會員功能

便利的免跳轉登入! 只要在 Facebook Developers 註冊商家專屬的應用程式編號,就能讓客戶使用 Facebook 帳號快速登入,大幅提升會員註冊率與使用者體驗。


⚠️ 重要注意事項:
串接完成後,請務必定期留意您的「Facebook 登入應用程式權限」與「使用情況」。Facebook 會不定期發出通知或資料審核訊息(通常為建立後 60 天),請務必於期限內回覆,以免應用程式遭到停用。

一、建立 Facebook 應用程式

Step 1 登入 Facebook Developers

請前往 Facebook Developers 網站,並登入您的 Facebook 個人或公司帳號。

Facebook Developers 登入畫面
初次使用提醒: 若您是第一次登入此平台,系統會引導您建立開發者帳號,請依照畫面指示完成基本註冊程序。
建立開發者帳號引導

Step 2 建立應用程式

成功進入儀表板後,點擊右上角的 建立應用程式 按鈕。若先前已有建立記錄,請直接於列表中點選目標項目。

點擊建立應用程式

Step 3 選擇應用程式類型

在應用程式類型選單中,選取 消費者 (Consumer) 選項,並點擊「繼續」。

選擇消費者應用程式類型

Step 4 填寫基礎資訊

輸入您的「顯示名稱」與「應用程式聯絡電子郵件地址」,填寫完畢後點選「建立應用程式」。

填寫顯示名稱與電郵
安全驗證: 點擊後會彈出 Facebook 安全驗證視窗,請重新輸入您的 FB 密碼並點選「提交」以通過驗證。
Facebook 安全密碼驗證

二、平台設定與網域驗證

Step 5 設定 Facebook 登入產品

於應用程式儀表板首頁找到「Facebook 登入」功能,並點選卡片上的 設定 按鈕。

設定 Facebook 登入產品

Step 6 選擇 Web 平台

在可用平台選項中,請選擇 www (Web) 作為您的應用程式平台。

選取網頁平台

Step 7 設定網站網址

貼入您的網站完整網址後點擊 Save 並按「繼續」。您可以依序瀏覽文件直到頁面底端。

⚠️ 關鍵提醒: 網址必須具備 https:// 加密協定(SSL 安全性網址),否則系統將無法成功串接。
輸入網站 URL

Step 8 完善基本資料與政策連結

🚀 操作路徑: 設定 基本資料

詳細資料設定:

  • 顯示名稱: 填入您的品牌或商店名稱。
  • 應用程式網域: 輸入您的網域(不含 https://),建議包含 www 與非 www 版本。
  • 隱私政策網址: 貼入網站中隱私權聲明頁面的完整網址。
  • 資料刪除資訊: 可同樣填入隱私政策網址。

填寫完畢後,點擊最下方的 儲存變更

基本資料設定細節

Step 8-1 商家驗證程序 (選填)

若您的應用程式涉及進階權限需求,Facebook 可能要求完成商家驗證。請捲動至「商家驗證」區塊並依指示操作。

Facebook 商家驗證區塊

三、OAuth 設定與權限開通

Step 9 設定用戶端 OAuth

🚀 操作路徑: 產品 Facebook 登入 設定

1. 核心功能開關設定:

請確保開啟以下 5 個關鍵功能:用戶端 OAuth 登入、網路 OAuth 登入、強制使用 HTTPS、對重新導向 URI 使用 Strict 模式、Login with the JavaScript SDK。

OAuth 開關設定示意

2. 設定重新導向 URI:

請將以下兩組網址貼入欄位(請將網域替換為您的商店網域):

https://www.您的網域.com/fbAuthForLine
https://www.您的網域.com/fb-login

3. JavaScript SDK 允許網域:

輸入網域首頁連結後點擊 儲存變更

https://您的網域.com
https://www.您的網域.com

Step 10 開通進階存取權限 (Advanced Access)

🚀 操作路徑: 應用程式審查 權限和功能

搜尋 emailpublic_profile 兩項權限,點擊右側的 取得進階的存取權限 (Get Advanced Access)

搜尋並開通進階權限

Step 11 權限狀態確認與上線

確認上述項目的存取層級顯示為綠色的 Advanced Access

❌ 常見錯誤排除:
若顯示「需提供隱私政策網址」等錯誤,請將應用程式模式由「開發中」切換為 「上線」(Live) 模式。
切換上線模式示意

四、取得金鑰與完成串接

Step 12 擷取 App ID 與密鑰

🚀 操作路徑: 設定 基本資料

找到「應用程式密鑰」並點擊 顯示。通過安全驗證後,即可複製密鑰字串。

顯示應用程式密鑰

Step 13 網站後台設定

複製您的 **App ID** 與 **App Secret**,並貼回網站管理後台對應欄位,點擊 儲存 即可完成所有串接流程。

網站後台填寫金鑰
最後叮嚀: 建立後 60 天內務必留意 FB 開發者後台的「資料使用情形檢查」通知並依限完成,以維持功能正常運作。