Migration vers Sign-In Apple à @capgo/social-login

Vue d'ensemble

Cette guide décrit la transition de l'ancien @capacitor-community/apple-sign-in plugin vers le moderne @capgo/capacitor-social-login package. Le nouveau plugin fournit une interface unifiée pour plusieurs fournisseurs d'authentification sociale avec un meilleur support TypeScript et une maintenance active.

Installation

1. Supprimer l'ancien package :

   npm uninstall @capacitor-community/apple-sign-in

2. Installer le nouveau package :

   npm install @capgo/capacitor-social-login
   npx cap sync

Code Modifications

Importer Modifications

import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

Initialisation

Clé de modification : La nouvelle extension nécessite un étape d'initialisation qui n'était pas nécessaire avant.

// 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 importante : Pour 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 du serveur pour l'authentification OAuth basée sur le Web.

Se connecter

Le processus de connexion 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 types de réponse ont changé

Les résultats incluent maintenant un accessToken objet contenant des détails d'expiration et une section structurée profile au lieu du 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;
    };
  };
}

Nouvelles fonctionnalités

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

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

Configuration iOS

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

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

Configuration Android

Android reçoit désormais un support natif via une authentification OAuth web :

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

1. Créez un identifiant de service dans le portail Apple Developer
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 de backend est requise

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

Avantages clés

Le package modernisé fournit :

1. API unifiées sur plusieurs fournisseurs sociaux (Google, Facebook, Apple)
2. Mise à jour de la typage TypeScript améliorée 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é par l'authentification basée sur le web
5. Gestion d'état de connexion persistant
6. Traitement des erreurs amélioré avec des types d'erreurs cohérents

Changements majeurs

1. L'initialisation explicite est désormais requise - pas de 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 pour la mise à jour
4. La gestion des jetons a été améliorée - gestion des jetons plus efficace
5. La gestion des erreurs et les types d'erreurs ont changé - erreurs plus détaillées

Pour plus d'informations sur la configuration détaillée, veuillez consulter la documentation officielle.

Continuez de la section intitulée « Continuez de la migration vers Apple Sign-In à @capgo/social-login »

Si vous utilisez Apple Sign-In Migration vers @capgo/social-login pour planifier l'authentification et les flux de compte, connectez-le avec Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @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 les détails d'implémentation dans l'authentification à deux facteurs.