Supabase Google Login di Web

Pengenalan

Panduan ini akan membantu Anda mengintegrasikan Sign-In Google dengan Autentikasi Supabase di Web. Diperkirakan Anda telah menyelesaikan:

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

Implementasi

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

Bagian berjudul “Menggunakan Bantuan Autentikasi”

menangani seluruh alur autentikasi: 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);
}

Kritis: Pengalihan Redirect

Kritis: Pengalihan Redirect

Saat menggunakan login Google di web, Anda MUST harus memanggil fungsi dari plugin ketika pengalihan terjadi untuk menginisialisasi plugin sehingga plugin dapat menghandle pengalihan dan menutup jendela popup. Anda dapat memanggil isLoggedIn() OR initialize() - kedua-duanya akan memicu pengalihan handling.

Hal ini sangat penting untuk alur OAuth popup berjalan dengan benar.

Contoh Implementasi

Tambahkan ini ke komponen Anda yang menghandle Sign-In Google:

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
}

Lihat SupabasePage.tsx untuk contoh lengkap.

Cara Kerja

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

Untuk referensi lengkap code, lihat Referensi Lengkap Code.

Lihat juga:

• SupabasePage.tsx - Contoh komponen dengan pengaturan redirect
• SupabaseCreateAccountPage.tsx - Contoh halaman buat akun

Catatan Penting

Pengaturan Redirect

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

Ini sangat penting untuk aliran popup OAuth berfungsi dengan benar. Tanpa ini, jendela popup tidak akan ditutup setelah autentikasi.

Pengelolaan Nonce

Implementasi nonce mengikuti pola dari dokumentasi Google Sign In React Native pergi 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) pergi ke
• nonceDigest parameter dalam API Google Sign-In nonce Ulang Coba Otomatis

Ulang Coba Otomatis

Implementasinya termasuk logika retry otomatis:

• Jika validasi JWT gagal pada upaya pertama, maka keluar dan mencoba sekali lagi
• Hal ini menangani kasus-kasus di mana token yang disimpan mungkin memiliki nonce yang salah
• Jika retry juga gagal, maka error akan dikembalikan

Pengaturan

Jika autentikasi gagal:

• Redirect tidak berfungsi: Pastikan Anda memanggil isLoggedIn() pada saat komponen dimuat (lihat contoh di atas)
• Audien tidak valid: Pastikan ID Klien Google Anda sesuai di kedua Google Cloud Console dan Supabase
• URL Pengalihan yang Dijamin: Periksa bahwa URL pengalihan 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 terlebih dahulu jika perlu
• Validasi Token Gagal: Pastikan Anda menggunakan mode: 'online' di panggilan inisialisasi untuk mendapatkan idToken
• Ulas contoh aplikasi __CAPGO_KEEP_0__ example app code Teruskan dari Supabase Google Login on Web

Ensure you’re using the latest version of Capacitor

Jika Anda menggunakan Supabase Google Login di Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.