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 mappent les identifiants de fournisseur Ionic Auth Connect familiers sur l'engin OAuth2 intégré, afin que vous puissiez continuer à utiliser des noms comme auth0, azure, and okta.

Install

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éfixes spécifiques au fournisseur

Exemple de préfixe 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éfixe 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éfixe 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éfixe 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 configuration 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 configuration par défaut 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 modèles, 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é repose 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 Demandez-les, ou l'équivalent spécifique au fournisseur, lorsque vous avez besoin de jetons de rafraîchissement. offline_access Les points de terminaison personnalisés peuvent surcharger les modèles

3. Si le modèle est proche mais pas exact, surchargez uniquement les points de terminaison qui diffèrent. Section titled “Direct OAuth2 configuration”

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

Section intitulée “Documentation connexe”

• Fournisseurs OAuth2 et OIDC
• Migrer vers Ionic Auth Connect
• Solution de migration des plugins Ionic Enterprise
• Mise à niveau des plugins Ionic enterprise

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

Si vous utilisez L'authentification Ionic Connect à la migration vers @capgo/capacitor-social-login pour planifier l'authentification et les flux de compte, connectez-le avec Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @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 L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs.