Migration d'authentification Ionic Connect à @capgo/capacitor-connexion sociale

Présentation

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é SocialLoginAuthConnectIl cartographie les IDs de fournisseur d'authentification Ionic familiers sur l'engin OAuth2 intégré, afin que vous puissiez continuer à utiliser des noms comme auth0, azureInstallation okta.

Fenêtre de terminal

bun add @capgo/capacitor-social-login
bunx 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

Accès au login, à la déconnexion et 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é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 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);

Surcharger les 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éfixes, configurez les mêmes fournisseurs directement dans les documents OAuth2 génériques :

• Guide des fournisseurs OAuth2 et OIDC

Notes de migration

1. Le layer de compatibilité est basé sur OAuth2 Il 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 scopes Demande 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 valeurs par défaut Si le modèle est proche mais pas exact, surchargez uniquement les points de terminaison qui diffèrent.

4. Direct oauth2 les entrées l'emportent Si vous définissez à la fois authConnect.auth0 et oauth2.auth0, la configuration directe prend le pas. oauth2 Documentation connexe

Section intitulée “Documentation connexe”

• Fournisseurs OAuth2 et OIDC
• Related Documentation
• Migratez de Ionic Auth Connect
• Solution de migration des plugins Ionic enterprise

Continuez de la migration de Ionic Auth Connect vers @capgo/capacitor-social-login

Si vous utilisez Migration de Ionic Auth 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 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 dans Authentification à deux facteurs.