Migration de l'authentification Google vers @capgo/social-login

Présentation

Ce guide fournit des étapes complètes pour la migration de @codetrix-studio/capacitor-google-auth à @capgo/capacitor-social-loginen garantissant une transition fluide et une expérience d'authentification améliorée. Le nouveau plugin unifie plusieurs fournisseurs d'authentification sociale sous un seul et cohérent API.

Installation

1. Supprimez l'ancien package :

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

2. Installer le nouveau package :

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

Changements importants dans la configuration de l'authentification Google

Exigence de l'ID du client Web

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

Vous devrez :

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

Code Modifications

Importer des 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 un plus structuré 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 explicite du fournisseur :

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 aux plateformes

Android

1. Mettez à jour votre MainActivity.java (Guide complet de configuration d'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'est nécessaire dans AppDelegate.swift (Guide de configuration d'iOS)

2. Mettez à jour votre configuration dans capacitor.config.jsonnous 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 signe de Google 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" />

Les modifications du 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 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 :

• fournisseur: Identifie le fournisseur d'authentification ('google')
• __CAPGO_KEEP_0__: Détails du jeton d'accès avec expiration
• : Jeton d'ID pour l'authentification: Informations du profil de l'utilisateur incluant l'e-mail, le nom et l'URL de l'image
• Capacités supplémentairesSous-section intitulée « Capacités supplémentaires »

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

Connexion Facebook

• Apple Sign-In
• Facebook Login

Une approche unifiée fournit :

• Une API cohérente sur tous les fournisseurs
• Un support amélioré de TypeScript
• Une gestion des erreurs meilleure
• Un support actif et une communauté

Vérifiez le documentation principale pour des instructions de mise en place détaillées pour ces fournisseurs supplémentaires.