Migration zu Google Auth @capgo/social-login

Übersicht

Diese Anleitung bietet umfassende Schritte für die Migration von @codetrix-studio/capacitor-google-auth nach @capgo/capacitor-social-login, um eine glatte Übergang und eine verbesserte Authentifizierungs-Erfahrung zu gewährleisten. Das neue Plugin vereint mehrere soziale Authentifizierungsanbieter unter einer einzigen, konsistenten 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 in der Google Auth-Einstellung

Web Client ID-Anforderung

Kritische ÄnderungDie aktualisierte Erweiterung erfordert die Verwendung eines Web Client IDs auf allen Plattformen.

Sie benötigen:

1. Erstellen Sie einen Web Client ID in Google Cloud Console, wenn Sie keinen haben (Wie Sie die Zugriffsberechtigungen erhalten)
2. Verwenden Sie diesen Web Client ID in der webClientId Feld für alle Plattformen
3. 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 (Anleitung zur Android-Einrichtung)

Code Änderungen

Ä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() Aufruf 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

Der Login-Methode ändert 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. Vollständiger Android-Einrichtungsleitfaden MainActivity.java (Auf die Zwischenablage kopieren):

 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 großen Änderungen sind 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-Meta-Tags 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" />

Response Type Änderungen

Die Authentifizierungsantwort liefert nun ein strukturiertes Objekt, das Informationen über den Anbieter, Zugriffs- und ID-Tokens sowie 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: Zugriffs-Token-Details 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 hinaus:

• Apple Sign-In
• Facebook Login

Diese einheitliche Ansatz bietet:

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

Check the Hauptdokumentation Für detaillierte Anweisungen zur Einrichtung dieser zusätzlichen Anbieter.

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

Wenn Sie Google Auth Migration zu @capgo/social-login zur Planung der Authentifizierung und Benutzerflüsse verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @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-Biometrie für die Implementierungsdetails in @capgo/capacitor-native-Biometrie, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.