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

概要

Capgo ソーシャルログインは、Google、Apple、Facebook、他のアイデンティティプロバイダーを含む、プロバイダー固有のOAuth2フローでIonic Auth Connectを置き換えます。複数のプロバイダーを1つのプラグインでサポートし、iOS、Android、Webで動作します。

なぜこれが機能するか

プラグインには、Ionic Auth ConnectのプロバイダーIDを、組み込みのOAuth2エンジンにマップするためのAuth Connect互換性のラッパーが含まれます。 SocialLoginAuthConnectプラグインには、Ionic Auth ConnectのプロバイダーIDを、組み込みのOAuth2エンジンにマップするためのAuth Connect互換性のラッパーが含まれます。 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';

プロバイダーを初期化する

Capacitor では、Ionic Auth Connect が使用した同じプロバイダー ID を取得したい場合に使用します。 authConnect コピー

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およびOIDCプロバイダーガイド

• 移行に関する注意

「移行に関する注意」のセクション

1. プロバイダー名を保持し、Ionicのネイティブ実装の詳細は除きます。 各プリセットは、デフォルトのOAuth2構成を作成します。__CAPGO_KEEP_0__

2. __CAPGO_KEEP_0__はスコープに依存しています。 リクエスト offline_access または、リフレッシュトークンが必要な場合のプロバイダーの特定のエクイバレント。

3. カスタムエンドポイントはプリセットを上書きできます。 プリセットが近いですが、正確ではありません場合、上書きするエンドポイントは、異なるエンドポイントのみです。

4. 直接 oauth2 エントリは勝つ 両方を定義すると、 authConnect.auth0 と、直接 oauth2.auth0の設定は優先されます。 oauth2 関連するドキュメント

https://capgo.com/docs/related-documentation

• ソーシャルログインのスタート
• OAuth2およびOIDCプロバイダー
• Ionic Auth Connectから移行する
• Ionic Enterprise プラグインの移行ソリューション