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

Ikhtisar

Capgo Social Login menggantikan Ionic Auth Connect dengan alur OAuth2 native dari provider untuk Google, Apple, Facebook, dan penyedia identitas lainnya. Mendukung banyak provider dalam satu plugin dan berjalan di iOS, Android, dan Web.

Mengapa ini berhasil

Plugin ini menyertakan wrapper kompatibilitas Auth Connect bernama SocialLoginAuthConnect. Wrapper ini memetakan ID provider Ionic Auth Connect yang familiar ke mesin OAuth2 bawaan, sehingga Anda tetap dapat menggunakan nama seperti auth0, azure, dan okta.

Instal

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 provider

Gunakan authConnect preset jika Anda ingin provider ID yang sama dengan yang dipakai 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',
    },
  },
});

Provider ID yang didukung

• auth0
• azure
• cognito
• okta
• onelogin

Login, logout, 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);

Menimpa endpoint

Setiap preset membuat konfigurasi OAuth2 default dari domain atau issuer. Jika tenant Anda menggunakan endpoint kustom, timpa 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, konfigurasikan provider yang sama secara langsung di dokumentasi OAuth2 generik:

• Panduan penyedia OAuth2 dan OIDC

Catatan migrasi

1. Lapisan kompatibilitas berbasis OAuth2 Menjaga nama penyedia, bukan detail implementasi native Ionic.

2. Refresh token masih bergantung pada scope Permintaan offline_access atau ekuivalen spesifik penyedia jika Anda membutuhkan refresh token.

3. Endpoint kustom dapat menimpa preset Jika preset hampir tepat tapi tidak persis, timpa hanya endpoint yang berbeda.

4. Langsung oauth2 entry menang Jika Anda mendefinisikan keduanya authConnect.auth0 dan oauth2.auth0, config langsung oauth2 config memiliki prioritas lebih tinggi.

Dokumentasi terkait

• Memulai Social Login
• Provider OAuth2 dan OIDC
• Migrasi dari Ionic Auth Connect
• Solusi migrasi plugin Ionic Enterprise

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

Jika Anda menggunakan Migrasi Ionic Auth Connect ke @capgo/capacitor-social-login untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas 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 Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.