官網FB無法登入

WordPress Facebook 登入失效怎麼辦?Super Socializer 與 Meta App 完整修復步驟

最近在經營一個假髮品牌WIGMAN網站,突然間網站FB登入不能成功,於是我就記錄了這個解決過程。


問題簡述:WIGMAN 官網使用 WordPress、WooCommerce 與 Super Socializer 提供 Facebook 快速登入。原本功能正常,後來卻突然出現「應用程式並非使用中」、「Feature Unavailable」及 Invalid Scopes: email 等錯誤。

這次問題並不是單純的 WordPress 外掛故障,而是 Meta App 同時存在以下狀況:

  • App 尚未完成資料存取權限更新
  • public_profile 沒有取得 Advanced Access
  • App 處於開發模式
  • 政策網址與資料刪除網址設定不完整
  • 一般使用者沒有 App 測試角色

以下整理完整的排查與修復步驟。


步驟一:記錄 Facebook 登入錯誤訊息

先不要立刻重裝外掛或建立新 App(這個App指的是meta for developer的應用程式),應先記錄實際出現的錯誤訊息。

步驟 1-1:確認前台顯示的錯誤

這次曾出現以下訊息:

應用程式並非使用中

Facebook Login is currently unavailable for this app.

Invalid Scopes: email

不同錯誤通常代表不同問題。

步驟 1-2:判斷錯誤可能來源

錯誤訊息常見原因
應用程式並非使用中App 處於開發模式,或登入者不是 App 角色
Feature UnavailableMeta 正在限制 App,或基本資料、權限審查未完成
Invalid Scopes: emailemail 權限設定、使用案例或存取層級異常
URL 無法載入OAuth Redirect URI 不一致

這一步的目的,是先判斷問題出在 WordPress、Meta App,還是 OAuth 流程。


步驟二:檢查 Super Socializer 基本設定

進入 WordPress 後台:

Super Socializer → Social Login → Basic Configuration

步驟 2-1:確認 Social Login 已啟用

檢查:

  • Enable Social Login 已勾選
  • Facebook 已勾選
  • WooCommerce 登入頁已啟用社群登入
  • 使用者註冊功能沒有被停用

步驟 2-2:確認 Facebook App ID

Facebook App ID 必須與目前 Meta App 顯示的編號完全一致。

不要繼續使用已淘汰或設定異常的舊 App ID。

步驟 2-3:確認 Facebook App Secret

將新 App 的 App Secret 填入 Super Socializer。

App Secret 不應出現在:

  • 公開文章
  • 公開截圖
  • 教學影片
  • GitHub
  • 網頁原始碼

若曾公開,應立即重新產生。

步驟 2-4:儲存外掛設定

修改後記得捲到頁面最下方,按下儲存。

若網站有快取外掛,也建議清除 WordPress、伺服器與 CDN 快取。


步驟三:確認 OAuth Redirect URI

Facebook 登入完成後,Meta 必須把使用者導回正確的網站網址。

Super Socializer 使用的 Callback URL 為:

https://wigmanshop.com/?SuperSocializerAuth=Facebook

進入:

Meta Developers → Facebook 登入 → 設定

步驟 3-1:開啟必要 OAuth 設定

確認以下選項為開啟:

  • 用戶端 OAuth 登入
  • 網路 OAuth 登入
  • 強制採用 HTTPS
  • 對重新導向 URI 使用 Strict 模式

步驟 3-2:填入有效 OAuth 重新導向 URI

在「有效的 OAuth 重新導向 URI」填入:

https://wigmanshop.com/?SuperSocializerAuth=Facebook

步驟 3-3:確認網址完全一致

Meta 會嚴格比對網址,因此以下內容都必須相同:

  • https
  • 是否有 www
  • 網域
  • 大小寫
  • 問號
  • 查詢參數
  • 結尾斜線

例如以下網址並不等同:

https://wigmanshop.com/
https://www.wigmanshop.com/?SuperSocializerAuth=Facebook
https://wigmanshop.com/?supersocializerauth=facebook

步驟四:判斷是否需要重建 Meta App

這次舊 App 雖然以前可以使用,但後續出現多個設定與權限異常。

步驟 4-1:檢查舊 App 狀態

檢查是否有以下問題:

  • 商家未驗證
  • App 無法切換上線
  • 權限無法申請
  • 使用案例設定異常
  • emailpublic_profile 狀態混亂
  • 必要動作反覆出現
  • App Review 無法提交

步驟 4-2:決定修復舊 App 或建立新 App

若舊 App 累積太多歷史設定問題,重建 App 通常更容易排查。

這次建立的新 App 名稱為:

WIGMAN Social Login 2026

步驟 4-3:選擇正確使用案例

建立 App 時選擇:

使用 Facebook 登入、驗證用戶並索取資料

不要加入與網站會員登入無關的 Marketing API、粉絲專頁或廣告權限。


步驟五:將 App 連結至商家資產管理組合

Meta 可能要求 App 連結已驗證的商家資產管理組合。

步驟 5-1:確認商家已驗證

到 Meta Business 後台確認:

商家驗證:已驗證

步驟 5-2:將 App 連結至正確商家

將 App 連結到實際經營網站的商家,例如:

型格玩家

步驟 5-3:確認帳號權限

以下身分並不相同:

  • Facebook 粉絲專頁管理員
  • Meta Business 管理員
  • Meta App 管理員
  • App 開發人員
  • App 測試人員
  • WordPress 管理員

要處理 App 權限與商家驗證,登入帳號必須對 App 和商家資產具有足夠權限。


步驟六:設定 Meta App 基本資料

進入:

應用程式設定 → 基本資料

步驟 6-1:設定應用程式網域

填入:

wigmanshop.com

這個欄位不要加入:

  • https://
  • 頁面路徑
  • 查詢參數
  • 結尾斜線

步驟 6-2:設定隱私權政策網址

填入:

https://wigmanshop.com/privacy/

頁面必須:

  • 公開可存取
  • 不需登入
  • 不可跳轉到錯誤頁
  • 清楚說明資料蒐集與使用方式

步驟 6-3:設定服務條款網址

填入網站自己的條款頁,例如:

https://wigmanshop.com/order-and-refund/

較理想的做法,是另外建立正式的「網站服務條款」頁。

步驟 6-4:設定用戶資料刪除網址

下拉選擇:

資料刪除指示網址

填入:

https://wigmanshop.com/privacy/

步驟 6-5:在頁面加入資料刪除說明

隱私權政策頁中至少應包含:

使用者如欲刪除透過 Facebook 登入建立的會員帳號及相關個人資料,請寄信至 info@wigmanshop.com,並提供註冊時使用的電子郵件地址。我們將在確認身分後處理資料刪除。

步驟 6-6:儲存並重新整理確認

曾經發生修改後又變回 Facebook 網址的狀況,因此建議:

  1. 關閉其他 Meta Developers 分頁。
  2. 只保留一個基本資料頁。
  3. 修改全部欄位。
  4. 按「儲存變更」。
  5. 等待成功提示。
  6. 重新整理頁面。
  7. 確認設定仍然存在。

步驟七:確認 Facebook Login 所需權限

一般 WordPress 會員登入通常只需要:

public_profile
email

步驟 7-1:確認 public_profile

public_profile 可提供基本公開資料,例如:

  • 姓名
  • Facebook 使用者識別資訊
  • 大頭貼

步驟 7-2:確認 email

email 用來取得 Facebook 帳號的主要電子郵件地址,可用於:

  • 建立 WordPress 會員
  • 建立 WooCommerce 帳號
  • 連結既有會員
  • 寄送帳戶通知

步驟 7-3:不要申請無關權限

例如以下權限與一般 Facebook 會員登入無關:

Business Asset User Profile Access

若網站沒有使用,不需要申請 Advanced Access。


步驟八:檢查 Standard Access 與 Advanced Access

這是整次問題的核心。

步驟 8-1:查看權限層級

進入:

應用程式檢閱 → 權限和功能

檢查:

public_profile
email

步驟 8-2:了解 Standard Access

Standard Access 通常只允許:

  • App 管理員
  • App 開發人員
  • App 測試人員

一般使用者可能會看到:

應用程式並非使用中

步驟 8-3:取得 Advanced Access

要讓一般使用者登入,public_profileemail 都應取得 Advanced Access。

這次初始狀態為:

email:Advanced Access
public_profile:Standard Access

因此一般使用者仍無法登入。


步驟九:完成資料存取權限更新

當申請 public_profile Advanced Access 時,Meta 顯示資料存取權限更新尚未完成。

進入:

資料存取權限更新

流程包含四個部分。

步驟 9-1:完成商家連結

確認 App 已連結到已驗證商家。

步驟 9-2:完成允許的使用方式

Meta 會要求確認 email 等權限的使用方式。

WIGMAN 的實際用途為:

  • 建立會員
  • 登入會員中心
  • 連結既有帳號
  • 提供 WooCommerce 會員與訂單服務

確認用途符合後,勾選:

我保證任何使用這些權限和功能的行為,皆遵循允許的使用方式。

步驟 9-3:完成資料處理問卷

依實際情況填寫:

是否有資料處理者:是
資料處理者:型格玩家工作室
資料控制者:型格玩家工作室
國家/地區:台灣

若網站主機商會儲存會員資料,應依實際狀況列入服務供應商。

步驟 9-4:回答政府資料要求問題

若過去 12 個月沒有因國家安全要求提供使用者資料,選:

步驟 9-5:勾選實際採行的資料處理原則

例如:

  • 審查要求是否合法
  • 僅提供必要的最低限度資料
  • 保留要求、回應與判斷紀錄

答案必須符合實際作業方式。


步驟十:填寫審查人員指示

Meta 審查員需要知道如何實際測試 Facebook Login。

步驟 10-1:填入測試網址

https://wigmanshop.com/my-account/

步驟 10-2:填寫登入步驟

可使用以下英文內容:

1. Open https://wigmanshop.com/my-account/
2. If an existing website account is already logged in, click Log out first.
3. Locate the Facebook Login button on the login page.
4. Click the Facebook Login button.
5. Continue with a Facebook account.
6. After authorization, the user will be redirected to the WIGMAN WooCommerce My Account dashboard.
7. The app uses the user's name, profile picture and email address only to create, link or log in to the website member account.

步驟 10-3:確認 Facebook Login 已整合

選:

步驟 10-4:填寫 Access Code

若網站不需要邀請碼、密碼或付費,可留白,或填:

No additional access code or website credentials are required.
Reviewers can access the public login page and test the Facebook Login flow directly.

步驟 10-5:填寫地理限制

若沒有封鎖國家或 IP,可填:

There are no geographic restrictions or geo-blocking.
The website and Facebook Login page are publicly accessible.

步驟十一:錄製 Facebook Login 審查影片

步驟 11-1:從登出狀態開始

影片應先顯示使用者尚未登入 WIGMAN。

步驟 11-2:開啟會員登入頁

進入:

https://wigmanshop.com/my-account/

步驟 11-3:點擊 Facebook 登入

清楚錄到 Facebook 登入按鈕與跳轉過程。

步驟 11-4:完成 Facebook 流程

Facebook 不一定每次都重新顯示姓名、Email 與大頭貼授權頁。

若使用者以前已授權過,Meta 可能直接跳過該畫面。

步驟 11-5:顯示成功返回會員中心

影片最重要的是呈現:

  1. 點擊 Facebook 登入。
  2. 進入 Facebook。
  3. 返回 WIGMAN。
  4. WooCommerce 顯示已登入。
  5. WordPress 成功建立或連結會員。

步驟十二:處理 App 測試帳號

步驟 12-1:了解開發模式限制

App 處於開發模式時,通常只有 App 角色可以登入。

步驟 12-2:加入真實 Facebook 測試人員

到:

應用程式角色 → 角色

將真實 Facebook 帳號加入 Tester,並請對方接受邀請。

步驟 12-3:不要把粉絲專頁管理員當成 App Tester

粉絲專頁管理員、網站管理員或商家管理員,不會自動取得 App Tester 身分。

步驟 12-4:虛擬測試用戶無法建立時的替代方案

這次 Meta 顯示:

建立測試用戶的功能已暫時停用

因此改用:

  • App 管理員帳號測試
  • 真實帳號加入 Tester
  • App 上線後使用一般帳號測試

步驟十三:提交資料存取權限更新

步驟 13-1:確認四個區塊完成

確認以下項目都已完成:

  • 商家連結
  • 允許的使用方式
  • 資料處理
  • 審查人員指示

步驟 13-2:正式提交

提交後,狀態會顯示:

審查中

步驟 13-3:等待審查結果

審查期間不要頻繁修改:

  • App ID
  • App Secret
  • OAuth Redirect URI
  • 政策網址
  • 權限
  • 使用案例
  • 商家連結

步驟 13-4:確認完成通知

這次最後收到:

資料存取延續已完成
此年度評估無須採取其他動作

表示資料存取更新正式完成。


步驟十四:取得 public_profileemail Advanced Access

回到:

應用程式檢閱 → 權限和功能

確認:

public_profile:Advanced Access
email:Advanced Access

兩項都應顯示:

已授予進階存取權限

這代表 App 已具備向一般使用者要求基本登入資料的條件。


步驟十五:將 Meta App 切換為上線

步驟 15-1:確認必要條件完成

上線前確認:

  • 商家已驗證
  • 基本資料完整
  • OAuth Redirect URI 正確
  • public_profile 為 Advanced Access
  • email 為 Advanced Access
  • 資料存取權限更新已完成

步驟 15-2:切換上線模式

將 App 從:

開發中

切換為:

上線

若仍維持開發模式,一般使用者仍可能無法登入。


步驟十六:使用一般 Facebook 帳號進行最終測試

步驟 16-1:選擇一般帳號

使用一個:

  • 不是 App 管理員
  • 不是 App 開發人員
  • 不是 App Tester
  • 最好從未登入過網站

的 Facebook 帳號。

步驟 16-2:使用無痕視窗

避免舊登入狀態與快取影響測試。

步驟 16-3:完成首次 Facebook 登入

確認能:

  1. 從 WIGMAN 前往 Facebook。
  2. 完成登入或授權。
  3. 返回 WIGMAN 會員中心。
  4. 顯示已登入帳號。

步驟 16-4:檢查 WordPress 後台

到:

使用者 → 所有使用者

確認新會員已建立。

步驟 16-5:進行第二次登入

先登出,再使用同一個 Facebook 帳號登入。

確認系統連回原會員,而不是再次建立重複帳號。


最終修復結果

完成以上流程後,Facebook 登入恢復正常。

這次最終確認:

  • 一般 Facebook 使用者可以登入
  • Facebook 成功導回 WIGMAN
  • WooCommerce 會員中心顯示已登入
  • WordPress 後台建立新會員
  • public_profileemail 都取得 Advanced Access
  • Meta App 已正式上線

Facebook Login 故障的核心解法

整體流程可以濃縮為:

步驟一:確認錯誤訊息
↓
步驟二:檢查 Super Socializer
↓
步驟三:確認 OAuth Redirect URI
↓
步驟四:修復或重建 Meta App
↓
步驟五:完成商家驗證
↓
步驟六:補齊政策與資料刪除網址
↓
步驟七:完成資料存取權限更新
↓
步驟八:取得 public_profile 與 email Advanced Access
↓
步驟九:將 App 切換上線
↓
步驟十:使用一般帳號測試

真正解除這次問題的關鍵是:

完成 Meta 資料存取權限更新,讓 public_profileemail 都取得 Advanced Access,再把 App 切換為上線模式。

留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *