Per iniziare

Installazione

Puoi usare il nostro setup assistito dall'IA per installare il plugin. Aggiungi le skill Capgo al tuo strumento di IA usando il seguente comando:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Poi usa il seguente prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

Se preferisci la configurazione manuale, installa il plugin eseguendo questi comandi e segui le istruzioni specifiche per piattaforma qui sotto:

1. Installa il pacchetto

   bun add @capgo/capacitor-social-login

2. Sincronizza con i progetti nativi

   bunx cap sync

3. Inizializza all'avvio dell'app

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

Quando i team scelgono questo plugin

• Un unico pacchetto per Google, Apple, Facebook, Twitter/X e provider OAuth2 o OIDC personalizzati.
• Google Sign-In su Android tramite Credential Manager, al posto dei plugin community deprecati.
• Provider in stile Ionic Auth Connect tramite il layer di compatibilità documentato.
• App che devono condividere il login code tra build mobile e web.

Esempi di flusso core

Accedi

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

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

Controlli di sessione

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

Auth code e refresh

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

Helper avanzati

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

Modalità offline Google

google.mode: 'offline' restituisce serverAuthCode da login. In questa modalità logout, isLoggedIn, getAuthorizationCode e refresh non sono disponibili.

Usa serverAuthCode solo come input per lo scambio di token con il tuo backend. Se devi chiamare SocialLogin.refresh() nell'app, usa google.mode: 'online' invece.

Apple

Imposta useProperTokenExchange: true per una gestione rigorosa dei token e useBroadcastChannel: true per una configurazione Android semplificata.

Flusso di redirect web OAuth2

Usa OAuth2LoginOptions.flow: 'redirect' per i flussi web che escono dalla pagina.

Dipendenze dinamiche dei provider

Puoi configurare quali provider includere per ridurre la dimensione dell'app nativa. È particolarmente utile quando la tua app ha bisogno solo di provider specifici.

Aggiungi la configurazione del provider a 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;

I valori del provider indicano:

• true: il provider è abilitato e le sue dipendenze native sono incluse nel bundle.
• false: il provider è disabilitato e le sue dipendenze native non sono incluse nel bundle.

Dettagli importanti:

• Esegui bunx cap sync dopo aver modificato la configurazione del provider.
• Se non viene fornita alcuna configurazione del provider, tutti i provider impostano di default true per compatibilità retroattiva.
• Disabilitare un provider con false lo rende non disponibile a runtime, anche se quel provider utilizza solo API di sistema.
• Questa configurazione interessa solo iOS e Android; non ha effetto su Web.
• Apple Sign-In su Android usa OAuth senza dipendenze esterne SDK.
• Twitter/X utilizza OAuth 2.0 standard senza dipendenze esterne SDK.

Per includere solo Google Sign-In e Apple Sign-In:

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

Documentazione correlata

• Panoramica delle integrazioni
• Integrazione con Better Auth
• Provider OAuth2 e OIDC
• Risoluzione problemi
• Privacy manifest e iOS URL handlers
• Migrazione da Ionic Auth Connect
• Guida alla migrazione di Social Login Auth Connect
• Migrazione dei provider legacy
• Soluzione di migrazione per i plugin Ionic Enterprise

Continua da Getting Started

Se stai usando Per iniziare per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.