一般的なOAuth2 プロバイダー

「導入」のセクション

The Capgo Social Loginプラグインには、OAuth2およびOpenID Connectエンジンが組み込まれています。任意の標準ベースのIDプロバイダーと接続できます。

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

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

設定の前に、以下の情報を収集してください。

設定の前に、以下の情報を収集してください。

• OAuth クライアント ID
• アプリのスキームまたは Web コールバック URL に対応するリダイレクト URL
• 認可エンドポイント
• 認可フロー code のための認可トークンエンドポイント、または OIDC の検出 issuerUrl OIDC 検出とエイリアス
• あなたのアプリが必要とするスコープ、例えば openid profile email

複数のプロバイダーの設定

アプリ起動時に 1 回だけ使用し、必要なすべてのプロバイダーを登録する: 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',
      },
    },
  },
});

OAuth クライアント ID

プロバイダーが OpenID Connect discovery ドキュメントを公開している場合、 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,
    },
  },
});

プラグインは、一般的な OAuth と OIDC エイリアスもサポートしています:

• clientId __CAPGO_KEEP_0__ をエイリアスとして使用 appId
• authorizationEndpoint __CAPGO_KEEP_0__ をエイリアスとして使用 authorizationBaseUrl
• tokenEndpoint __CAPGO_KEEP_0__ をエイリアスとして使用 accessTokenEndpoint
• endSessionEndpoint __CAPGO_KEEP_0__ をエイリアスとして使用 logoutUrl
• scopes __CAPGO_KEEP_0__ をエイリアスとして使用 scope

も利用可能:

• additionalParameters __CAPGO_KEEP_0__ の認証要求オーバーライド
• 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 クライアント識別子
issuerUrl	文字列	いいえ	OIDC 発見ベース URL
authorizationBaseUrl / authorizationEndpoint	OIDC discovery base URL	はい*	__CAPGO_KEEP_0__ URL
accessTokenEndpoint / tokenEndpoint	文字列	いいえ*	__CAPGO_KEEP_0__ URL
redirectUrl	文字列	はい	__CAPGO_KEEP_0__ URL
scope / scopes	文字列 / 文字列[]	いいえ	__CAPGO_KEEP_0__
pkceEnabled	ブール値	しない	__CAPGO_KEEP_0__に設定される true
responseType	'code' または 'token'	しない	__CAPGO_KEEP_0__に設定される 'code'
resourceUrl	文字列	しない	ユーザー情報またはリソースエンドポイント
logoutUrl / endSessionEndpoint	文字列	しない	ログアウトまたはセッション終了URL
postLogoutRedirectUrl	文字列	いいえ	ログアウト後にリダイレクトするURL
additionalParameters	Record<string, string>	いいえ	追加の認証要求パラメーター
additionalTokenParameters	Record<string, string>	いいえ	追加のトークン要求パラメーター
additionalResourceHeaders	Record<string, string>	いいえ	追加のヘッダー resourceUrl
additionalLogoutParameters	Record<string, string>	いいえ	追加のログアウトパラメーター
loginHint	文字列	いいえ	iOS用のephemeralブラウザセッションを優先する additionalParameters.login_hint
prompt	__CAPGO_KEEP_0__	いいえ	iOS用のephemeralブラウザセッションを優先する additionalParameters.prompt
iosPrefersEphemeralSession	__CAPGO_KEEP_1__	いいえ	iOS用のephemeralブラウザセッションを使用する
logsEnabled	__CAPGO_KEEP_2__	詳細なデバッグログを有効にする	および

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 の例

Azure を使用すると、ユーザープロファイルなどの Microsoft Graph データが得られます。

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 の例

Auth0はOIDCに加えてカスタムAPIの聴衆が必要な場合に適しています。

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 ログインが成功すると、以下の値が返されます。

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

プロバイダー設定の参考資料

GitHub

1. OAuthアプリを作成する 開く 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とnativeまたはmobileアプリの登録を作成する。

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

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',
       },
     },
   });

   注意

   置き換え common テナント ID を指定してください。単一テナントのアプリの場合。

Auth0

1. ネイティブアプリを作成する 「Auth0 ダッシュボード」を開きます。 ネイティブアプリを作成します。 許可されたコールバック URL を設定する

2. アプリで使用する __CAPGO_KEEP_0__ の正確なリダイレクト URL を追加します。 Add the exact redirect URL used by your Capacitor app.

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. OktaのOIDCネイティブアプリを作成 Okta管理コンソールで、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ディスカバリをサポートしている場合、推奨 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

• プラグインは ASWebAuthenticationSession.
• Set iosPrefersEphemeralSession: true プライベートブラウザセッションを使用する場合、共有クッキーが存在しません。

Android

• OAuthリダイレクトは、Schemeとホストを含むアプリのURL経由で戻ります。
• Androidのデープリンク設定と完全に一致するように、プロバイダーのコールバックURLを確認してください。
• プラグインはOAuthアクティビティをすでに処理しています。アプリが異なるリダイレクトパターンを必要とする場合にのみ、カスタムインテントフィルタを追加してください。

Web

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

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

1. パブリッククライアントの場合、__CAPGO_KEEP_0__フローを使用してください。 暗黙のフローよりも安全です。 pkceEnabled: true トップレベルナビゲーションが必要な認証ルールがある場合、またはポップアップがブロックされている場合、リダイレクトフローを使用することをお勧めします。

2. Prefer authorization code flow responseType: 'code' Some providers block direct browser token exchange with CORS. In those cases, use a backend exchange or a provider setup that allows public clients.

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

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

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

トラブルシューティング

providerId is required

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

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

OAuth2 provider "xxx" not configured

Call SocialLogin.initialize() ログインする前に、 providerId プロバイダーのダッシュボードのオブジェクトキーと oauth2.

Redirect URL の一致性が確認されていません

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

リフレッシュ トークンが返されていません

ほとんどのプロバイダーは、スコープの要求が含まれる場合にのみリフレッシュ トークンを返します offline_access または明示的に同意を強制する。提供者固有のポリシーを確認してください。

トークン交換のデバッグ

有効 logsEnabled: true __CAPGO_KEEP_0__のプロバイダー設定で生成されたURLとトークン交換の詳細を表示する。

関連ドキュメント

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

一般的なOAuth2プロバイダーから続けてください。

あなたが使用している場合 OAuth2 の一般的なプロバイダー 認証とアカウントフローの計画に役立つため、 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey Using @capgo/capacitor-passkey @capgo/capacitor-passkey Using @capgo/capacitor-passkey @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric, and Two-factor authentication