Mulai
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.
-
Pasang paket
Jendela terminal bun add @capgo/capacitor-social-login -
Sinkronisasi dengan proyek asli
Jendela terminal bunx cap sync -
Inisialisasi pada awal startup aplikasi
import { SocialLogin } from '@capgo/capacitor-social-login';await SocialLogin.initialize({google: {webClientId: 'your-google-web-client-id',iOSServerClientId: 'your-google-server-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
Judul bagian “Contoh aliran inti”Login
Judul bagian “Login”await SocialLogin.login({ provider: 'google', options: { scopes: ['profile', 'email'] },});
await SocialLogin.login({ provider: 'oauth2', options: { providerId: 'github', scope: 'read:user user:email', },});Pengecekan sesi
Judul bagian “Pengecekan sesi”const status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });Kode autentikasi dan refresh
Judul bagian “Kode autentikasi dan refresh”// For providers that support this modeconst authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });await SocialLogin.refresh({ provider: 'google', options: {} as never });Bantuan maju
Bagian berjudul “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
Bagian berjudul “Catatan spesifik penyedia”Mode offline Google
Bagian berjudul “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' __CAPGO_KEEP_0__
Apple
Judul Bagian “Apple”Set useProperTokenExchange: true untuk pengaturan ketat token dan useBroadcastChannel: true untuk pengaturan Android yang disederhanakan.
Aliran Redirect OAuth2 web
Judul Bagian “Aliran Redirect OAuth2 web”Gunakan OAuth2LoginOptions.flow: 'redirect' untuk aliran web yang berpindah dari halaman.
Konfigurasi Provider di Capacitor
Judul Bagian “Konfigurasi Provider di Capacitor”Anda dapat menonaktifkan provider yang tidak digunakan untuk mengurangi biner native:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { appId: 'com.example.app', appName: 'My App', webDir: 'dist', plugins: { SocialLogin: { providers: { google: true, facebook: true, apple: true, twitter: false, }, }, },};