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, um eine glatte Übergang und eine verbesserte Authentifizierungs-Erfahrung zu gewährleisten. Der neue Plugin vereint mehrere soziale Authentifizierungsanbieter unter einem einzigen, konsistenten API.

Installation

1. Entferne das alte Paket:

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

2. Installiere das neue Paket:

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

Wichtige Änderungen in der Google Auth-Einrichtung

Web-Client-ID-Anforderung

Kritische Änderung: Die aktualisierte Erweiterung erfordert die Verwendung einer Web-Client-ID auf allen Plattformen.

Sie benötigen Folgendes:

1. Erstellen Sie einen Web Client ID in der Google Cloud Console, wenn Sie keinen haben (Wie Sie die Zugriffsberechtigungen erhalten)
2. Verwenden Sie diesen Web Client ID in dem Feld für alle Plattformen webClientId Für Android müssen Sie jedoch noch einen Android Client ID mit Ihrem SHA1 erstellen, aber dies dient nur zur Verifizierungszwecke - der Token wird nicht verwendet (
3. Anleitung für die Android-Einrichtung__CAPGO_KEEP_0__ Änderungen)

Abschnitt mit dem Titel „Code Änderungen“

Abschnitt mit dem Titel „Änderungen importieren“

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() Anruf zu einer strukturierteren 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 Anbieter-Spezifikation:

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

Plattform-spezifische Änderungen

Android

1. Aktualisieren Sie Ihren MainActivity.java (Vollständiger Android-Einrichtungsleitfaden):

 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 in AppDelegate.swift (iOS-Einrichtungsleitfaden)

2. Aktualisieren Sie Ihre Konfiguration in capacitor.config.jsonWir verwenden es nicht in der neuen Erweiterung:

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

Web

1. Entfernen Sie die Google-Anmeldemeta-Tags aus Ihrem index.html falls 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 Informationen zum Anbieter, 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:

• Anbieter: 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, Name und Bild-URL

Zusätzliche Funktionen

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

• Apple Sign-In
• Facebook Login

Diese einheitliche Ansicht bietet:

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

Überprüfen Sie das Hauptdokumentation für detaillierte Einrichtungsanweisungen für diese zusätzlichen Providern.

Weitermachen von Google Auth Migration zu @capgo/social-login

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