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 flow
必要なスコープ 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 は、

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例セクション

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

OAuthアプリを作成する 開く GitHub 開発者設定そしてOAuthアプリを作成します。
コールバック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 ポータルに移動し、 App registrationsネイティブまたはモバイルアプリの登録を作成します。
リダイレクト URIを追加 モバイルまたはデスクトップ用のリダイレクト URIを追加して、実行中のアプリのコールバック URLに一致させます。

プラグインを設定

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 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 管理コンソールで、OIDC ネイティブアプリケーションを作成します。
リダイレクト URI を追加します。 __CAPGO_KEEP_0__ アプリで使用する正確なコールバック 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の自動検出をサポートしている場合、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を使用して直接ブラウザでトークンを交換することをブロックしています。その場合、バックエンドでトークンを交換するか、パブリッククライアントを許可するプロバイダーの設定を使用してください。

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

PKCEを使用する 保持する pkceEnabled: true パブリッククライアント用
Prefer authorization code flow responseType: 'code' 暗黙のフローは安全ではない
トークンをサーバー側で検証する 発行者、受信者、有効期限、署名を検証する
リフレッシュトークンを安全に保存する ネイティブアプリ用、プラグインを組み合わせる @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を、文字列単位で比較してください。
末尾のスラッシュ、スキームの不一致、ホストの差異を確認してください。
モバイルアプリのURLスキームを登録する前に、デバイス上でテストする前に確認してください。

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

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

リダイレクトURLの不一致

を有効にします。 logsEnabled: true を有効にします。

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

あなたが使用している場合 一般的なOAuth2プロバイダー @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ソーシャルログインを使用してソーシャルログインのネイティブ機能を使用するために@capgo/capacitor-ソーシャルログインを使用します @capgo/capacitor-ソーシャルログイン @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-パスキー for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-ネイティブバイオメトリック for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 Capacitor-2要素認証の実装詳細については、

Generic OAuth2 プロバイダー

導入

必要なもの

Multi-provider configuration

OIDC discovery and aliases

Auth Connect互換のプリセット

設定オプション

OAuth2によるログインを使用する

ログイン

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

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

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

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

プロバイダ固有の例

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の不一致

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

リダイレクトURLの不一致

関連ドキュメント

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

`providerId is required`

`OAuth2 provider "xxx" not configured`