Pengaturan Umum Supabase Google Login

Pendahuluan

Panduan ini akan memandu Anda untuk mengintegrasikan Sign-In Google dengan Supabase Authentication menggunakan plugin Login Sosial Capacitor.

Persyaratan

Pastikan Anda telah memiliki:

1. Buat proyek Supabase

2. Baca panduan Pengaturan Login Google Umum panduan untuk mengatur kredensial OAuth Google

3. Ikuti panduan spesifik platform untuk mengatur kredensial OAuth Google untuk platform target Anda:

   • Pengaturan Android
   • Pengaturan iOS
   • Pengaturan Web

   Peringatan

   Sebelum memulai tutorial Supabase, Anda perlu mengenerate ID klien untuk platform yang Anda rencanakan untuk digunakan. Anda akan menggunakan mereka di langkah 7 dari panduan ini.

Mengaktifkan penyedia Oauth Google di Supabase

1. Pergi ke halaman Dashboard Supabase

2. Klik pada proyek Anda

   

3. Pergi ke menu Authentication Menu Autentikasi Supabase

   

4. Tab Penyedia Supabase Providers Pergi ke menu

   

5. Temukan Google penyedia

   

6. Aktifkan penyedia

   

7. Tambahkan ID klien untuk platform yang Anda rencanakan untuk digunakan

   

   Perlu diingat

   Hal ini termasuk ID klien web, ID klien iOS, dan ID klien Android. Anda dapat melewatkan menyediakan beberapa di antaranya, tergantung pada platform yang Anda gunakan.

8. Klik pada Save tombol

   

Catatan

Anda TIDAK BOLEH mengatur Client Secret (for OAuth) atau Callback URL (for OAuth)Beberapa sumber mungkin juga menyarankan untuk mengatur Skip nonce checks untuk Google di iOS, tetapi dengan panduan ini tidak perlu.

Voilà, Anda telah mengaktifkan Sign-In Google dengan Supabase Authentication 🎉

Bagaimana Helper Sign-In Google dengan Supabase Authentication Bekerja

Bagian ini menjelaskan bagaimana integrasi Google Sign-In dengan Supabase bekerja di balik layar. Memahami aliran ini akan membantu Anda mengimplementasikan dan menyelesaikan masalah autentikasi.

Implementasi Lengkap

Implementasi lengkap tersedia di file aplikasi contoh. supabaseAuthUtils.ts 1. Penghasilan Nonce

Judul bagian “1. Penghasilan Nonce”

kebutuhan nonce Supabase Salin ke clipboard:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Implementasi Lengkap

• rawNonce: String acak aman URL (64 karakter hex)
• nonceDigest: Hash SHA-256 dari rawNonce (dienkripsi hex)
• nonceDigest diarahkan ke Google Sign-In → Google termasuk digest nonce dalam token ID
• rawNonce diarahkan ke Supabase → Supabase menghash nonce mentah dan membandingkannya dengan nonce token

2. Google Sign-In

Fungsi inisialisasi plugin dan masuk dengan Google:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. Validasi JWT

Sebelum mengirimkan token ke Supabase, implementasi memvalidasi token JWT:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Mengapa memvalidasi sebelum Supabase?

Memvalidasi token JWT sebelum mengirimkan token ke Supabase memiliki beberapa tujuan penting:

1. Mencegah Permintaan Tidak Sah: Jika token memiliki audiens yang salah atau nonce tidak sesuai, Supabase akan menolak token tersebut. Memvalidasi terlebih dahulu menghindari panggilan API yang tidak perlu dan memberikan pesan kesalahan yang lebih jelas.

2. Masalah Cache Token: Pada beberapa platform (terutama iOS), Google Sign-In SDK dapat menyimpan token untuk meningkatkan kinerja. Ketika token yang disimpan dikembalikan, token yang disimpan mungkin telah dibuat dengan nonce yang berbeda (atau tidak ada nonce sama sekali), sehingga Supabase menolak token tersebut dengan pesan kesalahan “nonce tidak sesuai”. Dengan memvalidasi sebelum mengirimkan ke Supabase, kita dapat mendeteksi masalah ini lebih awal dan secara otomatis mengulangi dengan token yang segar.

3. Keamanan (iOS): Pada iOS, validasi memastikan token tersebut diterbitkan untuk ID Klien Google yang spesifik, sehingga mencegah potensi masalah keamanan dari menggunakan token yang dimaksudkan untuk aplikasi lain.

4. Pengelolaan Kesalahan yang Lebih Baik: Mendeteksi masalah sebelum Supabase memungkinkan logika ulang otomatis, yang sangat penting untuk mengelola masalah caching iOS secara transparan.

Jika validasi gagal, fungsi secara otomatis:

1. Keluar dari Google (menghapus token yang disimpan - sangat penting pada iOS)
2. Mengulang autentikasi sekali (memaksa generasi token yang baru dengan nonce yang benar)
3. Jika ulangan juga gagal, kembali dengan pesan kesalahan

4. Sign-In Supabase

Akhirnya, token yang telah diverifikasi dikirim ke Supabase:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Referensi Code yang lengkap

Implementasi yang lengkap tersedia di contoh aplikasi’s supabaseAuthUtils.ts file, yang mencakup:

• getUrlSafeNonce() - Membuat Nonce Acak yang Aman untuk URL
• sha256Hash() - Menghash String dengan SHA-256
• getNonce() - Membuat Pasangan Nonce
• decodeJWT() - Membaca Token JWT
• validateJWTToken() - Mengvalidasi Audience dan Nonce JWT
• authenticateWithGoogleSupabase() - Fungsi Autentikasi Utama dengan Ulangan Otomatis

Contoh File Tambahan

• SupabasePage.tsx - Komponen Contoh dengan Pengaturan Redirect (Web)
• SupabaseCreateAccountPage.tsx - Halaman Pendaftaran Contoh

Langkah-Langkah Selanjutnya

Silakan melanjutkan ke panduan pengaturan platform yang spesifik untuk platform target Anda:

• Pengaturan Android
• Pengaturan iOS
• Pengaturan Web

Lanjutkan dari Pengaturan Supabase Google Login - Umum

Jika Anda menggunakan Pengaturan Supabase Google Login - Umum untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli di Menggunakan @capgo/capacitor-login-sosial, @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-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.