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

Übersicht

Capgo Social Login ersetzt Ionic Auth Connect durch einen provider-übergreifenden OAuth2-Flow für Google, Apple, Facebook und andere Identitätsanbieter. Es unterstützt mehrere Anbieter in einer Plugin-Instanz und funktioniert auf iOS, Android und Web.

Warum das funktioniert

Das Plugin enthält einen Auth Connect-Kompatibilitätswrapper namens SocialLoginAuthConnect. Es mappiert bekannte Ionic Auth Connect-Anbieter-IDs auf den integrierten OAuth2-Motor, sodass Sie weiterhin Namen wie auth0, azure, und okta.

Installieren

bun add @capgo/capacitor-social-login
bunx cap sync

Ersatz Ihrer Imports

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

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

Dienstanbieter initialisieren

Verwenden Sie die authConnect Voreinstellungen, wenn Sie die gleichen Anbieter-IDs wie Ionic Auth Connect haben möchten:

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 Anbieter-IDs

• auth0
• azure
• cognito
• okta
• onelogin

Anmeldung, Abmeldung 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',
});

Beispielvoreinstellungen für Anbieter

Auth0-Beispiel für Voreinstellungen

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-Beispiel für Voreinstellungen

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-Beispiel für Voreinstellungen

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-Beispiel für Voreinstellungen

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

Beispiel für OneLogin-Voreinstellung

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

Übernehmen von Endpunkten

Jedes Voreinstellung erstellt eine Standardkonfiguration für OAuth2 von domain oder issuer. Wenn Ihr Tenant benutzerdefinierte Endpunkte verwendet, überschreiben Sie sie 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

If Sie keine Voreinstellungen wünschen, konfigurieren Sie die gleichen Anbieter direkt in den allgemeinen OAuth2-Dokumenten:

• OAuth2- und OIDC-Anbieter-Leitfaden

Migrationshinweise

1. Die Kompatibilitätslayer basiert auf OAuth2 Sie behält die Anbieternamen bei, nicht die Implementierungsdetails von Ionics

2. Die Wiederherstellungs-Token hängen immer noch von den Berechtigungen ab Anfrage offline_access oder den provider-spezifischen Äquivalent, wenn Sie Wiederherstellungs-Token benötigen

3. Benutzerdefinierte Endpunkte können Voreinstellungen überschreiben Wenn das Voreinstellung nahe, aber nicht genau ist, überschreiben Sie nur die Endpunkte, die sich unterscheiden

4. Direct oauth2 Einträge gewinnen Wenn Sie beide definieren authConnect.auth0 und oauth2.auth0, hat die direkte oauth2 Konfiguration Vorrang.

Zugehörige Dokumentation

• Social Login - Anleitung
• OAuth2- und OIDC-Anbieter
• Migrieren von Ionic Auth Connect
• Ionic-Unternehmens-Plugins-Migrationslösung

Migrieren Sie weiter von Ionic Auth Connect Migration zu @capgo/capacitor-social-login

Wenn Sie " Ionic Auth Connect Migration zu @capgo/capacitor-social-login für die Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in 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 Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.