Pengaturan Login Google Supabase - Umum

Intro

Panduan ini akan membantu Anda mengintegrasikan Sign-In Google dengan Supabase Authentication menggunakan plugin Login Sosial Capacitor. Konfigurasi ini memungkinkan Anda 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 context: Panduan gaya penulisan Capgo (Read The Style Guide) Pengaturan Umum Google Login

3. panduan untuk mengatur kredit OAuth Google

   • Konfigurasi Android
   • Konfigurasi iOS
   • Konfigurasi Web

   Pertimbangan

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

Mengaktifkan penyedia Oauth Google di Supabase

1. Pergi ke halaman Dashboard Supabase

2. Klik pada proyek Anda

   

3. Perlukah ke menu Authentication menu

   

4. Klik pada Providers tab

   

5. Cari Google provider

   

6. Aktifkan provider

   

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

   

   Peringatan

   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 tombol

   

Peringatan

Anda context HTML text fragment from a longer Capgo UI string (parent key `you_definition`). Page/area: Capgo marketing website. Role: Long marketing or legal paragraph. Seen in: page disclaimer.astro, page return.astro. Message key `you_definition` (You Definition). Client Secret (for OAuth) atau Callback URL (for OAuth)atau untuk Google di iOS, tetapi dengan panduan ini tidak perlu. Skip nonce checks Voilà, Anda telah mengaktifkan Google Sign-In dengan Supabase Authentication 🎉

Bagaimana Google Sign-In dengan Supabase Authentication Helper Bekerja

Bab yang berjudul “Bagaimana Google Sign-In dengan Supabase Authentication Helper Bekerja”

Penerapan Lengkap

Penerapan lengkap tersedia dalam file aplikasi contoh.

contoh aplikasi’s file. supabaseAuthUtils.ts atau untuk Google di iOS, tetapi dengan panduan ini tidak perlu.

1. Pembuatan Nonce

Implementasi menghasilkan pasangan nonce yang aman berdasarkan persyaratan nonce Supabase Persyaratan 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 aman URL-nya (64 karakter hex)
• nonceDigest: Hash SHA-256 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. Google Sign-In

Fungsi ini menginisialisasi plugin dan melakukan sign-in 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 menghindari panggilan API yang tidak perlu dan memberikan pesan kesalahan yang lebih jelas.

2. Masalah Cache TokenOn 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 dengan pesan kesalahan "nonce mismatch". Dengan melakukan validasi sebelum mengirimkan ke Supabase, kita dapat mendeteksi masalah ini sebelumnya dan secara otomatis mencoba lagi dengan token yang segar.

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

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

Jika validasi gagal, fungsi otomatis:

1. Keluar dari Google (membersihkan token yang disimpan - sangat kritis pada iOS)
2. Ulang coba autentikasi sekali (memaksa pembuatan token segar dengan nonce yang benar)
3. Jika ulang coba juga gagal, kembalikan pesan 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
});

Complete Code Referensi

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

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

Contoh File Tambahan

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

Langkah Selanjutnya

Bagian berjudul “Langkah Selanjutnya”

• Silakan melanjutkan ke panduan pengaturan platform khusus untuk platform target Anda:
• Pengaturan Android
• Pengaturan iOS

Teruskan dari Supabase Google Login - Pengaturan Umum

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