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

Aperçu

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

Pourquoi cela fonctionne

Le plugin inclut un wrapper de compatibilité Auth Connect nommé SocialLoginAuthConnect. Il associe les identifiants de fournisseurs Ionic Auth Connect familiers au moteur OAuth2 intégré, afin que vous puissiez continuer à utiliser des noms tels que auth0, azure, et okta.

Installer

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

Remplacez vos imports

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

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

Initialiser les providers

Utilisez le authConnect presets lorsque vous voulez les mêmes ID de fournisseur qu'utilisait Ionic Auth Connect :

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

ID de fournisseur pris en charge

• auth0
• azure
• cognito
• okta
• onelogin

Connexion, déconnexion et accès au token

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 presets par fournisseur

Exemple de preset 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 preset 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 preset 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 preset 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 preset 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);

Remplacer les endpoints

Chaque preset crée une configuration OAuth2 par défaut à partir de domain ou issuer. Si votre tenant utilise des endpoints 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 de presets, configurez les mêmes fournisseurs directement dans la documentation générique OAuth2 :

• 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 native d’Ionic.

2. Les refresh tokens dépendent toujours des scopes Requête offline_access ou de l’équivalent spécifique au fournisseur si vous avez besoin de refresh tokens.

3. Custom endpoints can override presets Si le préréglage est proche mais pas exact, remplacez 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 config directe oauth2 La configuration a la priorité.

Documentation associée

• Démarrer avec Social Login
• Fournisseurs OAuth2 et OIDC
• Migrer d'Ionic Auth Connect
• Solution de migration des plugins Ionic Enterprise

Continuer depuis la migration Ionic Auth Connect vers @capgo/capacitor-social-login

Si vous utilisez Migration d'Ionic Auth Connect vers @capgo/capacitor-social-login pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.