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 サーバー

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

必要なもの

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

• OAuth クライアント ID
• アプリのスキームまたは Web コールバック URL に対応するリダイレクト URL
• 認証エンドポイント
• 認証フロー code のためにトークンエンドポイント、または OIDC の検出 issuerUrl context
• 必要なスコープ 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,
    },
  },
});

__CAPGO_KEEP_0__

• 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.

設定オプション

オプション	タイプ	必要	説明
appId / clientId	OAuth2クライアント識別子	はい	OAuth2クライアント識別子
issuerUrl	文字列	いいえ	OIDC検出ベースURL
authorizationBaseUrl / authorizationEndpoint	文字列	はい*	認可エンドポイントURL
accessTokenEndpoint / tokenEndpoint	文字列	いいえ*	トークンエンドポイントURL
redirectUrl	string	はい	コールバック URL
scope / scopes	string / string[]	いいえ	要求されたスコープ
pkceEnabled	boolean	いいえ	標準値 true
responseType	'code' または 'token'	いいえ	標準値 'code'
resourceUrl	OAuth2プラグイン	なし	ユーザー情報またはリソースエンドポイント
logoutUrl / endSessionEndpoint	文字列	なし	ログアウトまたはセッション終了URL
postLogoutRedirectUrl	文字列	なし	ログアウト後にリダイレクトされるURL
additionalParameters	Record<string, string>	なし	追加の認証要求パラメータ
additionalTokenParameters	Record<string, string>	なし	追加トークン要求パラメータ
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() プラグインが保存したリフレッシュ トークンを使用します。 refreshToken() __CAPGO_KEEP_0__ を使用すると、シンプルな OAuth アプリ フローと基本的なプロファイル データを取得できます。

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

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

console.log(code.accessToken);

プロバイダー固有の例

GitHub の例

Use GitHub when you want a simple OAuth app flow and basic profile data:

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 Graph のユーザープロファイルなどのデータが必要な場合に 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 アプリを作成する __CAPGO_KEEP_0__ GitHub とアプリケーションを新規作成してください。

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 Capgoアプリケーションで使用する場合のテナント 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 Admin Console で、OIDC ネイティブ アプリケーションを作成します。

2. リダイレクト URI を追加します。 アプリで使用する正確なコールバック 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の自動検出をサポートしている場合、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 プライベートブラウザセッションを使用するには、共有クッキーなしで設定してください。

Android

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

Web

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

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

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

2. Prefer authorization code flow responseType: 'code' 暗黙のフローは安全ではない

3. トークンをサーバー側で検証する トークンをデコードし、発行者、受信者、有効期限、署名を検証する

4. リフレッシュトークンを安全に保存する ネイティブアプリ用、プラグインを @capacitor/core@capgo@capacitor/persistent-account@capacitor.

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 プロバイダーの設定で有効にし、生成された URL とトークン エクスチェンジの詳細を表示してください。

関連ドキュメント

• ソーシャルログインの開始
• イオニック認証接続の移行

一般OAuth2 プロバイダーから続けて

あなたが使用している場合 一般OAuth2 プロバイダー 認証とアカウントフローの計画と実行に使用し、 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-loginのネイティブ機能 Using @capgo/capacitor-social-login Capacitor-capgo-capacitorの実装詳細について Capacitor-capgo-capacitorのPasskey Capacitor-capgo-capacitorのPasskeyの実装詳細について Capacitor-capgo-capacitorのNative Biometric Capacitor-capgo-capacitorのNative Biometricの実装詳細について、 2要素認証 Capacitor-__CAPGO_KEEP_0__-__CAPGO_KEEP_1__の2要素認証の実装詳細について