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

Vue d'ensemble

Capgo Le connecteur de login social remplace Ionic Auth Connect par un flux OAuth2 natif du fournisseur pour Google, Apple, Facebook et autres fournisseurs d'identité. Il prend en charge plusieurs fournisseurs dans un seul plugin et fonctionne sur iOS, Android et Web.

Pourquoi cela fonctionne

Le plugin inclut un wrapper de compatibilité Auth Connect nommé SocialLoginAuthConnect Il cartographie les ID de fournisseur Ionic Auth Connect familiers sur l'engin OAuth2 intégré, vous permettant de continuer à utiliser des noms comme auth0, azure, et okta.

Installation

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

Remplacez vos importations

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

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

Initialiser les fournisseurs

Utilisez les authConnect préférences lorsque vous voulez les mêmes identifiants de fournisseur que Ionic Auth Connect utilisait :

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

Identifiants de fournisseur pris en charge

• auth0
• azure
• cognito
• okta
• onelogin

Connexion, déconnexion et accès au jeton

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

Exemples de préréglages spécifiques au fournisseur

Exemple de préréglage Auth0

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

Exemple de préréglage Azure

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

Exemple de préréglage Cognito

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

Exemple de préréglage Okta

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

Exemple de préfixe OneLogin

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

Surcharge des points de terminaison

Chaque préfixe crée une configuration OAuth2 par défaut à partir de domain ou issuer. Si votre locataire utilise des points de terminaison personnalisés, surchargez-les directement :

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

Configuration OAuth2 directe

Si vous ne souhaitez pas utiliser les préférences, configurez les mêmes fournisseurs directement dans les documents OAuth2 génériques :

• Guide des fournisseurs OAuth2 et OIDC

Notes de migration

1. La couche de compatibilité est basée sur OAuth2 Elle conserve les noms des fournisseurs, et non les détails d'implémentation natives d'Ionic.

2. Les jetons de rafraîchissement dépendent toujours des étendues Demander offline_access ou l'équivalent spécifique au fournisseur lorsque vous avez besoin de jetons de rafraîchissement.

3. Les points de terminaison personnalisés peuvent surcharger les préférences Si la préférence est proche mais pas exacte, surcharger uniquement les points de terminaison qui diffèrent.

4. Direct oauth2 les entrées gagnent Si vous définissez les deux authConnect.auth0 et oauth2.auth0, la configuration directe oauth2 a la priorité.

Documentation connexe

• Mise en route du connexion de login social
• Fournisseurs OAuth2 et OIDC
• Migrer vers Ionic Auth Connect
• Solution de migration des plugins Ionic Enterprise

Continuez de l'authentification Ionic Connect à la migration vers @capgo/capacitor-social-login

Si vous utilisez La migration de l'authentification Ionic Connect vers @capgo/capacitor-social-login pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Deux facteurs d'authentification pour les détails d'implémentation dans Deux facteurs d'authentification.