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
• Pengaturan Umum Google Login - Supabase Penerapan.

Bab berjudul “Penerapan”

aplikasi contoh’s __CAPGO_KEEP_0__ supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakan aplikasi ini.

Menggunakan Bantuan Autentikasi

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 MUST memanggil fungsi dari plugin ketika redirect terjadi untuk menginisialisasi plugin sehingga plugin dapat mengelola redirect dan menutup jendela popup. Anda dapat memanggil baik fungsi ini maupun isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan pengelolaan redirect.

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

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

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

Hal ini sangat penting untuk alur autentikasi popup berjalan dengan benar. Tanpa hal ini, jendela popup tidak akan menutup setelah autentikasi.

Pengaturan Nonce

React Native Google Sign In menuju ke Supabase’s:

• rawNonce __CAPGO_KEEP_0__ 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

Implementasinya termasuk logika retry otomatis:

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

Pengaturan Masalah

Jika autentikasi gagal:

• Pengalihan tidak berfungsi: Pastikan Anda memanggil isLoggedIn() 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 pengalihan yang diotorisasi: Periksa bahwa URL pengalihan yang diotorisasi telah dikonfigurasi di kedua Google Cloud Console dan Supabase
• Perbedaan nonce: Periksa log konsol - fungsi akan secara otomatis mencoba ulang, tetapi Anda dapat keluar secara manual terlebih dahulu jika perlu
• Validasi token gagalPastikan Anda menggunakan mode: 'online' dalam panggilan inisialisasi untuk mendapatkan idToken
• Review contoh aplikasi __CAPGO_KEEP_0__ example app code Lanjutkan dari Supabase Google Login on Web

Bagian berjudul “Lanjutkan dari Supabase Google Login on Web”

Supabase Google Login on Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, for the native capability in Using @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.