เพิ่มการเข้าสู่ระบบด้วย Google ให้เว็บไซต์ใดก็ได้ด้วย Supabase

ระบบยืนยันตัวตน Supabase ที่มีอยู่

คู่มือนี้เพิ่ม Google เป็นอีกหนึ่งตัวเลือกในการเข้าสู่ระบบให้เว็บไซต์ที่ระบบยืนยันตัวตนของ Supabase ใช้งานได้อยู่แล้ว — การสมัครสมาชิก การเข้าสู่ระบบ และเซสชัน หากเว็บไซต์ของคุณยังไม่มี ให้ทำส่วนนั้นให้เสร็จก่อน แล้วค่อยกลับมาที่นี่

เพิ่มระบบยืนยันตัวตนผู้ใช้ให้เว็บไซต์ใดก็ได้ด้วย Supabase

สร้างการสมัครสมาชิก การเข้าสู่ระบบ เซสชัน และพื้นที่ที่ป้องกันไว้ด้วย Supabase

/video/add-user-authentication-supabase

คัดลอก Callback URL ของ Supabase

เปิด Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

คัดลอก Callback URL (for OAuth) ค่านี้ใช้ใน Google Cloud ไม่ใช่ในโค้ดเว็บไซต์ของคุณ

ตั้งค่า Google Auth Platform

เปิด Google Cloud Console

https://console.cloud.google.com/auth/branding

Your project Google Auth Platform

เพิ่มข้อมูลแอปในหน้า Branding — เลือก "External" เป็น Audience เผยแพร่แอปในหน้า Audience — หรือปล่อยไว้ในสถานะ "Testing" แล้วเพิ่มตัวคุณเองเป็นผู้ใช้ทดสอบ ยืนยันขอบเขตพื้นฐานในหน้า Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

สร้าง OAuth Client

Google Auth Platform Clients Create client

เลือก "Web application" เพิ่มเว็บไซต์ของคุณใน Authorized JavaScript origins วาง Callback URL ของ Supabase ใน Authorized redirect URIs คลิก "Create" คัดลอก Client ID และ Client Secret — Google จะแสดง secret เพียงครั้งเดียว

URL ของเว็บไซต์ → Authorized JavaScript origins

Callback URL ของ Supabase → Authorized redirect URIs

เพิ่ม Google Client ใน Supabase

กลับไปที่ผู้ให้บริการ Google ใน Supabase — แท็บเดียวกับในขั้นตอนที่ 1

Your project Authentication Sign In / Providers Google

เปิดใช้ Google

วาง Client ID จาก Google

วาง Client Secret จาก Google

บันทึก

เก็บ Client Secret เป็นความลับ

Client Secret ควรอยู่ใน Supabase เท่านั้น ห้ามเปิดเผยในโค้ดฝั่ง frontend หรือในตัวแปรสภาพแวดล้อมสาธารณะเด็ดขาด

เพิ่มปุ่มเข้าสู่ระบบด้วย Google

AI ของคุณจะเพิ่ม Google ให้ระบบเข้าสู่ระบบที่คุณมีอยู่แล้ว โดยไม่สร้างใหม่

เพิ่ม "Continue with Google"

เพิ่มการเข้าสู่ระบบด้วย Google ให้ระบบยืนยันตัวตน Supabase ที่มีอยู่ โดยคงขั้นตอนการเข้าสู่ระบบเดิมไว้ แล้วรายงาน Redirect URLs ที่คุณต้องใช้ใน Supabase

Add "Continue with Google" to this project's existing Supabase Authentication. Google is already enabled as a provider in my Supabase project, and the Google Client ID and Client Secret are already saved there. Nothing about Google needs to be configured in code. Before changing anything, inspect the current project: - the existing Supabase client(s) and how they are configured - the sign-in page, and the sign-up page if there is one - any existing auth callback route - how protected pages are guarded - how the session is read, kept in sync, and signed out - whether a profile row is created for new users - whether any signed-in user has private data of their own (for example rows protected by Row Level Security) Preserve this project's existing authentication architecture. Make the smallest focused change that adds Google — do not refactor, rename or restyle unrelated code. WHAT TO DO - Add one "Continue with Google" button to the existing sign-in page, and to the sign-up page if there is one. Match the existing design and components. - Start sign-in with the project's existing Supabase client: supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo } }). - Follow this project's own architecture instead of forcing one: - Browser-only app: make sure the page the user returns to picks up the new session through the existing session handling. - PKCE or server-rendered auth (for example @supabase/ssr or Next.js): return through a callback route that exchanges the code for a session with the existing server-side client. Reuse an existing callback route; add one only if none exists, following the project's routing conventions. - redirectTo is a page on THIS website. Build it at runtime from the current site origin, or from the project's existing site URL setting. Never hard-code localhost or a domain. - Never use the Supabase Callback URL (the one ending in /auth/v1/callback) as redirectTo — that URL belongs only in Google Cloud, not in this project's code. - After sign-in, send the user where email/password sign-in already sends them, and keep any existing "return to the page I came from" behavior. - Show a loading state while sign-in starts, and prevent repeated clicks. - If sign-in fails or is cancelled, show an error in the existing style and keep the page usable. - Returning users: the same Google account must reuse the same Supabase user, never create a duplicate. Make any profile creation safe to run more than once. - If a profile row is created for new users, make sure it works for Google users too — they have no password and no sign-up form fields; Google provides their name and picture in the user metadata. - If any signed-in user has private data of their own, preserve the existing data isolation exactly as it is (Row Level Security, policies, user id ownership, server-side checks) for a Google user too. Do not loosen, bypass or duplicate it. - Do not build custom account linking — Supabase already links a Google sign-in to an existing user with the same verified email. KEEP AS IT IS - the existing authentication UI and architecture - email/password sign-in and sign-up, if the project has them - protected routes and their guards - session handling and sign-out - Row Level Security and database policies - environment variables and the existing Supabase client configuration - unrelated pages and design NEVER - rebuild or replace the existing authentication - create a second Supabase client or a second authentication system - add a Google sign-in library or call Google APIs directly - put the Google Client Secret, a Supabase secret key or a service-role key in frontend code - deploy anything Run the production build and fix any errors you introduced. Finish with exactly this summary: GOOGLE LOGIN ADDED - Files changed: <each file, with what changed> - Sign-in flow: <browser / callback route at path> - Return URL: <the exact redirectTo path this code uses> - Supabase Redirect URLs to allow: <each full URL this code uses, one per line — the live site and local development; if the live domain is unknown, the path to add after it> - Private user data: <preserved / not applicable> - Still to do: <nothing, or a short list>

เพิ่ม URL สำหรับส่งผู้ใช้กลับ

เพิ่มเฉพาะ Redirect URLs ที่ AI ของคุณระบุไว้ด้านบน

Your project Authentication URL Configuration Redirect URLs

ค่าเหล่านี้ไม่ใช่ Callback URL จากขั้นตอนที่ 1 — URL นั้นใช้ใน Google Cloud เท่านั้น

เข้าสู่ระบบด้วย Google ได้

เปิดเว็บไซต์ของคุณ คลิก "Continue with Google" แล้วเลือกบัญชี Google ยืนยันว่าคุณกลับมาที่เว็บไซต์ในสถานะเข้าสู่ระบบแล้ว

หากต้องการ ให้ยืนยันบัญชีได้ที่:

Your project Authentication Users

เข้าสู่ระบบซ้ำได้

ออกจากระบบ แล้วเข้าสู่ระบบด้วย Google อีกครั้ง ยืนยันว่า Supabase ใช้บัญชีเดิมของคุณแทนการสร้างบัญชีซ้ำ

ระบบยืนยันตัวตนเดิมยังใช้งานได้

ยืนยันว่าการเพิ่ม Google ไม่ได้เปลี่ยนแปลงสิ่งที่เคยใช้งานได้อยู่แล้ว

คุณยังอยู่ในระบบหลังรีเฟรชหน้า

หน้าที่ป้องกันไว้ยังต้องเข้าสู่ระบบก่อน

การเข้าสู่ระบบด้วยอีเมลและรหัสผ่านยังใช้งานได้ หากแอปของคุณมี

ผู้ใช้แต่ละคนยังเห็นเฉพาะข้อมูลส่วนตัวของตัวเอง

การเข้าสู่ระบบด้วย Google ใช้งานได้แล้ว

ขั้นตอนสุดท้ายจะยืนยันชื่อและโลโก้แอปของคุณ เพื่อให้ผู้ใช้จดจำแบรนด์ของคุณได้ การแทนที่ที่อยู่สำหรับยืนยันตัวตน supabase.co ที่มองเห็นได้เป็นอีกเรื่องหนึ่ง และต้องใช้โดเมนที่กำหนดเองของ Supabase

แนะนำสำหรับ Production

การเข้าสู่ระบบด้วย Google ใช้งานได้อยู่แล้ว ขั้นตอนนี้จะแสดงชื่อและโลโก้แอปที่ยืนยันแล้วเมื่อผู้ใช้เข้าสู่ระบบ

กรอกข้อมูลแบรนด์ของแอป Google ให้ครบ

เปิด Google Auth Platform

https://console.cloud.google.com/auth/branding

Google Auth Platform Branding

App name

App logo

Application home page

Application privacy policy link

Application terms of service link หากคุณมี

Authorized domain

Developer contact information

เพิ่มหน้านโยบายความเป็นส่วนตัวและข้อกำหนดการใช้งานให้เว็บไซต์ที่สร้างด้วย AI ใดก็ได้

ยังไม่มีนโยบายความเป็นส่วนตัวหรือหน้าข้อกำหนดใช่ไหม? สร้างก่อนเลย

/video/add-privacy-policy-and-terms-pages-to-any-ai-built-website

ยืนยันโดเมนและแบรนด์ของคุณ

เปิด Google Search Console

https://search.google.com/search-console

ยืนยันโดเมนของคุณใน Google Search Console หากยังไม่ได้ทำ กลับไปที่หน้า Branding ใน Google Auth Platform คลิก "Verify Branding"

Google อาจอนุมัติโดยอัตโนมัติหรือต้องมีการตรวจสอบ

เผยแพร่และทดสอบอีกครั้ง

เมื่อ Google แสดง "Ready to publish" ให้คลิก "Publish branding" เปิดเว็บไซต์ของคุณในหน้าต่างเบราว์เซอร์แบบส่วนตัว คลิก "Continue with Google" ยืนยันว่าชื่อและโลโก้แอปของคุณปรากฏขึ้น

ไม่บังคับ: ใช้โดเมนยืนยันตัวตนที่กำหนดเอง

ฟีเจอร์แบบเสียเงินของ Supabase — ไม่จำเป็นสำหรับการเข้าสู่ระบบด้วย Google ใช้เมื่อต้องการ URL ยืนยันตัวตนที่มีแบรนด์ของคุณ หรือเมื่อการยืนยันของ Google ต้องใช้โดเมนยืนยันตัวตนที่คุณควบคุมเอง

การยืนยันแบรนด์จะเปลี่ยนชื่อแอปและโลโก้ที่ Google แสดง ส่วนโดเมนที่กำหนดเองของ Supabase จะแทนที่ที่อยู่ยืนยันตัวตนเริ่มต้น project-ref.supabase.co ด้วยที่อยู่ของคุณเอง เช่น auth.example.com

หลังจากเปิดใช้งานแล้ว ให้เพิ่ม callback URL ของโดเมนนั้น (https://auth.example.com/auth/v1/callback) ใน Authorized redirect URIs ของ Google Client ของคุณ

โดเมนที่กำหนดเองของ Supabase

https://supabase.com/docs/guides/platform/custom-domains