Beralih ke konten utama
Capgo logo
Tutorial

Pengaturan Autentikasi Supabase dengan Plugin Login Sosial Capacitor

Belajar cara mengintegrasikan autentikasi Supabase dengan plugin login sosial Capgo untuk autentikasi Google, Apple, dan Facebook yang lancar di aplikasi Capacitor Anda.

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengedit

Pengaturan Autentikasi Supabase dengan Plugin Login Sosial Capacitor

Mengatur autentikasi di aplikasi mobile dapat menjadi kompleks, tetapi menggabungkan Supabase dengan Capgo Plugin Autentikasi Sosial membuatnya menjadi lebih mudah. Tutorial ini akan mengajarkan Anda cara mengintegrasikan autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi Capacitor Anda.

Mengapa Menggunakan Supabase dengan Autentikasi Sosial?

Supabase menawarkan backend-as-a-service yang kuat dengan autentikasi bawaan, sementara plugin @capgo/capacitor-social-login menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Untuk integrasi Supabase yang lebih erat, @capgo/capacitor-supabase menambahkan bantuan autentikasi asli dan akses JWT. Bersama-sama, mereka menyediakan:

  • Autentikasi Sosial yang Lancar
  • Pengelolaan Token yang Aman
  • Kemampuan Kompatibilitas Multi-Platform
  • Integrasi Basis Data Sederhana
  • Pengelolaan Pengguna yang Terintegrasi

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Proyek Capacitor yang telah terinstal
  • Akun dan proyek Supabase
  • Akun pengembang untuk penyedia sosial yang dipilih (Google, Apple, Facebook)

Langkah 1: Pasang dan Konfigurasi Plugin Autentikasi Sosial

Pertama, pasang plugin Autentikasi Sosial Capgo:

npm install @capgo/capacitor-social-login
npx cap sync

lihatlah Login Sosial context:Produk/layanan bisnis. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman enterprise.astro. Kunci pesan `enterprise_plugins_capgo_social_login` (Enterprise Plugins Capgo Login Sosial). dan context:Website pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `and` (Dan).

Supabase

halaman pengaturan plugin untuk setup spesifik platform.

  1. Langkah 2: Setup Proyek Supabase:

    • Buat dan Konfigurasi Proyek Supabase Anda Buat proyek Supabase Pergi ke
    • supabase.com dan daftar/masuklah, “Proyek Baru”
    • Pilih organisasi Anda
    • Masukkan sebuah Nama Proyek (misalnya, “Auth MyApp”)
    • Atur sebuah Kata Sandi Basis Data (simpan dengan aman)
    • Pilih wilayah Anda (pilih yang paling dekat dengan pengguna Anda) Klik
    • Simpan “Buat project baru”

  2. Ambil kredit project Anda:

    • Setelah dibuat, pergi ke Pengaturan > API
    • Salin URL project Anda (misalnya, Salin kunci anonim publik Anda https://your-project-ref.supabase.co)
    • __CAPGO_KEEP_0__ Simpan ini untuk digunakan di aplikasi Anda nanti API key
    • Konfigurasi Pengaturan Autentikasi

Konfigurasi Pengaturan Autentikasi

  1. Konfigurasi pengaturan autentikasi umum:

    • Pergi ke Autentikasi > Pengaturan
    • Di bawah Pengaturan umum:
      • Atur URL Situs ke URL aplikasi Anda (misalnya, https://yourdomain.com atau http://localhost:3000 context: HTML fragment teks dari string UI Capgo yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan update hidup Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpan istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpan istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpan istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `consulting_faq_subtitle`). Halaman/area: Halaman layanan konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpan istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ Konsultasi). | Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau).
      • untuk pengembangan) Tambahkan URL Redirect tambahan jika diperlukan: 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. Konfigurasi pengaturan email (opsional tetapi disarankan):

    • Di bawah Pengaturan SMTP, konfigurasi penyedia email Anda
    • Ini memungkinkan konfirmasi email dan pengaturan ulang kata sandi
    • Untuk pengembangan, Anda dapat menggunakan layanan email bawaan

Aktifkan Penyedia Autentikasi Sosial

  1. Akses bagian penyedia:
    • Pergi ke Autentikasi > Penyedia di dashboard Supabase Anda
    • Anda akan melihat daftar penyedia jejaring sosial yang tersedia
    • Setiap penyedia memiliki sebuah Aktifkan toggle dan opsi pengaturan

Sekarang mari kita konfigurasi setiap penyedia jejaring sosial secara rinci:

Langkah 3: Konfigurasi Penyedia Jejaring Sosial di Supabase

Mengatur Autentikasi Google di Supabase

Langkah pertama, dapatkan kunci OAuth Google Anda:

Ikuti panduan setup Google yang komprehensif kami: Panduan Setup Autentikasi Google

Panduan ini mencakup:

  • Menyiapkan Projek Google Cloud
  • Mengatur kunci autentikasi OAuth 2.0 untuk web, iOS, dan Android
  • Mengonfigurasi layar persetujuan
  • Mendapatkan ID dan rahasia klien yang diperlukan

Setelah menyelesaikan pengaturan Google, konfigurasinya di Supabase:

  1. Mengaktifkan penyedia Google di Supabase:
    • Pada dashboard Supabase Anda, pergi ke Autentikasi > Penyedia
    • Cari Google dan aktifkan ON
    • Isi konfigurasi:
      • ID Klien: OAuth Google Anda Web ID Klien (dari Google Cloud Console)
      • Rahasia Klien: OAuth Google Anda Web Rahasia Klien
      • URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
    • Klik Simpan

PentingGunakanlah ID Klien Web dan Rahasia Klien Web di Supabase, bahkan jika Anda sedang membangun aplikasi mobile. ID klien mobile digunakan secara terpisah dalam pengaturan plugin.

Mengatur Autentikasi Apple di Supabase

Ambil kredential Apple:

Ikuti panduan setup Apple yang detail: Pengaturan Autentikasi Apple

Panduan ini membahas:

  • Konfigurasi Akun Pengembang Apple Anda
  • Membuat ID Aplikasi dan ID Layanan
  • Mengonfigurasi Kemampuan Masuk dengan Apple
  • Menghasilkan Kunci Pribadi yang Diperlukan
  • Konfigurasi Spesifik Platform untuk iOS, Android, dan Web

Setelah menyelesaikan pengaturan Apple, konfigurasinya di Supabase:

  1. Mengaktifkan Provider Apple di Supabase:
    • Pergi ke Autentikasi > Penggunaan dan aktifkan Apple ON
    • Isi konfigurasi:
      • ID Klien: Identifikasi ID Layanan Anda (misalnya, com.yourapp.signin)
      • Rahasia Klien: Buatlah JWT ini menggunakan kunci pribadi Apple Anda (lihat Dokumen Apple Supabase untuk format JWT)
      • URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
    • Klik “Simpan”

PerhatianKonfigurasi autentikasi Apple paling kompleks karena persyaratan Apple untuk ID Layanan, kunci pribadi, dan penghasilan JWT. Ikuti dokumentasi kami dengan hati-hati untuk setiap platform.

Mengatur Autentikasi Facebook di Supabase

Ambil kunci akses Facebook:

Ikuti panduan pengaturan Facebook lengkap kami: Pengaturan Autentikasi Facebook

Guid ini mencakup:

  • Membuat akun pengembang Facebook dan aplikasi
  • Mengaktifkan produk Login Facebook
  • Mengonfigurasi URI Redirect OAuth
  • Mendapatkan ID Aplikasi, Rahasia Aplikasi, dan Token Klien
  • Konfigurasi platform khusus untuk iOS dan Android

Setelah menyelesaikan pengaturan Facebook, konfigurasi di Supabase:

  1. aktifkan penyedia Facebook di Supabase:
    • pergi ke Autentikasi > Penyedia dan aktifkan Facebook ON
    • isi konfigurasi:
      • ID Klien: ID Aplikasi Facebook Anda
      • Rahasia Klien: Rahasia Aplikasi Facebook Anda
      • URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
    • Klik “Simpan”

PentingPastikan Anda menambahkan URL panggil balik Supabase ke aplikasi Facebook Anda di https://your-project-ref.supabase.co/auth/v1/callbackValid OAuth Redirect URIs dalam pengaturan Facebook Login. Catatan Penting Konfigurasi Supabase

Pengamanan Tingkat Baris (RLS):

Setelah mengatur autentikasi, aktifkan RLS pada tabel Anda

  • Buka
  • Go to Database > Tabel dan aktifkan Aktifkan RLS untuk setiap tabel
  • Buat kebijakan untuk mengontrol akses data berdasarkan pengguna yang telah masuk

Pengelolaan Pengguna:

  • Lihat pengguna yang telah masuk di Lihat pengguna yang telah masuk di > Pengguna
  • Lihat kejadian autentikasi di Lihat kejadian autentikasi di > Log Autentikasi
  • Atur template email di Atur template email di > Template Email Autentikasi

Melakukan Pengujian Konfigurasi:

  • Menggunakan alat uji autentikasi bawaan Supabase
  • Pergi ke Autentikasi > Pengguna dan klik “Undang pengguna” untuk menguji aliran email
  • Pantau bagian Log context

Page/area: Capgo Builder / native cloud build product page. Role: Short UI label or navigation item. Seen in: page native-build.astro. Message key `native_build_v2_trust_logs_lbl` (Native Build V2 Trust Logs Lbl).

untuk kesalahan autentikasi apa pun Perlu diingat: Plugin ini memerlukan kunci OAuth dari penyedia asli (bukan dari Supabase), sementara Supabase mengelola autentikasi di sisi server. Bagaimana Alur Autentikasi Berfungsi Sebelum melanjutkan ke pengaturan, pahami alur berikut:

Plugin melakukan autentikasi

langsung dengan penyedia sosial (Google/Apple/Facebook)

  1. Plugin menerima token (token akses, token ID) dari penyedia
  2. Aplikasi Anda mengirimkan token ini ke Supabase menggunakan
  3. Plugin mengautentikasi dengan penyedia sosial (Google/Apple/Facebook) secara native signInWithIdToken()
  4. Supabase memvalidasi token dengan penyedia dan membuat sesi pengguna
  5. Supabase mengembalikan token JWT miliknya untuk permintaan autentikasi aplikasi Anda

Konfigurasi Plugin Google

Plugin ini memerlukan ID Klien Web Anda untuk semua platform dan secara opsional ID Klien iOS Anda untuk fitur-fitur iOS tertentu: Poin penting untuk Google: Pakai

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

__CAPGO_KEEP_0__

  • __CAPGO_KEEP_1__ ID Klien Web (tidak ID klien Android/IOS) untuk bidang webClientId bidang
  • Plugin ini akan berfungsi di semua platform dengan hanya ID Klien Web
  • adalah iOSClientId tidak wajib dan hanya digunakan untuk fitur Google iOS khusus

Konfigurasi Plugin Apple

Konfigurasi Apple berbeda antara iOS dan Android:

Untuk iOS (tanda tangan Apple asli):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Untuk Android/Web (memerlukan ID Layanan):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Titik-titik penting untuk Apple:

  • Poin penting untuk Apple:
  • Poin penting untuk Apple:
  • Poin penting untuk Apple: redirectUrl Konfigurasi Plugin Facebook:

Poin penting untuk Facebook:

Poin penting untuk Facebook:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Poin penting untuk Facebook:

  • Penting
  • Penting
  • limitedLogin: true Penting
  • Penting: Lihat panduan kami Facebook setup guide untuk informasi Login yang lebih rinci, termasuk pertimbangan ATT

Complete Plugin Initialization

Ini cara menginisialisasi semua penyedia bersama-sama:

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Catatan Penting:

  • Panggil initialize() context: HTML teks fragmen dari string Capgo UI yang lebih panjang (parent key `appflow_migration_step2`). Halaman/area: Perbandingan/migrasi Appflow pemasaran copy. Peran: Kalimat website. Dilihat di: halaman ionic-appflow.astro. Simpan Capgo produk/merek dan istilah pengembang secara tepat. sekali
  • ketika aplikasi Anda dimulai, bukan sebelum setiap login
  • Anda hanya perlu mengonfigurasi penyedia yang Anda rencanakan untuk gunakan Kredensial di sini berasal dari penyedia asli, bukan dari Supabase
  • Pastikan kredit penyedia sesuai dengan apa yang Anda konfigurasi di Supabase

Langkah 5: Setup Klien Supabase

Instal klien Supabase:

npm install @supabase/supabase-js

Buat layanan Supabase:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Langkah 6: Implementasi Alur Autentikasi

Buat layanan autentikasi yang menggabungkan kedua:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Langkah 7: Implementasi di Aplikasi Anda

Inisialisasi layanan dan tangani autentikasi:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Buat tombol login di UI Anda:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Langkah 8: Konfigurasi Spesifik Platform

Konfigurasi iOS

Untuk instruksi setup iOS yang lebih rinci, lihat panduan spesifik platform kami:

Ringkasan cepat - Tambahkan ke ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Ikuti panduan yang terkait untuk instruksi setup iOS yang lengkap, termasuk konfigurasi proyek Xcode.

Konfigurasi Android

Untuk instruksi setup Android yang lebih rinci, lihat panduan spesifik platform kami:

Setup Android yang penting:

1. Dapatkan jejak fingerprint SHA-1 (diperlukan untuk Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Konfigurasi AndroidManifest.xml - Tambahkan ke android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Tambahkan sumber daya Facebook ke android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Ikuti panduan platform terkait untuk konfigurasi Android yang lengkap, termasuk pengaturan Google Play Services dan pengaturan nama paket.

Langkah 9: Menggunakan Database Supabase dengan Pengguna yang Diantar

Setelah pengguna diotentikkan, Anda dapat menggunakan database Supabase dengan Keamanan Tingkat Baris (RLS):

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Pertimbangan Keamanan yang Penting

  1. Jangan pernah mengungkapkan kunci sensitif di klien code
  2. Pakai variabel lingkungan untuk pengaturan
  3. Aktifkan Keamanan Tingkat Baris di Supabase
  4. Mengvalidasi token di backend Anda jika diperlukan
  5. Menghandle refresh token otomatis dengan Supabase

Mengatasi Masalah Umum

Masalah Kesalahan Token

  • Pastikan konfigurasi penyedia OAuth Anda sesuai antara plugin login sosial dan Supabase
  • Periksa bahwa URL redirect yang benar telah dikonfigurasi

Masalah Spesifik Platform

  • iOS: Pastikan ID paket Anda sesuai dengan konfigurasi pengembang Apple Anda
  • Android: Pastikan fingerprint SHA1 yang benar telah ditambahkan ke Google Console

Gangguan Alur Autentikasi

  • Implementasikan pengelolaan kesalahan yang tepat untuk masalah jaringan
  • Tambahkan status pengisian saat autentikasi

Kesimpulan

Anda telah memiliki sistem autentikasi lengkap yang menggabungkan backend yang kuat dari Supabase dengan kemampuan login sosial native.

  • Autentikasi sosial yang aman dan native
  • Pengelolaan token yang halus
  • Integrasi database waktu nyata
  • Kemampuan yang kompatibel di berbagai platform

Kombinasi Supabase dan plugin Login Sosial Capgo menawarkan solusi autentikasi yang kuat dan skalabel untuk aplikasi Capacitor Anda.

Untuk fitur-fitur yang lebih maju seperti autentikasi multi-faktor Atau, lihat klaim khusus, lihat dan penggunaan plugin login sosial Teruskan dari Pengaturan Autentikasi Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Pengaturan Autentikasi Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial Setup Supabase Authentication with Capacitor Social Login Plugin @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor, dan SSO (Perusahaan) untuk detail implementasi di SSO (Perusahaan).

Update Terkini untuk Capacitor Aplikasi

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

Dukungan Manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk menciptakan aplikasi mobile profesional yang sebenarnya.

Komunikasi Dua Arah dalam Aplikasi Capacitor
Pengembangan Mobile +1
26 April 2025

Komunikasi Dua Arah dalam Aplikasi Capacitor

5 Kesalahan Perbarui OTA yang Harus Dihindari
Pengembangan Keamanan +1
context:Halaman/area: Halaman produk/pricing perusahaan. Peran: Label UI. Dilihat di: halaman enterprise.astro. Kunci pesan `enterprise_hero_security_label` (Label Keamanan Hero Perusahaan).

13 April 2025

5 Praktik Keamanan Terbaik untuk Perbarui Aplikasi Mobile Langsung
Pengembangan Mobile +1
14 Januari 2025

5 Praktik Keamanan Terbaik untuk Perbarui Aplikasi Mobile Langsung

Semua dari blog kami