Pengaturan Umum Login Google - Supabase

Indonesia

Petunjuk ini akan memandu Anda untuk mengintegrasikan Sign-In Google dengan Supabase Authentication menggunakan plugin Capacitor Social Login. Konfigurasi ini memungkinkan Anda untuk menggunakan Sign-In Google native pada platform mobile sambil memanfaatkan Supabase Auth untuk autentikasi backend.

Prasyarat

Sebelum memulai, pastikan Anda telah:

1. Membuat proyek Supabase

2. Membaca Konfigurasi Login Google Umum Petunjuk untuk mengatur kredential OAuth Google

3. Mengikuti petunjuk spesifik platform untuk mengatur kredential OAuth Google untuk platform target Anda:

   • Konfigurasi Android
   • Konfigurasi iOS
   • Konfigurasi Web

   Pertahankan

   Sebelum memulai tutorial Supabase, Anda perlu menghasilkan 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. Perlu pergi ke halaman Authentication Menu

   

4. Klik pada tab Providers Tab

   

5. Cari provider Google Provider Google Supabase

   

6. Aktifkan Provider Google Supabase

   

7. Tambahkan ID Klien untuk Provider Google Supabase

   

   Catatan

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

8. Klik pada tombol Save Button

   

Catatan

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

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

Bagaimana Google Sign-In dengan Supabase Authentication Helper Bekerja

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

Implementasi Lengkap

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

1. Penghasilan Nonce

Implementasi menghasilkan pasangan nonce yang aman berdasarkan persyaratan nonce Supabase Salin ke papan klip:

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

: String acak yang aman untuk URL (64 karakter hex)

• rawNonce: Hash SHA-256 dari
• nonceDigest(dihex-encoding) rawNonce diarahkan ke Google Sign-In → Google mencantumkan nonce digest dalam token ID
• nonceDigest diarahkan ke Supabase → Supabase menghash nonce mentah dan membandingkannya dengan nonce token
• rawNonce 2. Google Sign-In

Bagian berjudul “2. Google Sign-In”

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?

Mengvalidasi 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. Mengvalidasi 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 akan menolak token tersebut dengan pesan kesalahan “nonce mismatch”. Dengan mengvalidasi 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 diterbitkan untuk ID Klien Google spesifik Anda, mencegah potensi masalah keamanan dari menggunakan token yang dimaksudkan untuk aplikasi lain.

4. Penanganan Error yang Lebih Baik: Mengenali masalah sebelum Supabase memungkinkan logika ulang coba otomatis, yang sangat penting untuk menangani masalah caching iOS secara transparan.

Jika validasi gagal, fungsi secara otomatis:

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

4. Supabase Sign-In

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 Lengkap

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

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

Contoh File Tambahan

• SupabasePage.tsx - Komponen contoh dengan penanganan redirect (Web)
• SupabaseCreateAccountPage.tsx - Halaman contoh pembuatan akun

Langkah-Langkah Selanjutnya

Silakan melanjutkan ke panduan pengaturan platform khusus untuk platform target Anda:

• Pengaturan Android
• Pengaturan iOS
• Pengaturan Web

Lanjutkan dari Pengaturan Login Google Supabase - Umum

Jika Anda menggunakan Supabase Google Login - Pengaturan Umum untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan native di Menggunakan @capgo/capacitor-login-sosial, Menggunakan @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, Menggunakan @capgo/capacitor-biometrik-native untuk detail implementasi di @capgo/capacitor-biometrik-native, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.