Commencer

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA à l'aide de la commande suivante :

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

Ensuite, utilisez la prompt suivante :

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 la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques au plateforme ci-dessous :

1. Installez le package

   npm install @capgo/capacitor-social-login

2. Synchroniser avec les projets natifs

   npx cap sync

3. Initialiser à l'ouverture de l'application

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

Exemples de flux de base

Se connecter

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

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

Contrôle de session

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

Codes d'authentification et de rappel

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

Aideurs 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 au fournisseur

Mode hors ligne de Google

google.mode: 'offline' retourne serverAuthCode à partir de la connexion. Dans ce mode, la déconnexion, isLoggedIn, getAuthorizationCode et refresh ne sont pas disponibles.

Utilisez serverAuthCode seulement en tant qu'entrée pour l'échange de jeton de votre backend. Si vous devez appeler SocialLogin.refresh() dans l'application, utilisez google.mode: 'online' au lieu.

Apple

Définissez useProperTokenExchange: true pour un traitement strict des jetons et useBroadcastChannel: true pour une configuration simplifiée Android.

Flux de redirection OAuth2 web

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

Dépendances de fournisseur dynamiques

Vous pouvez configurer les fournisseurs à inclure pour réduire la taille de l'application native. Cela est le plus utile lorsque votre application a besoin de fournisseurs spécifiques.

Ajoutez une configuration de fournisseur à 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 de fournisseur signifient :

• true: le fournisseur est activé et ses dépendances natives sont embarquées.
• false: le fournisseur est désactivé et ses dépendances natives ne sont pas embarquées.

Détails importants :

• Exécuter npx cap sync après avoir modifié la configuration du fournisseur.
• Si aucune configuration de fournisseur n'est fournie, tous les fournisseurs se réglent par défaut sur true pour la compatibilité backward.
• Désactiver un fournisseur avec false le rend indisponible en temps de exécution, même si ce fournisseur utilise uniquement les API système.
• Cette configuration ne concerne que iOS et Android ; elle ne concerne pas 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 connexe

• Vue d'ensemble des intégrations
• Intégration d'authentification améliorée
• Fournisseurs OAuth2 et OIDC
• Résolution des problèmes
• Déclaration de confidentialité et gestionnaires de URL iOS
• Migration vers Ionic Auth Connect
• Guide de migration de l'authentification Social Login Auth Connect
• Migration de fournisseurs legacy
• Solution de migration des plugins Ionic Enterprise

Continuez de la section « Démarrage »

Si vous utilisez Getting Started pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisez @capgo/capacitor-social-login pour la capacité native dans Utilisez @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, et @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.