Migrasi Autentikasi Ionic ke @capgo/capacitor-login-sosial

Ringkasan

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

Mengapa ini berfungsi

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

Pasang

bun add @capgo/capacitor-social-login
bunx 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 awal 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 didukung

• 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 pilihan awal penyedia spesifik

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

Setiap preset membuat konfigurasi OAuth2 default dari domain atau issuer. Jika penyewa Anda menggunakan endpoint kustom, ubah langsungnya:

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

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

• Guide penyedia OAuth2 dan OIDC

Catatan migrasi

1. Lapisan kompatibilitas berbasis OAuth2 Menggunakan nama penyedia, bukan detail implementasi asli Ionik.

2. Token refresh masih bergantung pada ruang lingkup Pengajuan offline_access atau setara penyedia khusus ketika Anda memerlukan token refresh.

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

4. Langsung oauth2 Masuk ke Daftar Pemenang Jika Anda mendefinisikan kedua authConnect.auth0 dan oauth2.auth0, konfigurasi langsung oauth2 prioritas konfigurasi.

Dokumentasi Terkait

• Mulai Membuat Login Sosial
• Penggunaan OAuth2 dan OIDC
• Migrasi dari Ionic Auth Connect
• Solusi Migrasi Plugin Perusahaan Ionic

Lanjutkan dari Migrasi Ionic Auth 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 dalam @capgo/capacitor-biometrik-asli, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.