Ionic Auth Connectから@capgo/capacitor-social-loginへの移行

概要

Capgo Social Loginは、Ionic Auth Connectに代わり、Google、Apple、Facebookなどの各プロバイダー固有のOAuth2フローを採用しています。1つのプラグインで複数のプロバイダーをサポートし、iOS、Android、Webで動作します。

なぜ機能するのか

このプラグインには、以下の名前の Auth Connect 互換ラッパーが含まれています。 SocialLoginAuthConnectこれは、使い慣れた Ionic Auth Connect プロバイダー ID を内蔵の OAuth2 エンジンにマッピングします。そのため、以下のような名前をそのまま使い続けることができます。 auth0, azureや okta.

インストール

npm install @capgo/capacitor-social-login
npx 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);

エンドポイントの上書き

各プリセットは、以下からデフォルトの OAuth2 設定を作成します： 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 プロバイダーガイド

移行に関する注意点

1. 互換レイヤーはOAuth2ベースです プロバイダー名は維持されますが、Ionicのネイティブ実装の詳細は保持しません。

2. リフレッシュトークンは引き続きスコープに依存します リクエスト offline_access または、リフレッシュトークンが必要な場合はプロバイダー固有の同等のスコープを使用します。

3. カスタムエンドポイントでプリセットを上書き可能 プリセットがほぼ一致していても完全でない場合は、異なるエンドポイントだけを上書きしてください。

4. 直接指定の oauth2 エントリが優先されます 両方を定義した場合 authConnect.auth0 と oauth2.auth0、直接的な oauth2 設定が優先されます。

関連ドキュメント

• Social Loginの始め方
• OAuth2 と OIDC プロバイダー
• Ionic Auth Connectからの移行
• Ionic Enterprise プラグイン移行ソリューション

Ionic Auth Connect Migrationから@capgo/capacitor-social-loginへ進む

使用している場合 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 の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。