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

Copie un prompt de configuración con los pasos de instalación y la guía de markdown completa para este plugin.

Resumen

Capgo La autenticación de inicio de sesión Social reemplaza la autenticación de inicio de sesión de Ionic 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 autenticación de inicio de sesión de Ionic con el nombre de SocialLoginAuthConnectMapea los IDs de proveedor de autenticación de inicio de sesión de Ionic conocidos a la máquina de motor de OAuth2 integrada, por lo que puede seguir utilizando nombres como auth0, azure, y okta.

Instalar

bun add @capgo/capacitor-social-login
bunx 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 quieras los mismos IDs de proveedor que Ionic Auth Connect utilizaba:

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 proveedores admitidos

auth0
azure
cognito
okta
onelogin

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 configuraciones preestablecidas específicas del proveedor

Sección titulada “Ejemplo de configuración preestablecida 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);

Sección titulada “Ejemplo de configuración preestablecida 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 preset 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 preset 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 de conexión

Cada preset crea una configuración de OAuth2 predeterminada desde domain o issuerCopiar a portapapeles

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

Sección titulada “Configuración de OAuth2 directa”

Guía del proveedor de OAuth2 y OIDC

Notas de migración

Sección titulada “Notas de migración”

Mantiene los nombres de proveedor, no los detalles de implementación nativa de Ionic. Si tu inquilino utiliza puntos finales personalizados, sobrescribiles directamente:
Los tokens de actualización todavía dependen de los ámbitos Solicitud offline_access o el equivalente específico del proveedor cuando necesite tokens de actualización
Puntos finales personalizados pueden sobreescribir los presets Si el preset es cercano pero no exacto, sobreescriba solo los puntos finales que difieren
Directo oauth2 los entries ganan Si define tanto authConnect.auth0 y, oauth2.auth0 la configuración directa tiene prioridad oauth2 Documentación relacionada