Migrazione da 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 unico plugin e funziona su iOS, Android e Web.

Perché funziona

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

Finestra del terminale

npm install @capgo/capacitor-social-login
npx 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 di 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);

Sostituire gli endpoint

Ogni preset crea una configurazione di OAuth2 predefinita da domain o issuer. Se il tuo tenant utilizza endpoint personalizzati, sostituiscili 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 desiderate i preset, configurate i provider direttamente nei documenti OAuth2 generici:

• Guida al provider OAuth2 e OIDC

Note di migrazione

1. La layer di compatibilità è basata su OAuth2 Conserva 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 avete bisogno di token di refresh.

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

4. Vai direttamente oauth2 Gli elementi vincono Se definisci sia authConnect.auth0 e oauth2.auth0, il percorso diretto oauth2 prende precedenza.

Documentazione correlata

• Avvio di Social Login
• Fornitori di OAuth2 e OIDC
• Migrare da Ionic Auth Connect
• Soluzione di migrazione per plugin Ionic enterprise

Continua da Migrare l'autenticazione di Ionic Connect a @capgo/capacitor-social-login

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