Area di lavoro: Sito web di marketing Capgo. Ruolo: Frase di copertina del sito web. Visualizzato in: componente doc/SignupCta.astro, componente Hero.astro. Chiave di messaggio `hero_subtitle_v2` (Sottotitolo V2 Hero).

Copia un prompt di configurazione con le istruzioni 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.

Installazione

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo competenze al tuo strumento AI utilizzando il seguente comando:

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

Poi utilizza la seguente richiesta:

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 i seguenti comandi e segui le istruzioni specifiche del tuo platform qui sotto:

Installa il pacchetto
Finestra del terminale
```
bun add @capgo/capacitor-social-login
```
Sincronizza con progetti nativi
Fermata di sistema
```
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',
    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,
    },
  },
});

Esempi di flusso di base

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

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

Codici di autenticazione e aggiornamento

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

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

Nota specifica del provider

Modalità offline di Google

google.mode: 'offline' ritorna serverAuthCode da login. In questo modo logout, isLoggedIn, getAuthorizationCode, e refresh non sono disponibili.

Usa serverAuthCode sempre come input per l'exchange del tuo backend token. Se hai bisogno di chiamare SocialLogin.refresh() in app utilizza google.mode: 'online' Apple

Apple

Set useProperTokenExchange: true per il trattamento token rigoroso e useBroadcastChannel: true per la configurazione Android semplificata.

flusso di reindirizzamento OAuth2 web

Usa OAuth2LoginOptions.flow: 'redirect' per flussi web che si spostano via dalla pagina.

Dipendenze di provider dinamiche

Puoi configurare quali provider includere per ridurre la dimensione dell'app nativa. Questo è più utile quando la tua app ha bisogno di specifici provider.

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

Valori del provider significano:

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

Dettagli importanti:

Esegui bunx cap sync dopo aver modificato la configurazione del provider.
If no provider configuration is supplied, all providers default to true Disabilitando un provider con
Disabilitando un fornitore con false Questa configurazione influisce solo su iOS e Android; non influisce su Web.
Apple Sign-In su Android utilizza OAuth senza dipendenze esterne.
Apple Sign-In on Android uses OAuth without external SDK dependencies.
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,
    },
  },
}

Continua da qui: Inizia

Se stai utilizzando Getting Started per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzare @capgo/capacitor-login-social per la capacità nativa in Utilizzare @capgo/capacitor-login-social Utilizzare @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social Utilizzare @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, e Utilizzare @capgo/capacitor-biometric-nativo per il dettaglio di implementazione in @capgo/capacitor-biometric-nativo, e L'autenticazione a due fattori per i dettagli di implementazione in due fattori di autenticazione.