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

Übersicht

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

Warum das funktioniert

Das Plugin enthält einen Auth Connect-Kompatibilitätswrapper mit dem Namen SocialLoginAuthConnectEs mappiert bekannte Ionic Auth Connect-Anbieter-IDs auf den integrierten OAuth2-Motor, sodass Sie weiterhin Namen wie auth0, azureund okta.

Installieren

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

Ersetzen Sie Ihre Imports

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

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

Initialisieren Sie die Anbieter

Verwenden Sie die authConnect Voreinstellungen, wenn Sie die gleichen Anbieter-IDs verwenden möchten, die Ionic Auth Connect verwendet hat:

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

Beispiel für Anbieter-spezifische Voreinstellungen

Beispiel für Auth0-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);

Beispiel für Azure-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);

Beispiel für Cognito-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);

Beispiel für die Okta-Voreinstellung

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

Übergeordnete Endpunkte überschreiben

Jedes Voreinstellungsset erstellt eine Standardkonfiguration für OAuth2 von domain oder issuerWenn Ihr Mandant spezifische 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

Wenn Sie keine Voreinstellungen verwenden möchten, konfigurieren Sie die gleichen Anbieter direkt in den allgemeinen OAuth2-Dokumenten:

• OAuth2- und OIDC-Anbieter-Leitfaden

Migrationshinweise

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

2. Die Refresh-Tokens hängen weiterhin von den Berechtigungen ab Anfrage offline_access oder dem provider-spezifischen Äquivalent, wenn Sie Refresh-Tokens benötigen.

3. Einstellungs-Endpunkte können Voreinstellungen überschreiben Wenn die Voreinstellung nahe, aber nicht genau ist, überschreibe nur die Endpunkte, die sich unterscheiden.

4. Direct oauth2 Einträge gewinnen Wenn Sie sowohl authConnect.auth0 und oauth2.auth0context oauth2 die direkten

Konfiguration hat Vorrang.

• Anleitung zum Einrichten von Social Login
• OAuth2- und OIDC-Anbieter
• Migrieren Sie von Ionic Auth Connect
• Einzahlungspläne für Ionic-Unternehmensplugins

Fortsetzen Sie die Migration von Ionic Auth Connect zu @capgo/capacitor-social-login

Wenn Sie Ionic Auth Connect verwenden Die Migration von Ionic Auth Connect zu @capgo/capacitor-social-login um die Authentifizierung und die Kontenflüsse 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 Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-Passkey, @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.