Ionic Auth Connect Migration zu @capgo/capacitor-social-login

Übersicht

Capgo Social Login ersetzt Ionic Auth Connect durch einen provider-nativen OAuth2-Flow für Google, Apple, Facebook und andere Identity Provider. Es unterstützt mehrere Provider in einem Plugin und funktioniert auf iOS, Android und Web.

Warum das funktioniert

Das Plugin enthält einen Kompatibilitäts-Wrapper für Auth Connect namens SocialLoginAuthConnectEs mappt bekannte Ionic Auth Connect Provider-IDs auf die integrierte OAuth2-Engine, sodass du weiterhin Namen wie zum Beispiel auth0, azure, und okta.

Installieren

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

Imports ersetzen

// Before
import { AuthConnect } from '@ionic-enterprise/auth-connect';

// After
import { SocialLoginAuthConnect } from '@capgo/capacitor-social-login';

Provider initialisieren

Nutze das authConnect Presets, wenn du dieselben Provider-IDs wie Ionic Auth Connect verwenden möchtest:

await SocialLoginAuthConnect.initialize({
  authConnect: {
    auth0: {
      domain: 'https://your-tenant.auth0.com',
      clientId: 'your-auth0-client-id',
      redirectUrl: 'myapp://oauth/auth0',
      audience: 'https://your-api.example.com',
    },
    azure: {
      tenantId: 'common',
      clientId: 'your-azure-client-id',
      redirectUrl: 'myapp://oauth/azure',
    },
    cognito: {
      domain: 'https://your-domain.auth.region.amazoncognito.com',
      clientId: 'your-cognito-client-id',
      redirectUrl: 'myapp://oauth/cognito',
    },
    okta: {
      issuer: 'https://dev-12345.okta.com/oauth2/default',
      clientId: 'your-okta-client-id',
      redirectUrl: 'myapp://oauth/okta',
    },
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
    },
  },
});

Unterstützte Provider-IDs

• auth0
• azure
• cognito
• okta
• onelogin

Login, Logout und Token-Zugriff

const result = await SocialLoginAuthConnect.login({
  provider: 'auth0',
});

const status = await SocialLoginAuthConnect.isLoggedIn({
  provider: 'auth0',
});

const code = await SocialLoginAuthConnect.getAuthorizationCode({
  provider: 'auth0',
});

await SocialLoginAuthConnect.logout({
  provider: 'auth0',
});

Provider-spezifische Preset-Beispiele

Auth0-Preset-Beispiel

await SocialLoginAuthConnect.initialize({
  authConnect: {
    auth0: {
      domain: 'https://your-tenant.auth0.com',
      clientId: 'your-auth0-client-id',
      redirectUrl: 'myapp://oauth/auth0',
      audience: 'https://your-api.example.com',
    },
  },
});

const auth0Result = await SocialLoginAuthConnect.login({
  provider: 'auth0',
});

console.log(auth0Result.result.idToken);

Azure-Preset-Beispiel

await SocialLoginAuthConnect.initialize({
  authConnect: {
    azure: {
      tenantId: 'common',
      clientId: 'your-azure-client-id',
      redirectUrl: 'myapp://oauth/azure',
    },
  },
});

const azureResult = await SocialLoginAuthConnect.login({
  provider: 'azure',
});

console.log(azureResult.result.resourceData);

Cognito-Preset-Beispiel

await SocialLoginAuthConnect.initialize({
  authConnect: {
    cognito: {
      domain: 'https://your-domain.auth.region.amazoncognito.com',
      clientId: 'your-cognito-client-id',
      redirectUrl: 'myapp://oauth/cognito',
    },
  },
});

const cognitoResult = await SocialLoginAuthConnect.login({
  provider: 'cognito',
});

console.log(cognitoResult.result.idToken);

Okta-Preset-Beispiel

await SocialLoginAuthConnect.initialize({
  authConnect: {
    okta: {
      issuer: 'https://dev-12345.okta.com/oauth2/default',
      clientId: 'your-okta-client-id',
      redirectUrl: 'myapp://oauth/okta',
    },
  },
});

const oktaResult = await SocialLoginAuthConnect.login({
  provider: 'okta',
});

console.log(oktaResult.result.resourceData);

OneLogin-Preset-Beispiel

await SocialLoginAuthConnect.initialize({
  authConnect: {
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
    },
  },
});

const oneloginResult = await SocialLoginAuthConnect.login({
  provider: 'onelogin',
});

console.log(oneloginResult.result.idToken);

Endpoints überschreiben

Jedes Preset erstellt eine Standard-OAuth2-Konfiguration aus domain oder issuer. Wenn Ihr Tenant benutzerdefinierte Endpoints nutzt, überschreiben Sie diese direkt:

await SocialLoginAuthConnect.initialize({
  authConnect: {
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
      authorizationBaseUrl: 'https://your-tenant.onelogin.com/oidc/2/auth',
      accessTokenEndpoint: 'https://your-tenant.onelogin.com/oidc/2/token',
      resourceUrl: 'https://your-tenant.onelogin.com/oidc/2/me',
      logoutUrl: 'https://your-tenant.onelogin.com/oidc/2/logout',
    },
  },
});

Direkte OAuth2-Konfiguration

Wenn Sie keine Presets verwenden möchten, konfigurieren Sie dieselben Provider direkt in der allgemeinen OAuth2-Doku:

• OAuth2- und OIDC-Provider-Guide

Migrationshinweise

1. Der Compatibility Layer basiert auf OAuth2 Die Provider-Namen bleiben erhalten, nicht die nativen Implementierungsdetails von Ionic.

2. Refresh-Tokens hängen weiterhin von Scopes ab Anfrage offline_access oder das provider-spezifische Äquivalent, wenn du Refresh-Tokens benötigst.

3. Custom Endpoints können Presets überschreiben Wenn das Preset fast, aber nicht exakt passt, überschreibe nur die abweichenden Endpunkte.

4. Direkte oauth2 Einträge gewinnen Falls du beides definierst authConnect.auth0 und oauth2.auth0, die direkte oauth2 Config hat Vorrang.

Verwandte Dokumentation

• Social Login – Erste Schritte
• OAuth2- und OIDC-Provider
• Migration von Ionic Auth Connect
• Migrationslösung für Ionic Enterprise Plugins

Weiter geht's: von der Ionic Auth Connect Migration zu @capgo/capacitor-social-login

Wenn du es nutzt Ionic Auth Connect Migration zu @capgo/capacitor-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.