Mulai Menggunakan

Instalasi

Anda dapat menggunakan Pengaturan Asisten AI kami untuk menginstal plugin ini. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

Jika Anda lebih suka Pengaturan Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

1. Install the package

   bun add @capgo/capacitor-social-login

2. Sinkronisasi dengan proyek asli

   bunx cap sync

3. Mulai di awal aplikasi

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   await SocialLogin.initialize({
     google: {
       webClientId: 'your-google-web-client-id',
       iOSClientId: 'your-google-ios-client-id',
       iOSServerClientId: 'your-google-web-client-id',
       mode: 'online',
     },
     apple: {
       clientId: 'your-apple-service-id',
       useProperTokenExchange: true,
       useBroadcastChannel: true,
     },
     facebook: {
       appId: 'your-facebook-app-id',
     },
     twitter: {
       clientId: 'your-twitter-client-id',
       redirectUrl: 'myapp://oauth/twitter',
     },
     oauth2: {
       github: {
         appId: 'your-github-client-id',
         authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
         accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
         redirectUrl: 'myapp://oauth/github',
         scope: 'read:user user:email',
         pkceEnabled: true,
       },
     },
   });

Contoh aliran utama

Login

await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
  },
});

Bagian “Penggunaan Akun”

const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

Judul bagian “Pengecekan Sesi”

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

Bantuan maju

const jwt = await SocialLogin.decodeIdToken({
  idToken: 'eyJhbGciOi...',
});

const { date } = await SocialLogin.getAccessTokenExpirationDate({
  accessTokenExpirationDate: Date.now() + 3600 * 1000,
});

const expired = await SocialLogin.isAccessTokenExpired({
  accessTokenExpirationDate: Date.now() + 1000,
});

const active = await SocialLogin.isRefreshTokenAvailable({ refreshToken: 'a-token' });

Catatan spesifik penyedia

Modus offline Google

google.mode: 'offline' mengembalikan serverAuthCode dari login. Dalam mode ini, keluar, isLoggedIn, getAuthorizationCode, dan refresh tidak tersedia.

Gunakan serverAuthCode hanya sebagai input untuk pertukaran token backend Anda. Jika Anda perlu memanggil SocialLogin.refresh() di dalam aplikasi, gunakan google.mode: 'online' sebaliknya.

Apple

Set useProperTokenExchange: true untuk pengaturan token ketat useBroadcastChannel: true pengaturan sederhana untuk Android.

untuk penggunaan token ketat dan

Use OAuth2LoginOptions.flow: 'redirect' Judul Bagian “OAuth2 aliran redirect web”

Ketergantungan Provder Dinamis

Kamu dapat mengonfigurasi provider mana yang ingin kamu gunakan untuk mengurangi ukuran aplikasi native. Hal ini paling berguna ketika aplikasi kamu hanya membutuhkan beberapa provider tertentu.

Tambahkan pengaturan provider ke capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        facebook: true,
        apple: true,
        twitter: false,
      },
      logLevel: 1,
    },
  },
};

export default config;

Nilai provider berarti:

• trueProvider tersebut telah diaktifkan dan dependensi native-nya telah dibundel.
• false: penyedia ini dinonaktifkan dan dependensi aslinya tidak dibundel.

Rincian penting:

• Jalankan bunx cap sync Setelah mengubah konfigurasi penyedia layanan.
• Jika tidak ada konfigurasi penyedia yang disediakan, semua penyedia akan kembali ke true untuk kompatibilitas mundur.
• Mengaktifkan penyedia dengan false membuatnya tidak tersedia pada waktu runtime, bahkan jika penyedia tersebut hanya menggunakan API sistem.
• Pengaturan ini hanya berlaku untuk iOS dan Android; tidak berlaku untuk Web.
• Apple Sign-In pada Android menggunakan OAuth tanpa ketergantungan eksternal SDK.
• Twitter/X menggunakan OAuth 2.0 standar tanpa ketergantungan eksternal SDK.

Untuk termasuk hanya Google Sign-In dan Apple Sign-In:

plugins: {
  SocialLogin: {
    providers: {
      google: true,
      facebook: false,
      apple: true,
      twitter: false,
    },
  },
}

Dokumentasi terkait

• Penjelasan integrasi
• Integrasi Autentikasi yang Lebih Baik
• Penyedia OAuth2 dan OIDC
• Mengatasi Masalah
• Mengatur Manifest Privasi dan Pengolah URL iOS
• Migrasi dari Ionic Auth Connect
• Petunjuk Migrasi Autentikasi Sosial
• Migrasi Provider Legacy
• Solusi Migrasi Plugin Enterprise Ionic

Teruskan dari Getting Started

Jika Anda menggunakan Mulai Menggunakan untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-autentikasi-sosial untuk kemampuan native 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-native untuk detail implementasi di @capgo/capacitor-biometrik-native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.