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

インストール

概要

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

なぜこれが機能するか

プラグインには、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 Capacitor Ionic Auth Connect が使用したプロバイダ ID の同じ 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プロバイダーガイド

マイグレーションノート

互換性レイヤーはOAuth2ベースです プロバイダーの名前は、Ionicのネイティブ実装の詳細ではありません。
リフレッシュトークンはスコープに依存しています リクエスト offline_access または、リフレッシュトークンが必要な場合のプロバイダー固有のエクイバレント
カスタムエンドポイントは、プリセットを上書きできます。 プリセットが近いですが、正確ではない場合は、異なるエンドポイントのみを上書きしてください。
直接 oauth2 エントリは勝つ 両方を定義する場合 authConnect.auth0 そして oauth2.auth0カスタムエンドポイント oauth2 、直接

Ionic Auth Connectから続けて@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを使用している場合 Ionic Auth Connectから続けて@capgo/capacitor-social-loginを使用して 認証とアカウントフローの計画に使用している場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続する @capgo/capacitor-social-loginを使用して @capgo/capacitor-social-loginのネイティブ機能を使用する @capgo/capacitor-social-loginの実装詳細を使用する @capgo/capacitor-passkey @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-passkeyを参照してください。 Capgoの@capgo/capacitor-native-biometricを参照してください。 Capgoの実装詳細については@capgo/capacitor-native-biometric、 2要素認証 Capgoの実装詳細については2要素認証を参照してください。

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

概要

なぜこれが機能するか

インストール

インポートを置き換える

プロバイダを初期化する

サポートされているプロバイダ ID

ログイン、ログアウト、トークン アクセス

プロバイダ固有のプリセット例

Auth0 プリセット例

Azure プリセット例

Cognito プリセット例

Oktaのデフォルト設定例

OneLoginのデフォルト設定例

エンドポイントのオーバーライド

直接OAuth2の設定

マイグレーション ノート

設定が優先されます。

Ionic Auth Connectから続けて@capgo/capacitor-social-login

ログイン、ログアウト、トークンアクセス

マイグレーションノート