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

Copas prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

Ringkasan

Capgo Login Sosial menggantikan Ionic Auth Connect dengan aliran OAuth2 native 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 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 impor Anda

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

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

Inisialisasi penyedia

Gunakan 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 didukung

auth0
azure
cognito
okta
onelogin

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

Setiap preset membuat konfigurasi OAuth2 default dari domain atau 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',
    },
  },
});

Bagian berjudul “Konfigurasi OAuth2 Langsung”

Petunjuk penyedia OAuth2 dan OIDC

Catatan migrasi

Bagian berjudul “Catatan Migrasi”

Menggunakan nama penyedia, bukan detail implementasi asli Ionik. Jika Anda tidak ingin menggunakan preset, konfigurasi penyedia yang sama secara langsung di dokumen OAuth2 umum: Petunjuk penyedia OAuth2 dan OIDC
Token refresh masih bergantung pada ruang lingkup Request offline_access atau setara khusus penyedia ketika Anda membutuhkan token refresh.
Endpoint kustom dapat menggantikan preset Jika presetnya sudah hampir tapi tidak tepat, override hanya endpoint yang berbeda.
Langsung oauth2 masuk Jika Anda mendefinisikan baik authConnect.auth0 dan, oauth2.auth0konfigurasi langsung memiliki prioritas. oauth2 Dokumentasi Terkait