Generic OAuth2 プロバイダー

導入

The Capgo Social Login plugin includes a built-in OAuth2 and OpenID Connect engine. You can use it to connect any standards-based identity provider, including:

• GitHub
• Azure AD / Microsoft Entra ID
• Auth0
• Okta
• Keycloak
• カスタムOAuth2またはOIDCサーバー

この oauth2 設定は複数のプロバイダーをサポートするように設計されています。複数のプロバイダーを一度に登録し、ログイン時には1つを選択できます。 providerId.

必要なもの

プロバイダーを設定する前に、以下の情報を収集してください。

• OAuthクライアントID
• アプリのスキームまたはWebコールバックURLに一致するリダイレクトURL
• 認証エンドポイント
• 認証フローcodeのためにトークンエンドポイント、またはOIDCディスカバリ issuerUrl for OIDC discovery
• 必要なスコープ openid profile email

Multi-provider configuration

Use SocialLogin.initialize() アプリ起動時に一度だけ実行し、必要なすべてのプロバイダーを登録します。

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

await SocialLogin.initialize({
  oauth2: {
    github: {
      appId: 'your-github-client-id',
      authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
      accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
      redirectUrl: 'myapp://oauth/github',
      scope: 'read:user user:email',
      pkceEnabled: true,
      resourceUrl: 'https://api.github.com/user',
    },
    azure: {
      appId: 'your-azure-client-id',
      authorizationBaseUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
      accessTokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
      redirectUrl: 'myapp://oauth/azure',
      scope: 'openid profile email User.Read',
      pkceEnabled: true,
      resourceUrl: 'https://graph.microsoft.com/v1.0/me',
    },
    auth0: {
      issuerUrl: 'https://your-tenant.auth0.com',
      appId: 'your-auth0-client-id',
      redirectUrl: 'myapp://oauth/auth0',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
      additionalParameters: {
        audience: 'https://your-api.example.com',
      },
    },
  },
});

OIDC discovery and aliases

プロバイダーがOpenID Connectのディスカバリードキュメントを公開している場合、最も簡単な設定です。 issuerUrl Copy to clipboard

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      issuerUrl: 'https://sso.example.com/realms/mobile',
      clientId: 'mobile-app',
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
    },
  },
});

The plugin also supports common OAuth and OIDC aliases:

• clientId aliasとして appId
• authorizationEndpoint aliasとして authorizationBaseUrl
• tokenEndpoint aliasとして accessTokenEndpoint
• endSessionEndpoint aliasとして logoutUrl
• scopes aliasとして scope

も利用可能です

• additionalParameters 認証要求のオーバーライド用
• additionalTokenParameters トークンの交換オーバーライド用
• additionalResourceHeaders カスタムリソースエンドポイントヘッダ用
• additionalLogoutParameters そして postLogoutRedirectUrl ログアウトフローのために
• loginHint, prompt、そして iosPrefersEphemeralSession

Auth Connect互換のプリセット

Ionic Auth Connectから移行している場合、同じプロバイダ名を維持したい場合は SocialLoginAuthConnect.

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

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',
    },
    okta: {
      issuer: 'https://dev-12345.okta.com/oauth2/default',
      clientId: 'your-okta-client-id',
      redirectUrl: 'myapp://oauth/okta',
    },
  },
});

サポートされているプリセットプロバイダID:

• auth0
• azure
• cognito
• okta
• onelogin

プロバイダがカスタムエンドポイントを必要とする場合は、プリセットをオーバーライドするか、プリセットを回避してプロバイダを直接 oauth2.

設定オプション

タイプ	必要	説明	Description
appId / clientId	OAuth2クライアントID	はい	OAuth2クライアントID
issuerUrl	文字列	いいえ	OIDCディスカバリーベースURL
authorizationBaseUrl / authorizationEndpoint	文字列	はい*	認可エンドポイントURL
accessTokenEndpoint / tokenEndpoint	文字列	いいえ*	トークンエンドポイントURL
redirectUrl	OAuth2	はい	コールバック URL
scope / scopes	文字列 / 文字列[]	いいえ	要求されたスコープ
pkceEnabled	ブール値	いいえ	標準値 true
responseType	'code' または 'token'	いいえ	標準値 'code'
resourceUrl	OAuth2	なし	ユーザー情報またはリソースエンドポイント
logoutUrl / endSessionEndpoint	なし	なし	ログアウトまたはセッション終了URL
postLogoutRedirectUrl	なし	ログアウト後リダイレクトURL	なし
additionalParameters	Record<string, string>	追加の認証要求パラメータ	なし
additionalTokenParameters	Record<string, string>	OAuth2	追加トークン要求パラメータ
additionalResourceHeaders	Record<string, string>	なし	追加ヘッダー resourceUrl
additionalLogoutParameters	Record<string, string>	なし	ログアウト用追加パラメータ
loginHint	文字列	なし	ショートカット additionalParameters.login_hint
prompt	文字列	なし	ショートカット additionalParameters.prompt
iosPrefersEphemeralSession	ブール値	No	iOSのブラウザセッションを一時的に使用
logsEnabled	boolean	No	詳細なデバッグログを有効にする

authorizationBaseUrl と accessTokenEndpoint は issuerUrl は、明示的なエンドポイントが見つかった値よりも優先されます。

OAuth2ログインを使用する

ログイン

const result = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
    loginHint: 'user@example.com',
  },
});

ウェブ上でのリダイレクトフロー

使用 flow: 'redirect' フルページリダイレクトを実現したい場合は、以下のコードを使用してください。

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'auth0',
    flow: 'redirect',
  },
});

ログイン結果を解析するページで、以下のコードを実行してください。

const result = await SocialLogin.handleRedirectCallback();
if (result?.provider === 'oauth2') {
  console.log(result.result.providerId);
}

ログイン状態とログアウト

const status = await SocialLogin.isLoggedIn({
  provider: 'oauth2',
  providerId: 'github',
});

await SocialLogin.logout({
  provider: 'oauth2',
  providerId: 'github',
});

リフレッシュトークン

await SocialLogin.refresh({
  provider: 'oauth2',
  options: {
    providerId: 'github',
  },
});

const refreshed = await SocialLogin.refreshToken({
  provider: 'oauth2',
  providerId: 'github',
  refreshToken: 'existing-refresh-token',
});

refresh() __CAPGO_KEEP_0__ を使用したときに、リフレッシュトークンが保存されているプラグインを使用します。 refreshToken() __CAPGO_KEEP_0__ を使用して、リフレッシュトークンを自分で渡し、最新のOAuth2レスポンスを取得します。

現在のアクセストークンを取得する

const code = await SocialLogin.getAuthorizationCode({
  provider: 'oauth2',
  providerId: 'github',
});

console.log(code.accessToken);

プロバイダーの例

GitHub の例

GitHub を使用したときに、シンプルなOAuthアプリフローと基本的なプロファイルデータを取得します。

await SocialLogin.initialize({
  oauth2: {
    github: {
      appId: 'your-github-client-id',
      authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
      accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
      redirectUrl: 'myapp://oauth/github',
      scope: 'read:user user:email',
      pkceEnabled: true,
      resourceUrl: 'https://api.github.com/user',
    },
  },
});

const githubResult = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
  },
});

console.log(githubResult.result.accessToken?.token);
console.log(githubResult.result.resourceData);

Azure AD / Microsoft Entra ID の例

Microsoft グラフのユーザープロファイルなどのデータを必要とする場合に、Azure を使用してください。

await SocialLogin.initialize({
  oauth2: {
    azure: {
      appId: 'your-azure-client-id',
      authorizationBaseUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
      accessTokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
      redirectUrl: 'myapp://oauth/azure',
      scope: 'openid profile email User.Read',
      pkceEnabled: true,
      resourceUrl: 'https://graph.microsoft.com/v1.0/me',
    },
  },
});

const azureResult = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'azure',
  },
});

console.log(azureResult.result.idToken);
console.log(azureResult.result.resourceData);

Auth0 の例

OIDC に加えてカスタム API の聴衆が必要な場合に、Auth0 は適切な選択です。

await SocialLogin.initialize({
  oauth2: {
    auth0: {
      appId: 'your-auth0-client-id',
      authorizationBaseUrl: 'https://your-tenant.auth0.com/authorize',
      accessTokenEndpoint: 'https://your-tenant.auth0.com/oauth/token',
      redirectUrl: 'myapp://oauth/auth0',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
      additionalParameters: {
        audience: 'https://your-api.example.com',
      },
    },
  },
});

const auth0Result = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'auth0',
    flow: 'redirect',
  },
});

Web でのリダイレクトフローを使用する場合、コールバックページで結果を読み戻してください。

const auth0Result = await SocialLogin.handleRedirectCallback();
if (auth0Result?.provider === 'oauth2') {
  console.log(auth0Result.result.idToken);
}

Okta の例

await SocialLogin.initialize({
  oauth2: {
    okta: {
      appId: 'your-okta-client-id',
      authorizationBaseUrl: 'https://your-domain.okta.com/oauth2/default/v1/authorize',
      accessTokenEndpoint: 'https://your-domain.okta.com/oauth2/default/v1/token',
      redirectUrl: 'myapp://oauth/okta',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
      resourceUrl: 'https://your-domain.okta.com/oauth2/default/v1/userinfo',
    },
  },
});

const oktaResult = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'okta',
  },
});

console.log(oktaResult.result.resourceData);

Keycloakの例

プロバイダーが公開している場合に使用する /.well-known/openid-configuration:

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      issuerUrl: 'https://sso.example.com/realms/mobile',
      clientId: 'mobile-app',
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
    },
  },
});

const keycloakResult = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'keycloak',
  },
});

console.log(keycloakResult.result.idToken);

OAuth2のレスポンス形状

OAuth2ログインが成功すると返される

フィールド	説明
providerId	使用するプロバイダーのキー
accessToken	アクセストークンパイロードまたは null
idToken	OIDC ID トークンがプロバイダーが返した場合
refreshToken	リフレッシュトークンが要求されたスコープが許可した場合
resourceData	プロバイダーから取得したRAW JSON resourceUrl
scope	許可されたスコープ
tokenType	通常 bearer
expiresIn	トークン有効期限（秒）

プロバイダー設定の参照

GitHub

1. OAuth アプリを作成する Open GitHub と開発者設定を実行し、OAuthアプリを作成してください。

2. コールバックURLを設定してください。 アプリのリダイレクトURLを使用してください。例えば myapp://oauth/github.

3. プラグインを設定してください。

   await SocialLogin.initialize({
     oauth2: {
       github: {
         appId: 'your-github-client-id',
         authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
         accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
         redirectUrl: 'myapp://oauth/github',
         scope: 'read:user user:email',
         pkceEnabled: true,
         resourceUrl: 'https://api.github.com/user',
       },
     },
   });

Azure AD / Microsoft Entra ID

1. アプリを登録してください。 Azure ポータルにアクセスし、 App registrationsと、ネイティブまたはモバイルアプリの登録を作成してください。

2. リダイレクト URI を追加 モバイルまたはデスクトップ用のリダイレクト URI を追加して、コールバック URL に一致するアプリを設定します。

3. プラグインを設定

   await SocialLogin.initialize({
     oauth2: {
       azure: {
         appId: 'your-azure-client-id',
         authorizationBaseUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
         accessTokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
         redirectUrl: 'myapp://oauth/azure',
         scope: 'openid profile email User.Read',
         pkceEnabled: true,
         resourceUrl: 'https://graph.microsoft.com/v1.0/me',
       },
     },
   });

   注意

   テナント ID に置き換え common アプリがシングル テナントの場合にテナント ID を使用します。

Auth0

1. ネイティブ アプリを作成 アプリを開く Auth0 ダッシュボード Native アプリを作成します。

2. 許可されたコールバック URL を設定します。 Capacitor アプリで使用する正確なリダイレクト URL を追加します。

3. プラグインを設定します。

   await SocialLogin.initialize({
     oauth2: {
       auth0: {
         appId: 'your-auth0-client-id',
         authorizationBaseUrl: 'https://your-tenant.auth0.com/authorize',
         accessTokenEndpoint: 'https://your-tenant.auth0.com/oauth/token',
         redirectUrl: 'myapp://oauth/auth0',
         scope: 'openid profile email offline_access',
         pkceEnabled: true,
         additionalParameters: {
           audience: 'https://your-api.example.com',
         },
         logoutUrl: 'https://your-tenant.auth0.com/v2/logout',
       },
     },
   });

Okta

1. OIDC ネイティブ アプリを作成します。 Okta 管理コンソールで、OIDC ネイティブ アプリケーションを作成します。

2. リダイレクト URI を追加します。 __CAPGO_KEEP_0__ アプリで使用する正確なコールバック URL を登録します。

3. プラグインの設定

   await SocialLogin.initialize({
     oauth2: {
       okta: {
         appId: 'your-okta-client-id',
         authorizationBaseUrl: 'https://your-domain.okta.com/oauth2/default/v1/authorize',
         accessTokenEndpoint: 'https://your-domain.okta.com/oauth2/default/v1/token',
         redirectUrl: 'myapp://oauth/okta',
         scope: 'openid profile email offline_access',
         pkceEnabled: true,
         resourceUrl: 'https://your-domain.okta.com/oauth2/default/v1/userinfo',
       },
     },
   });

KeycloakとカスタムOIDCプロバイダー

プロバイダーがOpenID Connectの自動検出をサポートしている場合、自動検出を優先します。 issuerUrl:

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      issuerUrl: 'https://sso.example.com/realms/mobile',
      clientId: 'mobile-app',
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
    },
  },
});

自動検出が利用できない場合は、認証とトークンエンドポイントを手動で設定してください。

プラットフォーム固有の注意

iOS

• __CAPGO_KEEP_0__ ASWebAuthenticationSession.
• 設定 iosPrefersEphemeralSession: true プライベートブラウザセッションを使用する場合は、共有クッキーなしで実行したい場合に、if文を設定します。

Android

• OAuthリダイレクトは、Schemeとホストを使用してアプリ内に戻ります。
• Androidのデープリンク設定と同じURLを使用して、プロバイダーのコールバックURLを確実に設定してください。
• プラグインはOAuthアクティビティをすでに処理しています。アプリが異なるリダイレクトパターンを必要とする場合は、カスタムインテントフィルタを追加してください。

Web

• ポップアップフローはデフォルトの設定であり、シングルページアプリ向けに機能します。
• プロバイダーがポップアップをブロックしたり、認証ルールがトップレベルナビゲーションを必要とする場合は、リダイレクトフローを使用します。
• 一部のプロバイダーは、CORSを使用してブラウザで直接トークンを交換することをブロックしています。その場合、バックエンドでトークンを交換するか、パブリッククライアントを許可するプロバイダーの設定を使用してください。

セキュリティのベストプラクティス

1. PKCEを使用する 保管 pkceEnabled: true パブリッククライアント用

2. 暗黙のフローではなく、認可codeフローを優先する responseType: 'code' サーバー側でトークンを検証する

3. 発行者、受信者、有効期限、署名を検証する リフレッシュトークンを安全に保管する

4. ネイティブアプリ用、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-persistent-accountと組み合わせる __CAPGO_KEEP_0__ @capgo/capacitor-persistent-account.

5. HTTPSを使用してください プロダクション用認証エンドポイントとログアウトエンドポイントは、常にHTTPSを使用する必要があります。

トラブルシューティング

providerId is required

すべてのOAuth2メソッドには、構成済みのプロバイダーキーが必要です。

await SocialLogin.login({
  provider: 'oauth2',
  options: { providerId: 'github' },
});

OAuth2 provider "xxx" not configured

呼び出し SocialLogin.initialize() ログインする前に、確実に providerId 指定されたオブジェクトのキーと一致するように oauth2.

リダイレクトURLの不一致

• アプリとプロバイダーのダッシュボードで設定されているリダイレクト URL を、文字列単位で比較してください。
• 末尾のスラッシュ、スキームの不一致、ホストの差異を注意してください。
• モバイル アプリの URL スキームを登録する前に、デバイス上でテストする前に確認してください。

リフレッシュ トークンが返されませんでした

ほとんどのプロバイダは、スコープの要求や明示的な同意の強制などでリフレッシュ トークンを返します。プロバイダーの特定のポリシーを確認してください。 offline_access トークン エクスチェンジのデバッグ

セクションのタイトル “トークン エクスチェンジのデバッグ”

有効 logsEnabled: true プロバイダーの設定で

関連ドキュメント

• Social Loginの開始
• Ionic Auth Connectの移行

Generic OAuth2 Providersから続きます

Generic OAuth2 Providersを使用している場合 Generic OAuth2 Providers 認証とアカウントフローの計画と実行に使用し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Native Capabilityの@capgo/capacitor-social-loginの使用 @capgo/capacitor-social-login @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-social-loginを参照してください。 @capgo/capacitor-passkey Capgoの実装詳細については@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometric、 2要素認証 Capgoの実装詳細については2要素認証を参照してください。