你是否遇過這些問題？
你花了好幾個小時設定 Facebook 登入，卻一直看到「無效的 OAuth 重新導向 URI」的錯誤訊息？或者你在 Meta for Developers 後台找不到「Valid OAuth Redirect URIs」在哪裡？又或者你已經把網址填進去了，但登入功能還是無法正常運作？
這些都是開發者在整合 Facebook 登入時最常遇到的問題。本文將帶你從頭到尾，完整走過整個設定流程，讓你的網站 Facebook 登入功能一次到位。
為什麼 Facebook OAuth 設定這麼容易出錯？
Facebook 的 OAuth 設定之所以讓許多開發者感到困惑，主要有三個原因。
第一，Meta for Developers 的介面經常更新。 設定入口的位置在不同時期可能有所不同，有時在「Facebook 登入」產品下，有時需要透過「使用案例」才能找到。
第二，URL 必須完全精確匹配。 Facebook 的安全機制要求，你在程式碼中使用的 redirect_uri 必須與後台設定的 Valid OAuth Redirect URIs 完全一致，包括大小寫、斜線、查詢參數等，任何細微差異都會導致驗證失敗。
第三，HTTPS 是強制要求。 除了 localhost 之外，所有回調 URL 都必須使用 HTTPS 協定，這在開發環境中有時會造成額外的設定負擔。
了解這些背景之後，我們就可以有針對性地完成設定。
前置準備
在開始設定之前，你需要準備好以下兩樣東西。
一、Meta for Developers 帳號與應用程式。 前往 developers.facebook.com 登入，確認你已經建立了一個應用程式。如果還沒有，點擊「建立應用程式」，選擇「讓使用者登入 Facebook」類型，按照步驟完成建立即可。
二、Supabase 的回調 URL。 前往你的 Supabase Dashboard，進入 Authentication → Providers → Facebook，你會看到一個「Callback URL (for OAuth)」欄位，格式如下：
Plain Text
https://你的專案ID.supabase.co/auth/v1/callback
將這個 URL 複製起來 ，後面的步驟會用到。
第一步：在 Meta for Developers 中找到 Facebook 登入設定
登入 Meta for Developers 並進入你的應用程式後，在左側側欄尋找「Facebook 登入」產品。
如果側欄中已經有「Facebook 登入」，直接點擊進入。如果沒有看到，請點擊「使用案例」（Use Cases），找到「Authentication and Account Creation」，點擊「Customize」，再點擊「Go to Settings」。
進入設定頁面後，你會看到「用戶端 OAuth 設定」（Client OAuth Settings）區塊，這是接下來操作的核心位置。
第二步：填寫 Valid OAuth Redirect URIs（最關鍵步驟）
⚠️ 這是整個設定流程中最重要的一步，請特別注意。
在「用戶端 OAuth 設定」區塊中，找到「有效的 OAuth 重新導向 URI」（Valid OAuth Redirect URIs）輸入框，將你剛才從 Supabase 複製的回調 URL 貼入。
以下是一個典型的 Supabase 回調 URL 範例：
Plain Text
https://exqwjystpqgbthldmclr.supabase.co/auth/v1/callback
填入之後 ，請對照下表逐一確認，避免常見錯誤：
檢查項目正確做法常見錯誤協定必須使用 https://誤用 http://（localhost 除外 ）URL 精確匹配與 Supabase 提供的完全一致末尾多了或少了 /空白字元無多餘空格複製時不小心帶入空格強制 HTTPS確認選項已開啟未注意此選項預設狀態
確認無誤後，滾動到頁面最下方，點擊「儲存變更」。這一步非常容易被遺忘，若未儲存，所有設定都不會生效。
以下為付費內容，訂閱後可閱讀完整教學。
【付費內容】第三步：取得 App ID 和 App Secret
在 Facebook 應用程式設定中，點擊左側的「設定」→「基本資料」。你會在頁面上方看到「應用程式編號」（App ID）。旁邊的「應用程式密鑰」（App Secret）預設是隱藏的，點擊「顯示」並輸入你的 Facebook 密碼確認身份後即可看到。
請將這兩個值分別複製保存。App Secret 是高度敏感的資訊，絕對不要公開分享或提交到 Git 版本控制中。
【付費內容】第四步：在 Supabase 中完成 Facebook Provider 設定
回到 Supabase Dashboard，進入 Authentication → Providers，找到 Facebook 並點擊。
