Login Supabase Google di Web

Pengenalan

Petunjuk ini akan membantu Anda mengintegrasikan Sign-In Google dengan Supabase Authentication di Web. Diperkirakan bahwa Anda telah menyelesaikan:

• the Pengaturan Login Google Web
• the Pengaturan Umum Google Login - Supabase.

Implementasi

Implementasi lengkap tersedia di file aplikasi contoh. Panduan ini menjelaskan konsep utama dan cara menggunakan supabaseAuthUtils.ts Menggunakan Bantuan Autentikasi

Judul bagian “Menggunakan Bantuan Autentikasi”

mengelola alur autentikasi secara keseluruhan: authenticateWithGoogleSupabase Salin ke clipboard

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Judul bagian “Kritis: Pengelolaan Redirect”

__CAPGO_KEEP_0__

Ketika menggunakan login Google di web, Anda __CAPGO_KEEP_0__ harus isLoggedIn() __CAPGO_KEEP_1__ initialize() memanggil fungsi apa pun dari plugin ketika redirect terjadi untuk menginisialisasi plugin sehingga plugin dapat menghandle redirect dan menutup jendela popup. Anda dapat memanggil

__CAPGO_KEEP_2__

atau

- kedua-duanya akan mengaktifkan penghandlean redirect.

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

Contoh Implementasi Bagian berjudul “Contoh Implementasi” untuk contoh yang lengkap.

Bagaimana Cara Kerjanya

Untuk penjelasan rinci tentang bagaimana alur autentikasi bekerja, termasuk penghasilan nonce, validasi JWT, dan masuk ke Supabase, lihatlah Bagian Bagaimana Cara Kerjanya di panduan Pengaturan Umum.

Untuk referensi code yang lengkap, lihatlah Referensi Code yang Lengkap di panduan Pengaturan Umum.

Lihat juga:

• SupabasePage.tsx - Komponen contoh dengan pengaturan redirect
• SupabaseCreateAccountPage.tsx - Halaman buat akun contoh

Catatan Penting

Pengelolaan Redirect

Ketika menggunakan login Google di web, Anda WAJIB memanggil fungsi dari plugin ketika redirect terjadi untuk menginisialisasi plugin sehingga plugin dapat mengelola redirect dan menutup jendela popup. Anda dapat memanggil isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan pengelolaan redirect.

Hal ini sangat penting untuk mengaktifkan alur popup OAuth agar berfungsi dengan benar. Jika tidak, jendela popup tidak akan menutup setelah autentikasi.

Pengelolaan Nonce

Implementasi nonce mengikuti pola dari dokumentasi Google Sign In React Native berpindah ke Supabase’s:

• rawNonce Supabase membuat hash dari signInWithIdToken()
• dan membandingkannya dengan rawNonce yang termasuk dalam token ID dari Google Sign-In nonceDigest (hash SHA-256, hex-encoded) berpindah ke
• nonceDigest parameter dalam API Google Sign-In nonce Retry Otomatis

Bagian berjudul “Retry Otomatis”

Jika validasi JWT gagal pada usaha pertama, maka keluar dan mencoba sekali lagi

• Retry Otomatis
• Mengatasi kasus di mana token yang disimpan mungkin memiliki nonce yang salah
• Jika ulang coba juga gagal, sebuah kesalahan dikembalikan

Pengaturan

Jika autentikasi gagal:

• Redirect tidak berfungsi: Pastikan Anda memanggil isLoggedIn() pada saat komponen dimuat (lihat contoh di atas)
• Audien tidak sah: Pastikan ID Klien Google Anda sesuai di kedua Google Cloud Console dan Supabase
• URL Redirect yang Dijalankan: Periksa bahwa URL Redirect yang diizinkan telah dikonfigurasi di kedua Google Cloud Console dan Supabase
• Kesalahan Nonce: Periksa log konsol - fungsi akan secara otomatis mencoba lagi, tetapi Anda dapat keluar secara manual jika diperlukan
• Validasi Token Gagal: Pastikan Anda menggunakan mode: 'online' dalam panggilan inisialisasi untuk mendapatkan idToken
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Halaman Edit