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 Identitätsanbieter. Es unterstützt mehrere Anbieter in einem Plugin und funktioniert auf iOS, Android und Web.

Wieso das funktioniert

The Plugin enthält einen Auth Connect-Kompatibilitätswrapper namens SocialLoginAuthConnect. Es mappt bekannte Ionic Auth Connect-Anbieter-IDs auf den integrierten OAuth2-Motor, sodass Sie weiterhin Namen wie auth0, azure, und 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';

Anbieter initialisieren

Verwenden Sie die authConnect Vorlagen, 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',
});

Beispiele für Vorlagen für bestimmte Anbieter

Beispiel für die Auth0-Vorlage

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

Übergeordnete Endpunkte

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

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

• Leitfaden für den OAuth2- und OIDC-Anbieter

Migrationshinweise

1. Die Kompatibilitätslayer basiert auf OAuth2 Es behält die Anbieternamen bei, nicht die ursprünglichen Implementierungsdetails von Ionic

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

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

4. Direct oauth2 Einträge gewinnen Wenn Sie sowohl authConnect.auth0 und definieren oauth2.auth0direkt oauth2 Die Konfiguration hat Vorrang.

Verwandte Dokumentation

• Soziale Anmeldung starten
• OAuth2- und OIDC-Anbieter
• Migrieren von Ionic Auth Connect
• Lösung zur Migration von Ionic Enterprise-Plugins

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

Wenn Sie Ionic Auth Connect verwenden Ionic Auth Connect Migration zu @capgo/capacitor-social-login um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @capgo/capacitor-social-login verwenden für die native Fähigkeit in Mit @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 in Zwei-Faktor-Authentifizierung.