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

Übersicht

Capgo Social Login ersetzt Ionic Auth Connect durch einen Provider-eigenen 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 eingebauten OAuth2-Motor, sodass Sie weiterhin Namen wie auth0, azureInstallieren okta.

Abschnitt mit dem Titel „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 Voreinstellungsprofil 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 Sie behält die Anbieternamen bei, nicht die Implementierungsdetails von Ionics

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

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

4. Direkt oauth2 Einträge gewinnen Wenn Sie sowohl authConnect.auth0 und oauth2.auth0die direkten oauth2 Konfiguration hat Vorrang.

Verwandte Dokumentation

• OAuth2- und OIDC-Anbieter
• Wenn Sie sowohl Voreinstellungen als auch direkte Konfigurationen verwenden, hat die direkte Konfiguration Vorrang.
• Migrieren Sie von Ionic Auth Connect
• Eingebettete Lösung für die Migration von Ionic enterprise plugins

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

Wenn Sie Ionic Auth Connect verwenden Migrieren Sie von Ionic Auth Connect zu @capgo/capacitor-social-login um die Authentifizierung und die Kontenflüsse zu planen und es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login zu verbinden 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-biometrische für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.