Migrazione di Ionic Auth Connect a @capgo/capacitor-login-social

Panoramica

Capgo Il Social Login sostituisce Ionic Auth Connect con un flusso OAuth2 nativo del provider per Google, Apple, Facebook e altri provider di identità. Supporta più provider in un plugin e funziona su iOS, Android e Web.

Perché funziona

Il plugin include un wrapper di compatibilità di Auth Connect denominato SocialLoginAuthConnect . Mappa gli ID dei provider di Ionic Auth Connect noti a motore OAuth2 integrato, in modo da poter continuare ad utilizzare nomi come auth0, azure, e okta.

Install

bun add @capgo/capacitor-social-login
bunx cap sync

Sostituisci le tue importazioni

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

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

Inizializza i provider

Utilizza i authConnect preset quando desideri gli stessi ID dei provider utilizzati da Ionic Auth Connect:

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

ID dei provider supportati

• auth0
• azure
• cognito
• okta
• onelogin

Accesso, disconnessione e accesso al 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',
});

Esempi di preset specifici del provider

Esempio di preset 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);

Esempio di preset 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);

Esempio di preset 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);

Esempio di preset 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);

Esempio di preset 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);

Sovrascrivere endpoint

Ogni preset crea una configurazione OAuth2 di default da domain o issuer. Se il tuo tenant utilizza endpoint personalizzati, sovraescriuili direttamente:

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

Configurazione OAuth2 diretta

Se non desideri utilizzare i preset, configura gli stessi provider direttamente nei documenti OAuth2 generici:

• Guida al provider OAuth2 e OIDC

Note di migrazione

1. La layer di compatibilità è basata su OAuth2 Mantiene i nomi dei provider, non i dettagli di implementazione nativi di Ionic.

2. I token di refresh dipendono ancora dai permessi Richiesta offline_access o l'equivalente specifico del provider quando hai bisogno di token di refresh.

3. I punti finali personalizzati possono sovrascrivere i preset Se il preset è vicino ma non esatto, sovrascrivi solo i punti finali che differiscono.

4. Diretto oauth2 vengono le vittorie Se definisci sia authConnect.auth0 e oauth2.auth0, la configurazione diretta ha la precedenza. oauth2 __CAPGO_KEEP_0__

Documentazione correlata

• Avvio del login sociale
• Provider OAuth2 e OIDC
• Migrare da Ionic Auth Connect
• Soluzione di migrazione per plugin enterprise di Ionic

Continua da qui da Ionic Auth Connect Migration a @capgo/capacitor-social-login

Se stai utilizzando Migrazione da Ionic Auth Connect a @capgo/capacitor-social-login per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzo di @capgo/capacitor-social-login per la capacità nativa in Utilizzare @capgo/capacitor-login sociale, @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometric nativo per il dettaglio di implementazione in @capgo/capacitor-biometric nativo, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.