Migration vers l'authentification Google de @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-loginassurant 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. Installez le nouveau package :

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

Important Changes in Google Auth Setup

Exigence du Client Web

Changement critique: Le plugin mis à jour nécessite l'utilisation d'un ID Client Web sur tous les plateformes.

Vous aurez besoin de :

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 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 fins 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 configuration passe d'une simple GoogleAuth.initialize() appel à 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
  }
});

S'identifier

La méthode de connexion change de GoogleAuth.signIn() to 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 au plateforme

Android

1. iOS MainActivity.java (Section intitulée « iOS »):

 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. Aucune modification majeure nécessaire dans AppDelegate.swift (Guide de configuration complète d'Android)

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 d'entrée Google de votre index.html Changements de type de réponse

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

Type de réponse modifié

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 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 réponse comprend :

• fournisseur: Identifie le fournisseur d'authentification ('google')
• resultat.accessToken: Détails de l'jeton d'accès avec expiration
• resultat.idToken: Jeton d'identification pour l'authentification
• resultat.profilInformations du profil de l'utilisateur incluant l'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
• Connexion Facebook

Cette approche unifiée fournit :

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

Vérifiez la documentation principale Pour les instructions de configuration détaillées pour ces fournisseurs supplémentaires.

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

If vous utilisez Migration Auth Google vers @capgo/social-login pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisation de @capgo/capacitor-social-login pour la capacité native dans Utilisation de @capgo/capacitor-social-login, @capgo/capacitor-connexion-social 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-biometrique 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.