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' returns 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

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

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

Copier dans le presse-papier

Les valeurs des fournisseurs signifient : 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;

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

• trueDétails importants :
• falseExécutez

__CAPGO_KEEP_0__

• __CAPGO_KEEP_0__ npx cap sync après la modification de la configuration du fournisseur.
• Si aucune configuration de fournisseur n'est fournie, tous les fournisseurs se définissent 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
• Manifeste de confidentialité et gestionnaires de URL iOS
• Migration vers Ionic Auth Connect
• Guide de migration de l'authentification de connexion sociale
• Migration de fournisseurs legacy
• Solution de migration des plugins d'entreprise Ionic

Continuez depuis Getting Started

Si vous utilisez Démarrage pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @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, @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Deux facteurs d'authentification pour le détail d'implémentation dans Deux facteurs d'authentification.