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

Vue d'ensemble

Capgo La connexion sociale remplace la connexion Auth Ionic par un flux OAuth2 natif du fournisseur pour Google, Apple, Facebook et autres fournisseurs d'identité. Elle prend en charge plusieurs fournisseurs dans un seul plugin et fonctionne sur iOS, Android et Web.

Pourquoi cela fonctionne

Le plugin comprend un wrapper de compatibilité de connexion Auth nommé SocialLoginAuthConnect Il cartographie les ID de fournisseur de connexion Auth Ionic familiers sur l'engin OAuth2 intégré, afin que vous puissiez 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 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 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. Le layer de compatibilité est basé sur OAuth2 Ce qui 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 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 gagnent Si vous définissez à la fois authConnect.auth0 et oauth2.auth0le contexte : Site web de marketing Capgo. Le rôle : Étiquette de navigation ou élément UI court. Vu dans : page trust.astro. Clé de message `and` (Et). oauth2 les points de terminaison direct

la configuration a la priorité.

• Section intitulée « Documentation connexe »
• Demarrage de l'authentification sociale : OAuth2 et OIDC fournisseurs
• Migratez depuis Ionic Auth Connect
• Solution de migration des plugins Ionic enterprise

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

Si vous utilisez La migration Ionic Auth Connect vers @capgo/capacitor-social-login pour planifier l'authentification et les flux de compte, connectez-l’avec L'utilisation de @capgo/capacitor-social-login pour la capacité native dans L'utilisation de @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 de mise en œuvre dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour le détail de mise en œuvre dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour le détail de mise en œuvre dans Authentification à deux facteurs.