Pengaturan Umum Supabase Google Login

Pendahuluan

Panduan ini akan mengantumkan Anda melalui integrasi Sign-In Google dengan Supabase Authentication menggunakan plugin Capacitor Social Login. Konfigurasi ini memungkinkan Anda menggunakan Sign-In Google asli pada platform mobile sambil memanfaatkan Supabase Auth untuk autentikasi backend.

Persyaratan

Sebelum memulai, pastikan Anda telah:

1. Buat proyek Supabase

2. Read the Konfigurasi Google Login Umum Petunjuk untuk mengatur kredit OAuth Google

3. Ikuti panduan spesifik platform masing-masing untuk mengatur kredit OAuth Google untuk platform target Anda:

   • Konfigurasi Android
   • Konfigurasi iOS
   • Konfigurasi Web

   Catatan

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

Mengaktifkan penyedia OAuth Google di Supabase

1. Pergi ke halaman Papan Pengaturan Supabase

2. Klik pada proyek Anda

   

3. Perlu Anda pergi ke menu Authentication menu

   

4. Klik pada Providers tab

   

5. Temukanlah Google pemasok

   

6. aktifkan pemasok

   

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

   

   Note

   Termasuk ID klien web, ID klien iOS, dan ID klien Android. Anda dapat melewatkan beberapa di antaranya, tergantung pada platform yang Anda gunakan.

8. Klik pada tombol Save button

   

Catatan

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

Sekarang Anda telah mengaktifkan Sign-In Google dengan Otentikasi Supabase 🎉

Bagaimana Cara Sign-In Google dengan Bantuan Autentikasi Supabase Berfungsi

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

Implementasi Lengkap

Implementasi lengkap tersedia di file Contoh Aplikasi supabaseAuthUtils.ts file.

Judul Bagian “1. Penghasilan Nonce”

Implementasi menghasilkan pasangan nonce yang aman berdasarkan Syarat Nonce Supabase:

// 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 };
}

Alur:

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

2. Sign-In Google

Fungsi ini menginisialisasi 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 melakukan validasi 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 harus validasi sebelum Supabase?

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

1. Mencegah Permintaan Tidak Sah: Jika token memiliki audiens atau nonce yang salah, Supabase akan menolak token tersebut. Validasi terlebih dahulu dapat 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 akan menolak token tersebut dengan pesan kesalahan “nonce mismatch”. Dengan melakukan validasi sebelum mengirimkan ke Supabase, kita dapat mendeteksi masalah ini lebih awal dan secara otomatis mengulangi dengan token yang segar.

3. Keamanan (iOS): On iOS, validation ensures the token was issued for your specific Google Client IDs, preventing potential security issues from using tokens intended for other applications.

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

Jika validasi gagal, fungsi otomatis:

1. Keluar dari Google (membersihkan token yang dicadangkan - sangat kritis pada iOS)
2. Ulangi autentikasi sekali (memaksa generasi token yang baru dengan nonce yang benar)
3. Jika ulang coba juga gagal, kembalikan kesalahan

4. Sign-In Supabase

Terakhir, token yang telah diverifikasi dikirimkan 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 Aplikasi contoh’s supabaseAuthUtils.ts File, yang termasuk:

• getUrlSafeNonce() - Membuat URL-aman acak nonce
• sha256Hash() - Menghash string dengan SHA-256
• getNonce() - Membuat pasangan nonce
• decodeJWT() - Mengurai token JWT
• validateJWTToken() - Mengvalidasi audiens JWT dan nonce
• authenticateWithGoogleSupabase() - Fungsi autentikasi utama dengan retry otomatis

Contoh File Tambahan

• SupabasePage.tsx - Komponen contoh dengan pengaturan redirect (Web)
• SupabaseCreateAccountPage.tsx - Contoh halaman buat akun

Next Steps

Silakan lanjutkan ke panduan pengaturan platform khusus untuk platform target Anda.

• Pengaturan Android
• Pengaturan iOS
• Pengaturan iOS

Teruskan dari Pengaturan Umum Supabase Google Login

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