Supabase Google Login di Web

Pendahuluan

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

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

Bagian berjudul “Implementasi”

aplikasi contoh’s Panduan ini akan membantu Anda mengintegrasikan Google Sign-In dengan Supabase Authentication di Web. supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakan fitur ini.

Menggunakan Bantuan Autentikasi

Fitur ini authenticateWithGoogleSupabase fungsi 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: Pengelolaan Redirect

Kritis: Pengelolaan Redirect

Saat 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 baik isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan pengaturan redirect.

Hal ini sangat penting untuk mengaktifkan aliran popup OAuth agar berfungsi dengan benar.

Contoh Implementasi

Tambahkan kode 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 contoh lengkapnya di SupabasePage.tsx untuk melihat contoh lengkapnya.

Bagaimana 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 Code Lengkap di Panduan Pengaturan Umum.

Lihat juga:

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

Catatan Penting

Pengaturan Redirect

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 baik isLoggedIn() ATAU initialize() - kedua-duanya akan memicu penghandlean redirect.

Pengaturan ini sangat penting untuk mengaktifkan alur popup OAuth dengan benar. Jika Anda tidak melakukan ini, 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)
• Penonton tidak valid: Pastikan ID Klien Google Anda sesuai di kedua Google Cloud Console dan Supabase
• URL Redirect yang Dijalankan: Pastikan URL Redirect yang diizinkan telah dikonfigurasi di kedua 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 panggilan inisialisasi 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 Menggunakan @capgo/capacitor-social-login untuk kemampuan asli dalam Menggunakan @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