Inizia con Getting Started
Copia una riga di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.
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.
-
Installa il pacchetto
Fenestra del terminale bun add @capgo/capacitor-social-login -
Sincronizza con progetti nativi
Finestra del terminale bunx cap sync -
Inizializza all'avvio dell'app
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,},},});
Esempi di flusso di base
Sezione intitolata “Esempi di flusso di base”Accesso
Sezione intitolata “Accesso”await SocialLogin.login({ provider: 'google', options: { scopes: ['profile', 'email'] },});
await SocialLogin.login({ provider: 'oauth2', options: { providerId: 'github', scope: 'read:user user:email', },});Verifica della sessione
Sezione intitolata “Verifica della sessione”const status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });Codici di autenticazione e ricarica
Sottosezione intitolata “Codici di autenticazione e ricarica”// For providers that support this modeconst authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });await SocialLogin.refresh({ provider: 'google', options: {} as never });Aiuto avanzato
Sottosezione intitolata “Aiuto avanzato”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' });Note specifiche del provider
Sottosezione intitolata “Note specifiche del provider”Modalità offline di Google
Sottosezione intitolata “Modalità offline di Google”google.mode: 'offline' ritorna serverAuthCode Dal login. In questo modo non sono disponibili logout, isLoggedIn, getAuthorizationCode e refresh.
Usa serverAuthCode esclusivamente come input per l'exchange di token nel tuo backend. Se hai bisogno di chiamare SocialLogin.refresh() in app, utilizza google.mode: 'online' al suo posto.
Imposta useProperTokenExchange: true per il trattamento token rigoroso e useBroadcastChannel: true per la configurazione Android semplificata.
Flusso di reindirizzamento OAuth2 web
Sottosezione intitolata “Flusso di reindirizzamento OAuth2 web”Utilizza OAuth2LoginOptions.flow: 'redirect' per flussi web che si allontanano dalla pagina.
Configurazione del provider in Capacitor
Sottosezione intitolata “Configurazione del provider in Capacitor”Puoi disabilitare i provider non utilizzati per ridurre i binari nativi:
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, }, }, },};Documentazione correlata
Sottosezione intitolata “Documentazione correlata”- Panoramica delle integrazioni
- Miglior integrazione di Autenticazione
- Fornitori OAuth2 e OIDC
- Esegui la migrazione da Ionic Auth Connect
- Guida di migrazione per l'autenticazione con Social Login Connect
- Migrare i provider legacy
- Soluzione di migrazione per plugin Ionic enterprise
Continua da Getting Started
Sezione intitolata “Continua da Getting Started”Se stai utilizzando Getting Started per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzare @capgo/capacitor-autenticazione-social per la capacità nativa in Utilizzare @capgo/capacitor-autenticazione-social, @capgo/capacitor-autenticazione-social per il dettaglio di implementazione in @capgo/capacitor-autenticazione-social, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.