Passer à la navigation

Mise à niveau vers @capgo/social-login

GitHub

Cette guide décrit la transition depuis la version legacy @capacitor-community/apple-sign-in intégrer le plugin à la version moderne @capgo/capacitor-social-login package. Le nouveau plugin fournit une interface unifiée pour plusieurs fournisseurs d'authentification sociale avec un support amélioré TypeScript et une maintenance active.

  1. Fenêtre de terminal

    Section titled “Overview”
    npm uninstall @capacitor-community/apple-sign-in
  2. Installer le nouveau package :

    Fenêtre de terminal
    npm install @capgo/capacitor-social-login
    npx cap sync
import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

Modification clé: La nouvelle extension nécessite une étape d'initialisation qui n'était pas nécessaire auparavant.

// No initialization needed in old package
// For iOS: Basic configuration
await SocialLogin.initialize({
apple: {} // Basic iOS configuration
});
// For Android: Additional configuration required
await SocialLogin.initialize({
apple: {
clientId: 'YOUR_SERVICE_ID', // Service ID from Apple Developer Portal
redirectUrl: 'https://your-backend.com/callback' // Your backend callback URL
}
});

Note importantePour iOS, vous fournissez une configuration de base, tandis que l'Android nécessite des détails supplémentaires, notamment un ID de Service et une URL de rappel backend pour l'authentification OAuth basée sur le web.

Le processus d'authentification se simplifie de plusieurs paramètres à un API plus propre.

const result = await SignInWithApple.authorize({
clientId: 'com.your.app',
redirectURI: 'https://your-app.com/callback',
scopes: 'email name',
state: '12345',
nonce: 'nonce'
});
const result = await SocialLogin.login({
provider: 'apple',
options: {
// Optional: Add scopes if needed
scopes: ['email', 'name'],
nonce: 'nonce'
}
});

: La nouvelle extension utilise login() avec provider: 'apple' et des champs facultatifs plutôt que de passer des valeurs de configuration individuelles comme clientId et redirectURI.

Les résultats incluent maintenant un accessToken objet contenant les détails d'expiration et une structure profile remplaçant le format de réponse plus plat de l'ancien package :

// Old response type
interface AppleSignInResponse {
response: {
user: string;
email: string | null;
givenName: string | null;
familyName: string | null;
identityToken: string | null;
authorizationCode: string | null;
};
}
// New response type
interface SocialLoginResponse {
provider: 'apple';
result: {
accessToken: {
token: string;
expiresIn?: number;
refreshToken?: string;
} | null;
idToken: string | null;
profile: {
user: string;
email: string | null;
givenName: string | null;
familyName: string | null;
};
};
}

Le plugin mis à jour introduit des fonctionnalités qui n'étaient pas disponibles dans le précurseur :

Vérification de l'état de connexion

// Not available in old package
const status = await SocialLogin.isLoggedIn({
provider: 'apple'
});

Fonctionnalité de déconnexion

// Not available in old package
await SocialLogin.logout({
provider: 'apple'
});

Ces méthodes fournissent isLoggedIn() pour vérifier l'état d'authentification et logout() la fonctionnalité.

Changements Spécifiques à la Plateforme

Modifications spécifiques à la plateforme

iOS permet de conserver des procédures de configuration familières grâce aux capacités Xcode :

  1. La configuration iOS reste principalement la même. Vous devez toujours :
    • Activer la « capacité Sign In with Apple » dans Xcode
    • Configurez votre application dans le Portail des Développeurs Apple
    • Aucune modification supplémentaire code requise pour iOS

Android l'authentification OAuth basée sur le web est désormais prise en charge nativement :

Le nouveau plugin fournit un support Android par défaut, mais nécessite une configuration supplémentaire :

  1. Créez un ID de service dans le Portail des Développeurs Apple
  2. Configurez un point de terminaison d'authentification web
  3. Configurez votre application Android pour gérer le flux OAuth
  4. Une configuration de service backend est requise

Pour des instructions de configuration Android détaillées, veuillez vous référer à Guide de configuration Android.

Le package modernisé fournit :

  1. API unifiées sur plusieurs fournisseurs sociaux (Google, Facebook, Apple)
  2. Améliorations de typage TypeScript avec des définitions de type améliorées
  3. Maintenance de la communauté active par rapport à la version dépréciée
  4. Support Android intégré authentification web basée
  5. Gestion de l'état de connexion persistant
  6. Mise en œuvre d'erreurs améliorée avec des types d'erreurs cohérents
  1. L'initialisation explicite est désormais requise aucune configuration par défaut
  2. La structure de l'objet réponse a changé format de résultat imbriqué
  3. La mise en œuvre Android nécessite un service backend pour OAuth
  4. Gestion de mise à jour de jeton est différente - Gestion améliorée des jetons
  5. Les gestionnaires d'erreurs et les types d'erreurs ont changé - Erreurs plus détaillées

Pour plus de détails sur la configuration, veuillez vous référer à la documentation officielle.

Continuez de la migration Apple Sign-In vers @capgo/social-login

Titre de la section « Continuez de la migration Apple Sign-In vers @capgo/social-login »

Si vous utilisez la migration Apple Sign-In vers @capgo/social-login 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-connexion-social pour les détails d'implémentation dans @capgo/capacitor-connexion-social, @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-authentification-native pour les détails d'implémentation dans @capgo/capacitor-authentification-native, et L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs.