Migración de Conexión de Autenticación de Ionic a @capgo/capacitor-login-social

Resumen

Capgo La autenticación social reemplaza la conexión de autenticación de ionic 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 conexión de autenticación denominado SocialLoginAuthConnectSe mapean los IDs de proveedor de autenticación de ionic conocidos a la máquina de motor de OAuth2 integrada, por lo que puede seguir utilizando nombres como auth0, azurey okta.

Instalación

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

Reemplaza tus importaciones

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

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

Inicializa proveedores

Utiliza los authConnect presets cuando quieras 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 token

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 específicas de proveedor

Ejemplo de configuración 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 configuración 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 configuración 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);

Superar puntos finales

Cada preset crea una configuración de OAuth2 predeterminada desde domain o issuerSi su inquilino utiliza puntos finales personalizados, superarlos 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 proveedor, no los detalles de implementación nativos de Ionic.

2. Los tokens de refresco todavía dependen de los alcances Solicitud offline_access o la equivalente específica del proveedor cuando necesites tokens de refresco.

3. puntos de conexión personalizados pueden sobreescribir los presets Si el preset es cercano pero no exacto, sobreescriba solo los puntos de conexión que difieren.

4. Directo oauth2 las entradas ganan Si defines tanto authConnect.auth0 y oauth2.auth0contexto: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de IU corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `and` (Y). oauth2 el directo

la configuración tiene prioridad.

• Título de sección “Documentación relacionada”
• Inicio de sesión social: inicio de sesión iniciado por el usuario. OAuth2 y proveedores OIDC
• Migrar desde Ionic Auth Connect
• Solución de migración de plugins de Ionic enterprise

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

Si está utilizando Migración de Ionic Auth Connect a @capgo/capacitor-social-login para planificar la autenticación y los flujos de cuenta, conecte 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.