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

Übersicht

Capgo Soziale Anmeldung ersetzt Ionic Auth Connect mit einem 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 eingebauten OAuth2-Motor, sodass Sie weiterhin Namen wie auth0, azure, und verwenden können okta.

Installieren

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

Ersetzen Sie Ihre Importe

// 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-Voreinstellung

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

Jeder Voreinstellung erstellt eine Standardkonfiguration für OAuth2 von domain oder issuerAuf die Zwischenablage kopieren

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

Abschnitt mit dem Titel „Direkte OAuth2-Konfiguration“

Leitfaden für den OAuth2- und OIDC-Anbieter

• Migrationshinweise

Abschnitt mit dem Titel „Migrationshinweise“

1. Sie behält die Anbieternamen bei, nicht die Implementierungsdetails von Ionics nativem Die Kompatibilitätslayer ist OAuth2-basiert. Sie behält die Anbieternamen bei, nicht die Implementierungsdetails von Ionics nativem Implementation.

2. Sind Refresh-Tokens noch immer von den Berechtigungen abhängig Anfrage offline_access oder die vom Anbieter spezifische Äquivalent, wenn Sie Refresh-Tokens benötigen

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

4. Direkt oauth2 Einträge gewinnen Wenn Sie sowohl authConnect.auth0 und oauth2.auth0definieren, hat die direkte oauth2 Konfiguration Vorrang

Zugehörige Dokumentation

• Einstieg in die soziale Anmeldung
• OAuth2- und OIDC-Anbieter
• Migrieren von Ionic Auth Connect
• Lösung zur Migration von Ionic Enterprise Plugins