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

Panoramica

Capgo La connessione sociale sostituisce la connessione Auth Ionic 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à per la connessione Auth Connect denominato SocialLoginAuthConnectSi mappa l'ID del provider della connessione Auth Connect familiare sul motore OAuth2 integrato, in modo da poter continuare ad utilizzare nomi come auth0, azuree okta.

Installazione

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 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 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 provider specifici

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 gli endpoint

Ogni preset crea una configurazione di base OAuth2 da domain o issuerSe 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 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. Endpoint personalizzati possono sovrascrivere i preset Se il preset è vicino ma non esatto, sovrascrivere solo gli endpoint che differiscono.

4. Direct oauth2 le vittorie degli elementi Se si definiscono sia authConnect.auth0 e oauth2.auth0il contesto: Sito web di marketing Capgo. Ruolo: Etichetta UI breve o elemento di navigazione. Visto in: pagina trust.astro. Chiave del messaggio `e` (E). oauth2 le vittorie dirette

la configurazione ha la precedenza.

• Sottosezione intitolata “Documentazione correlata”
• Avvio della registrazione di accesso sociale. Iniziare con OAuth2 e OIDC provider
• Migra da Ionic Auth Connect
• Soluzione di migrazione per plugin enterprise Ionic

Continua da Migrazione da Ionic Auth Connect 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 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 i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.