Commencer

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil d'IA en utilisant 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 à la 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 renouvellement

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

Aide avancée

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 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 serveur. Si vous devez appeler SocialLogin.refresh() au lieu de cela. google.mode: 'online' Apple

Section intitulée « Apple »

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

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 prend en compte que iOS et Android ; elle ne prend pas en compte 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
• Migrer depuis Ionic Auth Connect
• Guide de migration de l'authentification Social Login Auth Connect
• Migrer les fournisseurs legacy
• Solution de migration des plugins Ionic Enterprise

Continuez de la section « Démarrage »

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