Migrasi Auth Connect Ionic ke @capgo/capacitor-login-berbasis-sosial

Siap untuk dipasang

Capgo Login Sosial menggantikan Ionic Auth Connect dengan aliran OAuth2 asli penyedia untuk Google, Apple, Facebook, dan penyedia identitas lainnya. Ini mendukung penyedia multiple dalam satu plugin dan berfungsi di iOS, Android, dan Web.

Mengapa ini berfungsi

Plugin ini termasuk wrapper kompatibilitas Auth Connect bernama SocialLoginAuthConnect It menerjemahkan ID penyedia Ionic Auth Connect yang familiar ke mesin OAuth2 bawaan, sehingga Anda dapat terus menggunakan nama seperti auth0, azure, dan okta.

Pasang

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

Ganti import Anda

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

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

Inisialisasi penyedia

Gunakan authConnect pilihan pengaturan ketika Anda ingin menggunakan ID penyedia yang sama seperti Ionic Auth Connect digunakan:

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 penyedia yang didukung

• auth0
• azure
• cognito
• okta
• onelogin

Akses login, logout, dan 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',
});

Contoh preset spesifik penyedia

Contoh 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);

Contoh 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);

Contoh 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);

Contoh 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);

Contoh 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);

Mengganti endpoint

atau domain Jika penyewa Anda menggunakan endpoint kustom, ubah langsung: issuerSalin ke clipboard

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

Jika penyewa Anda menggunakan endpoint kustom, ubah langsung: __CAPGO_KEEP_0__

Jika Anda tidak ingin menggunakan preset, konfigurasi penyedia yang sama secara langsung di dokumen OAuth2 umum:

• Petunjuk penyedia OAuth2 dan OIDC

Catatan migrasi

1. Layer kompatibilitas berbasis OAuth2 Ini menjaga nama penyedia, bukan detail implementasi asli Ionik.

2. Token refresh masih bergantung pada ruang lingkup Tolak permintaan offline_access atau setara penyedia khusus ketika Anda membutuhkan token refresh.

3. Endpoint kustom dapat mengatasi preset Jika presetnya sangat dekat tapi tidak tepat, atasi hanya endpoint yang berbeda.

4. Langsung oauth2 masuk menang Jika Anda mendefinisikan baik authConnect.auth0 dan oauth2.auth0, maka langkah-langkah oauth2 konfigurasi mengambil prioritas.

Dokumentasi Terkait

• Mulai dengan Login Sosial
• Penyedia OAuth2 dan OIDC
• Migrasi dari Ionic Auth Connect
• Solusi migrasi plugin Ionic enterprise

Maju terus dari Migrasi Autentikasi Ionic Connect ke @capgo/capacitor-login-sosial

Jika Anda menggunakan Migrasi Autentikasi Ionic Connect ke @capgo/capacitor-login-sosial untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.