Supabase Google Login di Web

Pendahuluan

Petunjuk ini akan membantu Anda mengintegrasikan Sign-In Google dengan Otentikasi Supabase di Web. Diperlukan asumsi bahwa Anda telah menyelesaikan:

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

Implementasi

The complete implementation is available in the contoh aplikasi’s supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakan itu.

Penggunaan Bantuan Autentikasi

The authenticateWithGoogleSupabase fungsi ini mengelola 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 apa pun 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.

Ini sangat penting untuk mengaktifkan alur popup OAuth agar 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
}

Lihatlah SupabasePage.tsx untuk contoh lengkap.

Bagaimana Cara Kerjanya

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

Untuk referensi code yang lengkap, lihat Lengkapi bagian Referensi Code di panduan Pengaturan Umum.

Lihat juga:

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

Catatan Penting

Pengaturan Redirect

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

Penting untuk aliran popup OAuth berfungsi dengan benar. Tanpa ini, jendela popup tidak akan menutup setelah autentikasi.

Pengelolaan Nonce

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

• rawNonce Supabase membuat hash dari signInWithIdToken()
• dan membandingkannya dengan rawNonce yang termasuk dalam token ID dari Google Sign-In nonceDigest yang termasuk dalam token ID dari Google Sign-In
• nonceDigest parameter dalam API Google Sign-In nonce parameter dalam API Google Sign-In

Retry Otomatis

Implementasi ini termasuk logika retry otomatis:

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

Troubleshooting

Bagian berjudul “Pengaturan”

• Jika autentikasi gagal:Redirect tidak berfungsi isLoggedIn() 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 Dijawab: Periksa bahwa URL Redirect yang Dijawab telah dikonfigurasi baik di Google Cloud Console dan Supabase
• Kesalahan Nonce: Periksa log konsol - fungsi akan secara otomatis mengulang, tetapi Anda dapat keluar secara manual jika diperlukan
• Validasi Token gagal: Pastikan Anda menggunakan mode: 'online' di panggilan inisialisasi untuk mendapatkan idToken
• Periksa example app code untuk referensi

Teruskan dari Supabase Google Login di Web

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-login Sosial 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 Dua Faktor Autentikasi untuk detail implementasi di Dua Faktor Autentikasi.