Migración de Ionic Auth Connect a @capgo/capacitor-social-login

Resumen

Capgo El inicio de sesión social reemplaza Ionic Auth Connect con un flujo de OAuth2 nativo del proveedor para Google, Apple, Facebook y otros proveedores de identidad. Soporta múltiples proveedores en un plugin y funciona en iOS, Android y Web.

¿Por qué funciona?

El plugin incluye un wrapper de compatibilidad de Auth Connect con el nombre de SocialLoginAuthConnectMapea los IDs de proveedor de Ionic Auth Connect conocidos a la motor de OAuth2 integrada, por lo que puede seguir utilizando nombres como auth0, azureInstalar okta.

Ventana de terminal

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

Sustituye tus importaciones

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

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

Inicia proveedores

Utiliza los authConnect presets cuando desees los mismos IDs de proveedor que Ionic Auth Connect utilizó:

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

IDs de proveedor admitidos

• auth0
• azure
• cognito
• okta
• onelogin

Acceso de inicio de sesión, cierre de sesión y tokens

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

Ejemplos de conjuntos de ajustes específicos del proveedor

Ejemplo de conjunto de ajustes de 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);

Ejemplo de conjunto de ajustes de 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);

Ejemplo de conjunto de ajustes de 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);

Ejemplo de conjunto de ajustes de 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);

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

Sobreescribiendo puntos finales

Cada preset crea una configuración de OAuth2 predeterminada desde domain o issuer. Si su inquilino utiliza puntos finales personalizados, sobreescribálos directamente:

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

Configuración de OAuth2 directa

Si no deseas utilizar presets, configura los mismos proveedores directamente en los documentos de OAuth2 generales:

• Guía del proveedor de OAuth2 y OIDC

Notas de migración

1. La capa de compatibilidad está basada en OAuth2 Mantiene los nombres de los proveedores, no los detalles de implementación nativos de Ionic.

2. Los tokens de refresco siguen dependiendo de los ámbitos Solicitud offline_access o el equivalente específico del proveedor cuando necesites tokens de refresco.

3. Los puntos finales personalizados pueden sobreescribir los presets Si el preset es cercano pero no exacto, sobreescribe solo los puntos finales que difieren.

4. Ganadores directos oauth2 Si define tanto y authConnect.auth0 , el directo oauth2.auth0Documentación relacionada oauth2 Sección titulada “Documentación relacionada”

Inicio de sesión de inicio de sesión

• Migrar desde Ionic Auth Connect
• Solución de migración de plugins de Ionic Enterprise
• direct
• Si define tanto

Sigue adelante desde la migración de Ionic Auth Connect a @capgo/capacitor-social-login

Si estás utilizando La migración de Ionic Auth Connect a @capgo/capacitor-social-login para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.