Ionic Auth Connectの移行から@capgo/capacitor-social-loginに進む

概要

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

なぜこれが機能するか

プラグインには、 SocialLoginAuthConnect です。このAuth Connectの互換性のラッパーは、 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 preset の例

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

移行に関する注意

1. 互換性レイヤーはOAuth2ベースです プロバイダーの名前は、Ionicのネイティブ実装の詳細を保持しています。

2. リフレッシュトークンはスコープに依存しています リフレッシュトークンが必要な場合は、リクエスト offline_access カスタムエンドポイントはプレセットを上書きできます

3. プレセットが近いが正確ではない場合は、異なるエンドポイントのみを上書きしてください。 Section titled “Migration notes”

4. 直接 oauth2 エントリが勝つ 両方の定義があれば authConnect.auth0 そして oauth2.auth0, 直接 oauth2 configが優先される。

関連するドキュメント

• ソーシャルログインのスタート
• OAuth2とOIDCプロバイダー
• Ionic Auth Connectから移行
• Ionicエンタープライズプラグインの移行ソリューション

Ionic Auth 接続ミグレーションから @capgo/capacitor-social-login に進みましょう。

あなたが「Ionic Auth 接続ミグレーションから @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login」に使用している場合 Ionic Auth 接続ミグレーションから @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要素認証 実装詳細については 2要素認証 に参照してください。