Premiers pas

Installer le package
- npm
- pnpm
- yarn
- bun
Fenêtre de terminal
npm i @capgo/capacitor-social-login
Fenêtre de terminal
pnpm add @capgo/capacitor-social-login
Fenêtre de terminal
yarn add @capgo/capacitor-social-login
Fenêtre de terminal
bun add @capgo/capacitor-social-login
Synchroniser avec les projets natifs
- npm
- pnpm
- yarn
- bun
Fenêtre de terminal
npx cap sync
Fenêtre de terminal
pnpm cap sync
Fenêtre de terminal
yarn cap sync
Fenêtre de terminal
bunx cap sync

Initialiser au démarrage de l’application

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

Exemples de flux principaux

Connexion

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

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

Vérifications de session

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

Codes d’autorisation et rafraîchissement

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

Helpers avancés

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

Remarques spécifiques aux fournisseurs

Mode hors ligne de Google

google.mode: 'offline' renvoie serverAuthCode lors de la connexion. Dans ce mode, logout, isLoggedIn, getAuthorizationCode et refresh ne sont pas disponibles.

Apple

Définissez useProperTokenExchange: true pour une gestion stricte des jetons et useBroadcastChannel: true pour une configuration simplifiée sur Android.

Flux de redirection web OAuth2

Utilisez OAuth2LoginOptions.flow: 'redirect' pour les flux web qui naviguent hors de la page.

Configuration des fournisseurs dans Capacitor

Vous pouvez désactiver les fournisseurs inutilisés pour réduire la taille des binaires natifs :

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