Mulai Menggunakan

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:

1. Install the package

   npm install @capgo/capacitor-social-login

2. Sinkron dengan proyek native

   npx 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 alur utama

Penggunaan

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

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

Bab berjudul “Penggunaan”

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

Kode Autentikasi dan Perbarui

// 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 Khusus Provider

Mode Offline Google

google.mode: 'offline' mengembalikan serverAuthCode dari 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 sederhana.

Alur Redirect OAuth2 Web

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

Ketergantungan dinamis penyedia

You can configure which providers to include to reduce native app size. This is most useful when your app only needs specific providers.

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 tersebut diaktifkan dan ketergantungan native-nya diintegrasikan.
• false: penyedia tersebut dinonaktifkan dan ketergantungan native-nya tidak diintegrasikan.

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.
• Mengaktifkan penyedia dengan false membuatnya tidak tersedia pada waktu runtime, bahkan jika penyedia itu 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 termasuk hanya Google Sign-In dan Apple Sign-In:

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

Dokumentasi terkait

• Ringkasan integrasi
• Integrasi Autentikasi yang Lebih Baik
• Penyedia OAuth2 dan OIDC
• Troubleshooting
• Manifest Privasi dan Pengatur URL iOS
• Migrasi dari Ionic Auth Connect
• Petunjuk Migrasi Autentikasi Sosial
• Migrasi Penyedia yang Tidak Modern
• Paket Migrasi Plugin Enterprise Ionic

Teruskan dari Mulai Menggunakan

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