Migration d'authentification Google vers @capgo/social-login

Vue d'ensemble

Cette guide fournit des étapes complètes pour la migration de @codetrix-studio/capacitor-google-auth Vers @capgo/capacitor-social-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

Installation

1. Supprimez l'ancien package :

   npm uninstall @codetrix-studio/capacitor-google-auth

2. Installez le nouveau package :

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

Changements importants dans la configuration d'authentification Google

Exigence de l'ID du client Web

Changement critique: La mise à jour du plugin nécessite l'utilisation d'un ID de client Web sur tous les plateformes.

Vous aurez besoin de :

1. Créer un ID de client Web dans le Console de Google Cloud si vous n'en avez pas un (Comment obtenir les informations d'identification)
2. Utiliser cet ID de client Web dans le webClientId champ pour toutes les plateformes
3. Pour Android, vous devez toujours créer un ID de client Android avec votre SHA1, mais cela est uniquement pour des raisons de vérification - le jeton ne sera pas utilisé (Guide de configuration Android)

Code Modifications

Importer les modifications

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

Initialisation

La mise en place évolue d'une simple GoogleAuth.initialize() appel en une structure plus élaborée SocialLogin.initialize() avec une configuration Google imbriquée :

GoogleAuth.initialize({
  clientId: 'CLIENT_ID.apps.googleusercontent.com',
  scopes: ['profile', 'email'],
  grantOfflineAccess: true,
});

await SocialLogin.initialize({
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
    iOSClientId: 'IOS_CLIENT_ID', // for iOS
    mode: 'offline' // replaces grantOfflineAccess
  }
});

Se connecter

La méthode de connexion change de GoogleAuth.signIn() à SocialLogin.login() avec une spécification de fournisseur explicite :

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

Changements spécifiques à la plateforme

Android

1. Mettez à jour votre MainActivity.java (Guide complet de configuration Android):

 import ee.forgr.capacitor.social.login.GoogleProvider;
 import ee.forgr.capacitor.social.login.SocialLoginPlugin;
 import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
 import com.getcapacitor.PluginHandle;
 import com.getcapacitor.Plugin;
 import android.content.Intent;
 import android.util.Log;

 public class MainActivity extends BridgeActivity {
 public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

   @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);

     if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
       PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
       if (pluginHandle == null) {
         Log.i("Google Activity Result", "SocialLogin login handle is null");
         return;
       }
       Plugin plugin = pluginHandle.getInstance();
       if (!(plugin instanceof SocialLoginPlugin)) {
         Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
         return;
       }
       ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
     }
   }

   public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

iOS

1. Aucun changement majeur nécessaire dans AppDelegate.swift (Guide de configuration iOS)

2. Mettez à jour votre configuration dans capacitor.config.json, nous ne l'utilisons pas dans le nouveau plugin :

{
  "plugins": {
   "GoogleAuth": {
     "scopes": ["profile", "email"],
     "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "forceCodeForRefreshToken": true
   }
}

Web

1. Supprimez les balises de connexion Google Sign-In de votre index.html si vous les utilisiez :

<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

Changements de type de réponse

La réponse d'authentification fournit maintenant un objet structuré contenant des informations du fournisseur, des jetons d'accès, des jetons d'ID et des données de profil de l'utilisateur :

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... other token fields
    } | null;
    idToken: string | null;
    profile: {
      email: string | null;
      familyName: string | null;
      givenName: string | null;
      id: string | null;
      name: string | null;
      imageUrl: string | null;
    };
  };
}

La structure de la réponse comprend :

• provider: Identifie le fournisseur d'authentification ('google')
• result.accessToken: Détails de l'jeton d'accès avec expiration
• result.idToken: Jeton d'identification pour l'authentification
• result.profile: Informations de profil de l'utilisateur, y compris l'adresse e-mail, le nom et l'URL de l'image

Capacités supplémentaires

Le nouveau package prend en charge plusieurs fournisseurs d'authentification sociale au-delà de Google :

• Apple Sign-In
• Facebook Login

Cette approche unifiée fournit :

• Une expérience cohérente API pour tous les fournisseurs
• Une meilleure prise en charge de TypeScript
• Un meilleur traitement des erreurs
• Une maintenance active et un soutien communautaire

Vérifiez la documentation principale pour des instructions de mise en œuvre détaillées pour ces fournisseurs supplémentaires.

Continuez de la migration d'authentification Google à @capgo/social-login

Si vous utilisez La migration d'authentification Google vers @capgo/social-login pour planifier l'authentification et les flux de compte, connectez-l’à Utilisez @capgo/capacitor-social-login pour la capacité native dans Utilisez @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 L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.