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

Panoramica

Capgo La connessione di rete sociale sostituisce la connessione di autenticazione di 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 di autenticazione di Ionic denominato SocialLoginAuthConnectSi mappa l'ID del provider di connessione di autenticazione di Ionic sul motore di 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);

Sostituire gli endpoint

Ogni preset crea una configurazione OAuth2 predefinita da domain o issuerSe 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. Il layer di compatibilità è basato su OAuth2 I token di refresh dipendono ancora dai permessi

2. Richiesta o l'equivalente specifico del provider quando avete bisogno di token di refresh offline_access Section titled “Direct OAuth2 configuration”

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

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

la configurazione ha la precedenza.

• Sottosezione intitolata “Documentazione correlata”
• Avvio della registrazione di accesso sociale
• Migra da Ionic Auth Connect
• Soluzione di migrazione per plugin enterprise Ionic

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

Se stai utilizzando Migrazione da Ionic Auth Connect a @capgo/capacitor-login-social per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzare @capgo/capacitor-login-social per la capacità nativa in Utilizzare @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @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.