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 einen reibungslosen Übergang und eine bessere Authentifizierung zu gewährleisten. Das neue Plugin vereint mehrere Social-Auth-Provider unter einer einheitlichen API.

Installation

1. Altes Paket entfernen:

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

2. Installiere das neue Package:

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

Wichtige Änderungen am Google Auth Setup

Anforderung der Web Client ID

Kritische Änderung: Das aktualisierte Plugin erfordert die Nutzung einer Web Client ID über alle Plattformen hinweg.

Du musst Folgendes tun:

1. Erstelle eine Web Client ID in der Google Cloud Console, falls du noch keine hast (So erhältst du die Credentials)
2. Verwende diese Web Client ID im webClientId Feld für alle Plattformen
3. Für Android musst du weiterhin eine Android Client ID mit deinem SHA1 erstellen; dies dient jedoch nur der Verifizierung – der Token wird nicht verwendet (Android Setup-Guide)

Code Änderungen

Änderungen importieren

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

Initialisierung

Das Setup wandelt sich von einem einfachen GoogleAuth.initialize() Aufruf einer strukturierteren SocialLogin.initialize() mit verschachtelter 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 Login-Methode ändert sich von GoogleAuth.signIn() zu SocialLogin.login() mit expliziter Provider-Angabe:

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. Aktualisiere dein MainActivity.java (Vollständige Android-Setup-Anleitung):

 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. In AppDelegate.swift sind keine größeren Änderungen nötig (iOS-Setup-Anleitung)

2. Aktualisiere deine Konfiguration in capacitor.config.json, wir verwenden es im neuen Plugin nicht mehr:

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

Web

1. Entferne die Google Sign-In Meta-Tags aus deinem index.html falls du sie verwendet hast:

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

Änderungen beim Response Type

Die Authentifizierungs-Response liefert nun ein strukturiertes Objekt mit Provider-Infos, Access Tokens, ID Tokens und User-Profil-Daten:

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 Response-Struktur enthält:

• Provider: Identifiziert den Authentifizierungs-Provider ('google')
• result.accessToken: Access-Token-Details mit Ablaufdatum
• result.idToken: ID-Token zur Authentifizierung
• result.profile: Benutzerprofil mit E-Mail, Name und Bild-URL

Zusätzliche Funktionen

Das neue Package unterstützt neben Google weitere Social-Auth-Provider:

• Apple Sign-In
• Facebook Login

Dieser einheitliche Ansatz bietet:

• Konsistentes API über alle Provider hinweg
• Verbesserte TypeScript-Unterstützung
• Besseres Error Handling
• Aktive Wartung und Community-Support

Sieh in die Hauptdokumentation für detaillierte Setup-Anleitungen dieser zusätzlichen Provider.

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

Wenn du es nutzt Google Auth Migration zu @capgo/social-login Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @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 zur Zwei-Faktor-Authentifizierung.