汎用OAuth2プロバイダー

GitHub

インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。

はじめに

Capgo Social Login pluginには、OAuth2およびOpenID Connectエンジンが組み込まれています。これにより、以下のような標準規格に準拠したあらゆるIDプロバイダーと連携できます：

GitHub
Azure AD / Microsoft Entra ID
Auth0
Okta
Keycloak
独自のOAuth2またはOIDCサーバー

この oauth2 設計上、マルチプロバイダーに対応しています。複数のプロバイダーを一度に登録し、ログイン時に以下を使用して選択できます： providerId.

必要なもの

プロバイダーを設定する前に、以下を用意してください：

OAuth クライアント ID
アプリの scheme または Web コールバック URL と一致するリダイレクト URL
認可エンドポイント (Authorization endpoint)
code フロー用のトークンエンドポイント、または issuerUrl OIDC ディスカバリ用のエンドポイント
アプリに必要なスコープ（例： openid profile email

マルチプロバイダー設定

使用する 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ディスカバリとエイリアス

プロバイダーが 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 のエイリアスとして appId
authorizationEndpoint のエイリアスとして authorizationBaseUrl
tokenEndpoint のエイリアスとして accessTokenEndpoint
endSessionEndpoint のエイリアスとして logoutUrl
scopes のエイリアスとして 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`	string	はい	OAuth2 クライアント ID
`issuerUrl`	string	いいえ	OIDC discovery ベース URL
`authorizationBaseUrl` / `authorizationEndpoint`	string	はい*	認可エンドポイントURL
`accessTokenEndpoint` / `tokenEndpoint`	string	いいえ*	トークンエンドポイントのURL
`redirectUrl`	string	はい	コールバックURL
`scope` / `scopes`	OAuth2	いいえ	リクエストするスコープ
`pkceEnabled`	boolean	いいえ	デフォルト値 `true`
`responseType`	`'code'` または `'token'`	いいえ	デフォルト値 `'code'`
`resourceUrl`	string	いいえ	ユーザー情報またはリソースのエンドポイント
`logoutUrl` / `endSessionEndpoint`	string	いいえ	ログアウトまたはセッション終了用URL
`postLogoutRedirectUrl`	string	いいえ	ログアウト後のリダイレクトURL
`additionalParameters`	`Record<string, string>`	いいえ	認証リクエストの追加パラメータ
`additionalTokenParameters`	`Record<string, string>`	いいえ	トークンリクエストの追加パラメータ
`additionalResourceHeaders`	`Record<string, string>`	いいえ	追加のヘッダー `resourceUrl`
`additionalLogoutParameters`	`Record<string, string>`	いいえ	ログアウト時の追加パラメータ
`loginHint`	string	いいえ	のショートカット `additionalParameters.login_hint`
`prompt`	string	いいえ	のショートカット `additionalParameters.prompt`
`iosPrefersEphemeralSession`	boolean	いいえ	iOSでエフェメラルなブラウザセッションを優先する
`logsEnabled`	boolean	いいえ	詳細なデバッグログを有効にする

authorizationBaseUrl と accessTokenEndpoint が任意となるのは次の場合のみです： issuerUrl はディスカバリに十分です。明示的なエンドポイントは、ディスカバリで取得した値より常に優先されます。

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

Webでのリダイレクトフロー

使用する 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() リフレッシュトークンを直接渡し、新しいOAuth2レスポンスを取得できます。

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

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

console.log(code.accessToken);

プロバイダー別の実装例

GitHub の実装例

シンプルなOAuthアプリフローと基本的なプロファイルデータが必要な場合は、GitHub を使用してください：

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 audienceが必要な場合は、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 の例

プロバイダーが公開している場合は、discoveryを使用してください /.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`	Access token のペイロード、または `null`
`idToken`	プロバイダーが返した場合の OIDC ID token
`refreshToken`	リクエストしたスコープで許可された場合の Refresh token
`resourceData`	取得した生の JSON: `resourceUrl`
`scope`	付与されたスコープ
`tokenType`	通常 `bearer`
`expiresIn`	トークンの有効期限（秒）

プロバイダー設定リファレンス

GitHub

OAuthアプリを作成する 開く GitHub デベロッパー設定、新しいOAuth Appを作成します。
コールバックURLを設定する アプリのリダイレクトURLを使用してください。例： myapp://oauth/github.

プラグインの設定

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

アプリの登録 Azure Portalに移動し、以下を開いてください： App registrations、次にネイティブまたはモバイルアプリの登録を作成します。
リダイレクトURIの追加 アプリのコールバックURLと一致する、モバイルまたはデスクトップのリダイレクトURIを追加します。

プラグインの設定

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

Auth0

ネイティブアプリケーションの作成 次を開きます： Auth0 ダッシュボード Nativeアプリを作成します。
許可されたコールバックURLの設定 Capacitor アプリで使用する正確なリダイレクトURLを追加してください。

プラグインの設定

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

OIDCネイティブアプリの作成 Okta Admin Consoleで、OIDC Native Applicationを作成します。
リダイレクトURIの追加 アプリで使用するコールバックURLを正確に登録してください。

プラグインの設定

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

Discoveryが利用できない場合は、認可およびトークンエンドポイントを手動で設定してください。

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

iOSと

このプラグインは以下を使用します： ASWebAuthenticationSession.
設定 iosPrefersEphemeralSession: true クッキーを共有しないプライベートなブラウザセッションが必要な場合。

Android

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

Web

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

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

PKCEを使用する 保持 pkceEnabled: true パブリッククライアント向けに。
Authorization code フローを推奨 responseType: 'code' Implicit フローよりも安全です。
バックエンドでトークンを検証する Issuer、Audience、Expiration、Signature をサーバーサイドでデコード・検証してください。
リフレッシュトークンを安全に保存する ネイティブアプリでは、このプラグインを以下と組み合わせて使用してください： @capgo/capacitor-persistent-account.
常に 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と、プロバイダーのダッシュボードの設定を1文字ずつ比較してください。
末尾のスラッシュ、スキームの不一致、ホスト名の違いに注意してください。
実機でテストする前に、モバイルアプリのURLスキームが登録されていることを確認してください。

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

ほとんどのプロバイダーでは、以下のようなスコープをリクエストするか、 offline_access 明示的に同意を強制した場合にのみ、リフレッシュトークンを返します。各プロバイダーのポリシーを確認してください。

トークン交換のデバッグ

有効にする logsEnabled: true プロバイダーの設定を確認して、生成されたURLやトークン交換の詳細を調査してください。

Generic OAuth2 Providers からの続き

使用している場合 汎用OAuth2プロバイダー 認証とアカウントフローを計画するには、これを次と連携させてください @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要素認証二要素認証の実装の詳細については。

汎用OAuth2プロバイダー

はじめに

必要なもの

マルチプロバイダー設定

OIDCディスカバリとエイリアス

Auth Connect互換プリセット

設定オプション

OAuth2ログインの使用

ログイン

Webでのリダイレクトフロー

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

リフレッシュトークン

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

プロバイダー別の実装例

GitHub の実装例

Azure AD / Microsoft Entra ID の例

Auth0 の例

Okta の例

Keycloak の例

OAuth2 レスポンスの構造

プロバイダー設定リファレンス

GitHub

Azure AD / Microsoft Entra ID

Auth0

Okta

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

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

iOSと

Android

Web

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

トラブルシューティング

providerId is required

OAuth2 provider "xxx" not configured

リダイレクトURLが一致しません

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

トークン交換のデバッグ

関連ドキュメント

Generic OAuth2 Providers からの続き

`providerId is required`

`OAuth2 provider "xxx" not configured`