Démarrage

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil 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 au plateforme ci-dessous :

1. Installer 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

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

Notes spécifiques au fournisseur

Mode hors ligne de Google

google.mode: 'offline' retourne serverAuthCode from login. In this mode logout, isLoggedIn, getAuthorizationCode, et refresh sont pas disponibles.

Utilisez serverAuthCode seulement en tant qu'entrée pour l'échange de jeton de votre backend. Si vous avez besoin d'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 Android un setup simplifié.

Flux de redirection OAuth2 web

Utilisez OAuth2LoginOptions.flow: 'redirect' pour les flux web qui se déplacent loin de la page.

Dépendances des fournisseurs 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 uniquement.

Ajoutez la configuration du 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 des fournisseurs 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écutez npx cap sync après la modification de la configuration du fournisseur.
• Si aucune configuration de fournisseur n'est fournie, tous les fournisseurs se mettent par défaut à true pour la compatibilité backward.
• Désactiver un fournisseur avec false rend le fournisseur 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'Auth améliorée
• Fournisseurs OAuth2 et OIDC
• Résolution des problèmes
• Manifeste de confidentialité et gestionnaires de URL iOS
• Migration vers Ionic Auth Connect
• Guide de migration de l'authentification sociale Auth Connect
• Migration de fournisseurs legacy
• Solution de migration des plugins Ionic Enterprise

Continuez de l'étape de démarrage

Si vous utilisez Début de l'installation pour planifier l'authentification et les flux de compte, le connecter avec En utilisant @capgo/capacitor-login-social pour la capacité native dans En utilisant @capgo/capacitor-login-social, @capgo/capacitor-login-social pour le détail d'implémentation dans @capgo/capacitor-login-social, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-biométrique-natif pour le détail d'implémentation dans @capgo/capacitor-biométrique-natif, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.