Mulai

Bagian berjudul “Pemasangan”

Gunakan Pengaturan AI-Assisted untuk memasang 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 Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

1. Pasang paket

   npm install @capgo/capacitor-social-login

2. Sinkronisasi dengan proyek asli

   npx cap sync

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

Masuk

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

Mode offline Google

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

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

Apple

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

Aliran Redirect Web OAuth2

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

Ketergantungan Provder Dinamis

Anda dapat mengonfigurasi penyedia mana yang ingin Anda 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 tersebut diaktifkan dan dependensi native-nya diintegrasikan.
• false: penyedia tersebut dinonaktifkan dan dependensi native-nya tidak diintegrasikan.

Detail penting:

• Jalankan npx cap sync setelah mengubah konfigurasi penyedia.
• Jika tidak ada konfigurasi penyedia yang disediakan, semua penyedia akan default ke true untuk konsistensi ke belakang.
• Mengnonaktifkan penyedia false membuatnya tidak tersedia pada waktu eksekusi, 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 mencakup hanya Sign-In Google dan Sign-In Apple:

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

Dokumentasi terkait

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

Lanjutkan dari Getting Started

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