Migration vers l'authentification Apple Sign-In @capgo/social-login

Vue d'ensemble

Cette guide détaille la transition de l'ancien @capacitor-community/apple-sign-in plugin vers le plugin moderne. @capgo/capacitor-social-login 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 les modifications

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

Initialisation

Modification clé: La nouvelle extension nécessite une é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 backend 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.

Type de réponse modifié

Les résultats incluent maintenant un objet avec des détails d'expiration et une section structurée, remplaçant le format de réponse plus plat de l'ancien package : accessToken Copier dans le presse-papier profile Nouvelles fonctionnalités

// 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édécesseur :

Copier dans le presse-papier

Fonctionnalité de dé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 au 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 devez toujours :
   • Activer la « capacité Sign In with Apple » dans Xcode
   • Configurez votre application dans le Portail du développeur Apple
   • Aucune modification supplémentaire code n'est requise pour iOS

Configuration Android

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

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 du développeur Apple
2. Configurez un point de terminaison d'authentification web
3. Configurez votre application Android pour gérer le flux d'authentification OAuth
4. Une configuration du service de backend est requise

Pour des instructions de configuration Android détaillées, veuillez vous référer à la documentation Guide de configuration 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 avec de meilleures définitions de type
3. Maintenance de la communauté active par rapport à la version dépréciée
4. Support Android intégré à l'aide d'une authentication web
5. Gestion de l'état de connexion persistant
6. Mise en œuvre d'un meilleur traitement des erreurs avec des types d'erreurs cohérents

Changements majeurs

1. Une initialisation explicite est maintenant 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 La gestion de la mise à jour du jeton est différente
4. __CAPGO_KEEP_0__ - gestion des jetons améliorée
5. Les gestionnaires d'erreurs et les types d'erreurs ont changé - erreurs plus détaillées

Pour plus d'informations sur la configuration détaillée, veuillez vous référer au documentation officielle.

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

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