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

Vue d'ensemble

Capgo Le Social Login 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 identifiants de fournisseur Ionic Auth Connect familiers sur l'engin OAuth2 intégré, afin que vous puissiez continuer à utiliser des noms comme auth0, azureet 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 souhaitez 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 configuration Okta par défaut

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 par défaut

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 issuerSi 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éconfigurations, 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 étendues Demandez 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èl’est proche mais pas exact, surchargez uniquement les points de terminaison qui diffèrent.

4. Direct oauth2 les entrées directes gagnent Si vous définissez à la fois authConnect.auth0 et oauth2.auth0le direct oauth2 config prend la priorité.

Documentation connexe

• Démarrage de la connexion de l'authentification sociale
• Fournisseurs OAuth2 et OIDC
• Migrer à partir de Ionic Auth Connect
• Solution de migration des plugins Ionic enterprise

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

Si vous utilisez Migrer Ionic Auth Connect à @capgo/capacitor-social-login pour planifier l'authentification et les flux de compte, connectez-l’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 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.