Prise en main

Installation

Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :

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

Utilisez ensuite le prompt suivant :

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

Si vous préférez une installation manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à chaque plateforme ci-dessous :

1. Installer le package

   bun add @capgo/capacitor-social-login

2. Synchroniser avec les projets natifs

   bunx cap sync

3. Initialisation au démarrage de l’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,
       },
     },
   });

Quand les équipes choisissent ce plugin

• Un seul package pour Google, Apple, Facebook, Twitter/X et les fournisseurs OAuth2 ou OIDC personnalisés.
• Connexion Google sur Android via Credential Manager, plutôt que des plugins communautaires obsolètes.
• Fournisseurs de type Ionic Auth Connect via la couche de compatibilité documentée.
• Apps qui doivent partager la connexion code entre les builds mobiles et web.

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'auth et refresh

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

Notes spécifiques aux providers

Mode offline Google

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

Utiliser serverAuthCode uniquement en entrée pour l’échange de token avec votre backend. Si vous devez appeler SocialLogin.refresh() dans l’app, utilisez google.mode: 'online' plutôt.

Apple

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

Flux de redirection web OAuth2

Utiliser OAuth2LoginOptions.flow: 'redirect' pour les flux web qui quittent la page.

Dépendances dynamiques des providers

Vous pouvez configurer les providers à inclure pour réduire la taille de l'app native. C'est particulièrement utile si votre app n'a besoin que de providers spécifiques.

Ajouter la configuration du provider à 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;

Les valeurs du provider signifient :

• true: le provider est activé et ses dépendances natives sont incluses dans le bundle.
• false: le provider est désactivé et ses dépendances natives ne sont pas incluses dans le bundle.

Détails importants :

• Exécutez bunx cap sync après avoir modifié la configuration du provider.
• Si aucune configuration de provider n'est fournie, tous les providers sont définis par défaut sur true pour assurer la compatibilité ascendante.
• Désactiver un provider avec false le rend indisponible au runtime, même si ce provider n'utilise que des API système.
• Cette configuration ne concerne que iOS et Android ; elle n'a aucun impact sur le Web.
• Apple Sign-In sur Android utilise OAuth sans dépendances externes SDK.
• Twitter/X utilise OAuth 2.0 standard, sans dépendances externes SDK.

Pour inclure uniquement Google Sign-In et Apple Sign-In :

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

Documentation associée

• Aperçu des intégrations
• Intégration Better Auth
• Fournisseurs OAuth2 et OIDC
• Troubleshooting
• Manifeste de confidentialité et gestionnaires d’URL iOS
• Migrer d'Ionic Auth Connect
• Guide de migration Social Login Auth Connect
• Migrer les providers legacy
• Solution de migration des plugins Ionic Enterprise

Continuer depuis Getting Started

Si vous utilisez Prise en main pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.