Supabase Google Login di Web

Pendahuluan

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

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

Implementasi

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

Menggunakan Bantuan Otentikasi

Fungsi ini mengelola seluruh alur otentikasi: authenticateWithGoogleSupabase __CAPGO_KEEP_0__

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 memanggil fungsi apa pun dari plugin ketika pengalihan redirect terjadi untuk menginisialisasi plugin sehingga plugin dapat menghandle pengalihan dan menutup jendela popup. Anda dapat memanggil isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan pengalihan redirect.

Ini sangat penting untuk mengaktifkan alur popup OAuth agar berfungsi 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 - Komponen contoh dengan pengaturan redirect
• SupabaseCreateAccountPage.tsx - Halaman contoh pembuatan 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 mengatasi redirect dan menutup jendela popup. Anda dapat memanggil isLoggedIn() ATAU initialize() - kedua akan mengaktifkan pengaturan redirect.

Ini sangat penting untuk aliran popup OAuth berfungsi dengan benar. Tanpa ini, jendela popup tidak akan tertutup 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: Periksa ID Klien Google Anda sesuai di kedua Google Cloud Console dan Supabase
• URL Pengalihan yang Dijamin: Pastikan 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 jika diperlukan
• Validasi Token Gagal: Pastikan Anda menggunakan mode: 'online' di panggilan inisialisasi untuk mendapatkan idToken
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Teruskan dari Supabase Google Login on Web

Pastikan Anda menggunakan

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