Supabase Google Login di Web

Pengaturan AI siap dipasang

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

• Google Login Web setup Pengaturan Umum Google Login - Supabase
• Implementasi Bagian berjudul “Implementasi”.

Implementasi lengkap tersedia di file aplikasi contoh. Petunjuk ini menjelaskan konsep utama dan cara menggunakan fitur ini.

example app’s the supabaseAuthUtils.ts the

this

The authenticateWithGoogleSupabase fungsi ini mengelola seluruh alur autentikasi:

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

Ketika 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 isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan pengelolaan redirect.

Hal ini sangat penting untuk aliran popup OAuth bekerja 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.

Bagaimana Cara Kerjanya

Untuk penjelasan rinci tentang bagaimana aliran autentikasi bekerja, termasuk penghasilan nonce, validasi JWT, dan sign-in Supabase, lihat Bagaimana Cara Kerjanya bagian di guide Pengaturan Umum.

Untuk referensi lengkap code, lihat bagian Referensi Lengkap Code dalam panduan Pengaturan Umum.

Lihat juga:

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

Catatan Penting

Pengaturan Redirect

Ketika 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 menimbulkan penanganan redirect.

Hal ini sangat penting untuk mengaktifkan aliran popup OAuth agar berfungsi dengan benar. Tanpa hal ini, jendela popup tidak akan menutup setelah autentikasi.

Penanganan 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, kode hex) pergi ke 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
• Hal ini menangani kasus-kasus di mana token yang disimpan mungkin memiliki nonce yang salah
• Jika retry juga gagal, maka error dikembalikan

Pengaturan

Jika autentikasi gagal:

• Pengalihan tidak berfungsi: Pastikan Anda memanggil 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 Pengalihan yang Dijamin: Periksa bahwa URL pengalihan 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 terlebih dahulu jika perlu
• Validasi Token Gagal: Pastikan Anda menggunakan mode: 'online' dalam panggilan inisialisasi untuk mendapatkan idToken
• Review the contoh aplikasi code untuk referensi

Lanjutkan 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-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.