Migrasi Auth Connect Ionic ke @capgo/capacitor-login-social

Ringkasan

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

Mengapa ini berhasil

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

Instalasi

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';

Initiasi penyedia

Pakai authConnect preset ketika Anda ingin ID penyedia yang sama yang digunakan oleh 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 Penyedia yang Dapat Dibuka

• auth0
• azure
• cognito
• okta
• onelogin

Login, keluar, dan akses 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 provider

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

Masing-masing preset membuat konfigurasi OAuth2 default dari domain atau issuerJika penyewa Anda menggunakan endpoint kustom, ubah langsung:

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

Konfigurasi OAuth2 Langsung

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

• Bab Panduan Penyedia OAuth2 dan OIDC

Catatan Migrasi

1. Lapisan Kompatibilitas berbasis OAuth2 Memelihara nama penyedia, bukan detail implementasi asli Ionik.

2. Token refresh masih bergantung pada ruang lingkup Pilih offline_access atau setara provider khusus ketika Anda membutuhkan token refresh.

3. Endpoint kustom dapat menggantikan preset Jika presetnya sudah hampir tapi tidak tepat, override hanya endpoint yang berbeda.

4. Langsung oauth2 masuk Jika Anda mendefinisikan baik authConnect.auth0 dan oauth2.auth0context":"Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan)." oauth2 endpoint langsung

konfigurasi langsung mengambil prioritas.

• Bab berjudul "Dokumentasi Terkait"
• Pembuatan Mulai Login Sosial","OAuth2 dan OIDC penyedia"
• Migrasi dari Ionic Auth Connect
• Pemutakhiran solusi plugin Ionic enterprise

Teruskan dari Migrasi Ionic Auth Connect ke @capgo/capacitor-social-login

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