顛覆認知！我讓 AI 給我加上了 Google 登錄功能，過程簡單到離譜
整理版優先睇
用Supabase加Trae，幾分鐘為出海應用加上Google登錄
呢篇文章係作者分享自己點樣利用Supabase同Trae快速為網站添加Google登錄功能。作者本身係一個探索AI工具出海嘅開發者，之前分享過揾需求、變現、復刻網站等經驗。佢發現要實現安全可靠嘅Google登錄，傳統方法需要繁瑣嘅後端配置，但透過Supabase呢個後端即服務平台，配合Trae呢個AI編程工具，可以幾乎唔寫後端代碼就完成。佢嘅結論係AI編程大大降低開發門檻，令出海應用開發更快速。
具體操作分兩大部分：首先喺Supabase同Google Cloud配置OAuth，獲取Client ID同Secret；然後用Trae輸入提示詞，自動生成代碼整合。作者詳細列出步驟，並強調Trae嘅好處係唔使煩惱網絡問題同二次驗證，消耗精力最少。
最後佢展示成功登錄嘅結果，Supabase數據庫成功記錄用戶。呢篇文章唔單止係技術教程，更係對未來開發模式嘅展望—AI將開發意圖直接轉換成代碼，解放生產力。
- 海外應用必備Google登錄，傳統OAuth實現複雜，但用Supabase + AI編程工具可大幅簡化。
- 配置步驟：先喺Supabase開Google provider，再去Google Cloud建立OAuth客戶端，填返callback URL。
- 用Trae輸入清晰提示詞，參考官方文檔，AI自動生成服務器端認證代碼，幾分鐘完成。
- 成功測試：點擊Google登錄，選擇賬號後跳轉成功，Supabase Users表自動記錄用戶。
- 呢種模式展現AI編程潛力，開發者只需專注配置同提示，後端邏輯由平台同AI處理。
Supabase Google登錄配置文檔
官方文檔，包含環境選擇
Supabase服務器端認證文檔
建立客戶端嘅參考
出海應用嘅登錄難題
作者一路探索AI工具出海，發現海外市場「使用Google登錄」幾乎係所有主流應用嘅標配，佢唔單止係用戶最習慣、最信任嘅登錄方式，更加係產品能否快速被市場接受嘅關鍵一環。
但要實現安全可靠嘅Google登錄，傳統OAuth 2.0流程涉及服務器端驗證，往往需要複雜嘅後端代碼，對於追求快速迭代嘅AI應用嚟講，呢個係一個唔細嘅開發負擔。
喺Supabase同Google Cloud配置OAuth
- 1 喺Supabase嘅Authentication > Sign in/Providers度找到Google，撳Disable開啟。
- 2 彈出浮層後需要Client IDs同Client Secret，呢啲資訊要去Google Cloud網站配置。
- 3 去Google Cloud Console新建項目，啟用API同服務，設定OAuth權限請求頁面（受眾揀「外部」）。
- 4 返到項目首頁，喺API同服務 > 憑證度建立OAuth客戶端ID，應用類型揀Web應用。
- 5 將Supabase提供嘅callback URL填入URI地址欄，創建後複製Client ID同Secret返去Supabase浮窗保存。
用Trae自動生成代碼
Trae係字節開發嘅AI編程工具，作者揀佢嘅原因係消耗精力最少，唔似其他工具成日要二次驗證或者遇到網絡問題，極度消耗精力。
幫我增加Supabase實現Google登錄，這是Supabase參考文檔：
https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server 特別注意，需要使用服務器端認證方式，這是參考文檔：
https://supabase.com/docs/guides/auth/server-side/creating-a-client等幾分鐘後開發完成，測試頁面就係咁正常顯示咗Google登錄嘅入口。
成功登錄示範
撳Google登錄，揀Google賬號，好快就顯示登錄成功。再睇Supabase嘅Users數據庫表，確實有返剛才揀嘅Google賬號對應用戶記錄。
AI編程嘅未來
Supabase簡化咗後端邏輯，而Trae呢類AI編程工具就將我哋嘅開發意圖直接轉化為可執行嘅代碼，極大解放咗生產力。希望呢篇教程可以為你打開一扇新大門，感受AI編程嘅魅力。
最近有時間就不停探索 AI 工具出海，之前都分享過點樣揾需求、點樣變現、點樣翻版一個網站，今日就分享下點樣為翻版咗嘅網站加返 Google 登入功能。
喺海外市場，“用 Google 登入”幾乎係所有主流應用嘅標配。佢唔單止係用戶最習慣、最信任嘅登入方式，仲係你件產品可唔可以快啲俾市場接受嘅關鍵一環。
不過，要實現一個安全可靠嘅 Google 登入，尤其係牽涉到服務器端驗證嘅 OAuth 2.0 流程，通常都意味住好繁瑣嘅配置同複雜嘅後端代碼，對於追求快速迭代嘅 AI 應用嚟講，呢個無疑係一個唔細嘅開發負擔。
但如果我話俾你知，而家有一種“魔法”，可以令你喺幾分鐘之內，幾乎唔使寫一行後端代碼，就幫你嘅出海應用加返完整嘅 Google 登入功能呢？
今日，我會向你展示點樣利用強大嘅後端即服務平台 Supabase，結合 AI 編程工具 Trae，輕鬆搞掂呢一切。
呢篇保姆級教程，會徹底改變你對第三方登入開發嘅認知。準備好未？等我哋一齊見證 AI 點樣為“出海”之路掃清障礙！
設定 Supabase 同 Google Cloud
喺 Supabase 入面揀 Authentication -> Sign in/Providers，揾到 Google 然後㩒 Disable
彈出浮層之後需要 Client ID 同 Client Secret，呢啲資料要去 Google Cloud 網站度設定。
攞 Google 應用資料
訪問呢個網址：https://console.cloud.google.com/
打開項目選擇器，㩒新建項目
輸入項目名
㩒 API 同服務
㩒 OAuth 權限請求頁面
㩒開始
輸入項目名，揀郵箱
㩒下一步，受眾揀“外部”
填聯絡郵箱
最後㩒創建就得。
返去項目首頁，㩒 API 同服務
揀憑證，㩒“創建憑證”，揀“OAuth 客戶端 ID”。
應用類型揀“Web 應用”
複製返頭先 Supabase 網站入面嘅 callback URL 去 URI 地址欄
㩒創建，就會睇到客戶端 ID 同客戶端密鑰。
複製去 Supabase 浮窗，㩒保存。
用 Trae 實現 Google 登入
Trae 係字節跳動開發嘅 AI 編程工具，亦係普通人唔需要特殊網絡就可以用嘅 AI 編程工具，雖然而家下架咗 Claude 所有模型，編程能力有啲下降，但係用其他模型嘅話，大部分簡單開發都冇問題。
點解用 Trae 呢？因為 Trae 係最唔費精神嘅，其他工具都會因為唔同原因，本來設定好咗，過一段時間又唔俾用，例如 Cursor 有各種二次驗證，又例如 Google 新出嘅 AntiGravity，登入問題、報錯問題，極度消耗精力。
Supabase Google 登入官方文檔：https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server
服務器端模式文檔：https://supabase.com/docs/guides/auth/server-side/creating-a-client
喺 AntiGravity 輸入提示詞：
幫我加 Supabase 實現 Google 登入，呢個係 Supabase 參考文檔： https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server 特別留意，要用服務器端認證方式，呢個係參考文檔： https://supabase.com/docs/guides/auth/server-side/creating-a-client
等幾分鐘之後就開發完成。
測試
頁面正常顯示咗 Google 登入嘅入口。
㩒 Google 登入，揀 Google 帳號
顯示登入成功
睇下 Supabase，Users 數據庫表入面確實有頭先揀嘅 Google 帳號對應嘅用戶記錄。
睇到未？由設定雲服務到 AI 自動寫代碼，再到最後成功登入，整個過程流暢到飛起，幾乎冇遇到任何阻礙。以前要幾個鍾甚至幾日先做完嘅嘢，而家喺 AI 幫助下，變成咗幾分鐘就搞掂嘅“小事”。
呢個唔單止係一篇關於技術實現嘅教程，更加係一次對未來開發模式嘅展望。Supabase 簡化咗後端邏輯，而 Trae 呢類 AI 編程工具就將我哋嘅開發意圖直接轉化成咗可執行嘅代碼，大大解放咗生產力。
希望呢篇教程可以為你打開一扇新嘅大門，令你都感受到 AI 編程嘅魅力。快啲動手試下啦！
最近有時間就在探索 AI 工具出海，之前也分享過如何找需求、如何變現、如何復刻一個網站，今天分享下如何為復刻後的網站添加 Google 登錄功能。
在海外市場，“使用 Google 登錄”幾乎是所有主流應用的標配。它不僅是用戶最習慣、最信任的登錄方式，更是你的產品能否快速被市場接受的關鍵一環。
然而，實現一個安全可靠的 Google 登錄，尤其是涉及服務器端驗證的 OAuth 2.0 流程，往往意味着繁瑣的配置和複雜的後端代碼，對於追求快速迭代的 AI 應用來說，這無疑是一個不小的開發負擔。
但如果我告訴你，現在有一種“魔法”，可以讓你在幾分鐘內，幾乎不寫一行後端代碼，就為你的出海應用加上完整的 Google 登錄功能呢？
今天，我將向你展示如何利用強大的後端即服務平台 Supabase，結合 AI 編程工具 Trae，輕鬆搞定這一切。
這篇保姆級教程，將徹底改變你對第三方登錄開發的認知。準備好，讓我們一起見證 AI 如何為“出海”之路掃清障礙！
配置 Supabase 和 Google cloud
在 Supabase 中選擇 Authentication-> Sign in/Providers，找到 Google 點擊 Disable
彈出浮層之後需要 Client IDs 和 Client Secret，這些信息需要去 Google Cloud 網站去配置。
獲取 Google 應用信息
訪問網址：https://console.cloud.google.com/
打開項目選擇器，點擊新建項目
輸入項目名稱
點擊 API 和服務
點擊 OAuth 權限請求頁面
點擊開始
輸入項目名稱，選擇郵箱
點擊下一步，受眾羣體選“外部”
填寫聯繫郵箱
最後點擊創建即可。
回到項目首頁，點擊 API 和服務
選擇憑證，點擊“創建憑證”，選擇 “Oauth 客戶端 ID”。
應用類型選擇“Web 應用”
複製剛才 Supabase 網站中的 callback URL 到 URI 地址欄中
點擊創建，就能看到客戶端 ID 和客戶端密鑰了。
複製到 Supabase 浮窗中，點擊保存。
使用 Trae 實現 Google 登錄
Trae 是字節開發的 AI 編程工具，也是普通人不需要特殊網絡就能使用的 AI 編程工具，雖然說現在下架了 Claude 所有模型，編程能力有所下降，但是使用其他模型大部分簡單開發是沒有問題的。
為什麼用 Trae 呢？就是因為 Trae 是消耗精力最少的，其他工具都會因為各種原因，本來配置好了，過一段時間又不讓用了，比如 Cursor 各種二次驗證，比如 Google 新發布的 AntiGravity，登錄問題、報錯問題，極度消耗精力。
Supabase Google 登錄官方文檔：https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server
服務端模式文檔：https://supabase.com/docs/guides/auth/server-side/creating-a-client
在 AntiGravity 中輸入提示詞：
幫我增加 Supabase 實現 Google 登錄，這是 Supabase 參考文檔： https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=server 特別注意，需要使用服務器端認證方式，這是參考文檔： https://supabase.com/docs/guides/auth/server-side/creating-a-client
等待幾分鐘後開發完成。
測試
頁面正常展示了 Google 登錄的入口。
點擊 Google 登錄，選擇 Google 賬號
顯示登錄成功
查看 Supabase，Users 數據庫表中確實有剛才選擇的 Google 賬號對應的用戶記錄。
看到了嗎？從配置雲服務到 AI 自動編寫代碼，再到最後成功登錄，整個過程行雲流水，幾乎沒有遇到任何阻礙。過去需要數小時甚至數天才能完成的工作，現在在 AI 的加持下，變成了幾分鐘就能解決的“小事”。
這不僅僅是一篇關於技術實現的教程，更是一次對未來開發模式的展望。Supabase 簡化了後端邏輯，而 Trae 這樣的 AI 編程工具則將我們的開發意圖直接轉化為了可執行的代碼，極大地解放了生產力。
希望這篇教程能為你打開一扇新的大門，讓你也感受到 AI 編程的魅力。趕緊動手試試吧！