Ionic Auth Connect 迁移到 @capgo/capacitor-social-login

复制一个包含安装步骤和本插件的完整 Markdown 指南的配置提示。

概述

Capgo 社交登录替代了 Ionic Auth Connect 使用提供商本地 OAuth2 流程来替换 Google、Apple、Facebook 和其他身份提供商。它支持多个提供商在一个插件中，并且在 iOS、Android 和 Web 中都有效。

为什么会这样

该插件包括一个名为的 Auth Connect 兼容性包装器 SocialLoginAuthConnect它将熟悉的 Ionic Auth Connect 提供商 ID 映射到内置 OAuth2 引擎上，因此您可以继续使用名称如 auth0, azure，和 okta.

安装

bun add @capgo/capacitor-social-login
bunx cap sync

替换你的引入

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

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

初始化提供者

使用 authConnect 预设时，你想使用和 Ionic Auth Connect 一样的提供者 ID：

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

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

提供者特定预设示例

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

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

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

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

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

覆盖端点

每个预设都从 domain 或 issuer。如果您的租户使用自定义接口，请直接覆盖它们：

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

直接 OAuth2 配置

如果您不想使用预设，请在通用 OAuth2 文档中直接配置相同的提供商：

OAuth2 和 OIDC 提供商指南

迁移说明

兼容层基于 OAuth2 It keeps the provider names, not Ionic的原生实现细节.
Refresh tokens still depend on scopes Request offline_access or the provider-specific equivalent when you need refresh tokens.
Custom endpoints can override presets If the preset is close but not exact, override only the endpoints that differ.
Direct oauth2 entries win If you define both authConnect.auth0 and oauth2.auth0, the direct oauth2 config takes precedence.

如果您正在使用 Ionic Auth Connect 迁移到 @capgo/capacitor-social-login 来规划身份验证和帐户流程，连接它与使用 @capgo/capacitor-social-login 为使用@capgo/capacitor-social-login的原生能力 @capgo/capacitor-social-login 为@capgo/capacitor-social-login的实现细节 @capgo/capacitor-passkey 为@capgo/capacitor-passkey的实现细节 @capgo/capacitor-native-biometric 为@capgo/capacitor-native-biometric的实现细节, 双因素认证为双因素认证的实现细节