Supabase Google Login di Web

Intro

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

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

Penerapan

Implementasi lengkap tersedia di aplikasi contoh’s Panduan ini akan membantu Anda mengintegrasikan Sign-In Google dengan Supabase Authentication di Web. Diperkirakan Anda telah menyelesaikan: Pengaturan Login Google Web dan Pengaturan Umum Login Google Supabase. supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini.

Menggunakan Bantuan Autentikasi

Fitur ini authenticateWithGoogleSupabase fungsi mengatur alur autentikasi secara keseluruhan:

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: Pengaturan Redirect

Kritis: Pengaturan Redirect

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

Ini sangat penting untuk aliran popup OAuth berfungsi dengan benar.

Contoh Implementasi

Tambahkan ini ke komponen Anda yang mengelola 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 Kerjanya

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

Untuk referensi code yang lengkap, lihat bagian Referensi Lengkap Code di Panduan Pengaturan Umum.

Juga lihat:

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

Catatan Penting

Pengaturan Redirect

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

Pengaturan ini sangat penting untuk mengaktifkan alur popup OAuth dengan benar. Jika Anda tidak melakukannya, jendela popup tidak akan menutup setelah autentikasi.

Pengaturan Nonce

Implementasi nonce mengikuti pola dari dokumentasi React Native Google Sign In:

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

Retry Otomatis

Implementasi ini termasuk logika retry otomatis:

• Jika validasi JWT gagal pada usaha pertama, maka keluar dan mencoba sekali lagi
• Ini menangani kasus-kasus di mana token yang disimpan mungkin memiliki nonce yang salah
• Jika usaha ulang juga gagal, maka error dikembalikan

Pembelajaran dari Kesalahan

Jika autentikasi gagal:

• Redirect tidak berfungsi: Pastikan Anda memanggil isLoggedIn() : Pastikan Anda memanggil pada saat komponen dimuat (lihat contoh di atas)
• Audien tidak valid: Pastikan ID Klien Google Anda sesuai di baik Google Cloud Console dan Supabase
• URL Redirect yang Dijalankan: Pastikan URL Redirect yang diizinkan telah dikonfigurasi baik di Google Cloud Console dan Supabase
• Perbedaan Nonce: Periksa log konsol - fungsi akan secara otomatis mencoba lagi, tetapi Anda dapat keluar secara manual jika perlu
• Validasi Token gagal: Pastikan Anda menggunakan mode: 'online' in inisialisasi panggilan untuk mendapatkan idToken
• Review the contoh aplikasi code untuk referensi

Teruskan dari Supabase Google Login on Web

Jika Anda menggunakan Supabase Google Login on Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Gunakan @capgo/capacitor-social-login untuk kemampuan asli di Gunakan @capgo/capacitor-social-login, @capgo/capacitor-login sosial untuk detail implementasi di @capgo/capacitor-login sosial, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik native untuk detail implementasi di @capgo/capacitor-biometrik native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.