Google Auth Migration zu @capgo/social-login

Übersicht

Diese Anleitung bietet umfassende Schritte für die Migration von @codetrix-studio/capacitor-google-auth Zu @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. Entfernen Sie das alte Paket:

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

2. Installieren Sie das neue Paket:

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

Wichtige Änderungen bei der Google Auth-Einrichtung

Web Client ID-Anforderung

Wichtige Änderung: Die aktualisierte Erweiterung erfordert die Verwendung eines Web Client IDs auf allen Plattformen.

Sie benötigen:

1. Ein Web Client ID in Google Cloud Console erstellen, wenn Sie keinen haben (Anleitung zur Abruf der Zugriffsberechtigungen)
2. Diesen Web Client ID in allen Plattformen verwenden webClientId Für Android müssen Sie jedoch weiterhin einen Android Client ID mit Ihrem SHA1 erstellen, aber dies dient nur zur Verifizierungszwecke - der Token wird nicht verwendet (
3. Anleitung zur Android-EinrichtungWichtige Änderungen)

Code Changes

__CAPGO_KEEP_0__ Änderungen

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

Initialisierung

Die Einrichtung wandelt sich von einer einfachen GoogleAuth.initialize() auf eine strukturierte SocialLogin.initialize() mit einem verschachtelten Google-Konfiguration:

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
  }
});

Anmelden

Die Anmelde Methode wandelt sich von GoogleAuth.signIn() zu SocialLogin.login() mit expliziter Anbieterangabe:

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

Plattformspezifische Änderungen

Android

1. Aktualisieren Sie Ihren MainActivity.java (Vollständiger Anleitungsleitfaden für 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. Keine größeren Änderungen erforderlich in AppDelegate.swift (iOS-Einrichtungsanleitung)

2. Aktualisieren Sie Ihre Konfiguration in capacitor.config.json, wir verwenden es nicht in der neuen Plugin:

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

Web

1. Entfernen Sie die Google-Sign-In-Metatags aus Ihrem index.html Wenn Sie sie verwendet haben:

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

Änderungen im Antworttyp

Die Authentifizierungsantwort liefert nun ein strukturiertes Objekt, das Anbieterinformationen, Zugriffstoken, ID-Tokens und Benutzerprofil-Daten enthält:

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;
    };
  };
}

Die Antwortstruktur umfasst:

• provider: Identifiziert den Authentifizierungsanbieter ('google')
• result.accessToken: Zugriffstoken-Daten mit Ablaufdatum
• result.idToken: ID-Token für die Authentifizierung
• result.profile: Benutzerprofilinformationen einschließlich E-Mail-Adresse, Name und Bild-URL

Zusätzliche Funktionen

Das neue Paket unterstützt mehrere soziale Authentifizierungsanbieter über Google hinaus:

• Apple Sign-In
• Facebook Login

Diese einheitliche Ansicht bietet:

• Konsistente API bei allen Anbietern
• Verbesserte TypeScript-Unterstützung
• Bessere Fehlerbehandlung
• Aktive Wartung und Community-Unterstützung

Überprüfen Sie die Hauptdokumentation für detaillierte Einrichtungsanweisungen für diese zusätzlichen Anbieter.

Weitergehen Sie von der Google Auth-Migration zu @capgo/social-login

Wenn Sie Google Auth Migration zu @__CAPGO_KEEP_0__/social-login verwenden Google Auth Migration zu @capgo/social-login um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometric Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.