Getting Started

Copy sebuah prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-social-login`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/social-login/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Pemasangan

Anda dapat menggunakan Pengaturan Asisten AI kami untuk menginstal plugin. 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:

Instal paket

npm install @capgo/capacitor-social-login

Sinkron dengan proyek native
Jendela terminal
```
npx cap sync
```

Inisialisasi pada startup 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 inti

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

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

Pengecekan sesi

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

Kode autentikasi dan refresh

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

Bantuan lanjutan

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' returns serverAuthCode Dari login. Dalam mode ini, logout, isLoggedIn, getAuthorizationCode, dan refresh tidak tersedia.

Hanya gunakan sebagai input untuk pertukaran token backend Anda. Jika Anda perlu memanggil serverAuthCode sebagai gantinya. SocialLogin.refresh() Apple google.mode: 'online' Bab berjudul “Apple”

Untuk pengaturan token ketat dan

Alur arus redirect OAuth2 web useProperTokenExchange: true Bab berjudul “Alur arus redirect OAuth2 web” useBroadcastChannel: true __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Gunakan untuk aliran web yang berpindah dari halaman. OAuth2LoginOptions.flow: 'redirect' Untuk aliran web yang berpindah dari halaman.

Ketergantungan penyedia dinamis

Anda dapat mengonfigurasi penyedia mana yang termasuk untuk mengurangi ukuran aplikasi native. Hal ini paling berguna ketika aplikasi Anda hanya membutuhkan penyedia tertentu.

Tambahkan konfigurasi penyedia 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 penyedia berarti:

true: penyedia diaktifkan dan ketergantungan native-nya dikompilasi.
false: penyedia dinonaktifkan dan ketergantungan native-nya tidak dikompilasi.

Rincian penting:

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

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

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

Teruskan dari Getting Started

Jika Anda menggunakan Mulai Berlari untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli di Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, dan Dua faktor autentikasi untuk detail implementasi di Dua faktor autentikasi.