Pembelajaran Dasar

Salin 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.

Instalasi

Kamu bisa menggunakan Setup Bantuan AI untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI kamu 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 Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

Install the package
Tampilan jendela terminal
```
bun add @capgo/capacitor-social-login
```
Sinkron dengan proyek asli
Tampilan jendela terminal
```
bunx cap sync
```

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,
    },
  },
});

When tim team memilih plugin ini

Satu paket untuk Google, Apple, Facebook, Twitter/X, dan penyedia OAuth2 atau OIDC kustom.
Google Sign-In Android melalui Manajer Kredensial bukan plugin komunitas yang sudah usang.
Penyedia seperti Ionic Auth Connect melalui layer kompatibilitas yang terdokumentasi.
Aplikasi yang harus berbagi login code antara build mobile dan web.

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' });

Judul Bagian: “Bantuan Lanjutan”

Judul Bagian: “Catatan spesifik penyedia”

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

Pilih serverAuthCode hanya sebagai input untuk pertukaran token backend Anda. Jika Anda perlu memanggil SocialLogin.refresh() sebaliknya. google.mode: 'online' Apple

Apple

context useProperTokenExchange: true untuk pengaturan token ketat dan useBroadcastChannel: true untuk pengaturan Android yang disederhanakan.

Aliran Redirect OAuth2 Web

Pilih OAuth2LoginOptions.flow: 'redirect' untuk alur web yang berpindah dari halaman.

Ketergantungan Provder Dinamis

Anda dapat mengonfigurasi provder mana yang akan diaktifkan untuk mengurangi ukuran aplikasi native. Hal ini paling berguna ketika aplikasi hanya membutuhkan beberapa provder tertentu.

Tambahkan Konfigurasi Provder 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:

true: penyedia tersebut diaktifkan dan dependensi native-nya diintegrasikan.
falseProvider tersebut dinonaktifkan dan dependensi native-nya tidak dibundel.

Rincian penting:

Jalankan bunx cap sync setelah mengubah konfigurasi penyedia.
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.
Konfigurasi 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 mencakup hanya Google Sign-In dan Apple Sign-In:

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

Teruskan dari Mulai Menggunakan

Jika Anda menggunakan Mulai Menggunakan untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, dan Menggunakan @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi Dua Faktor.