Generic OAuth2 Providers

導入

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

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

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

必要なもの

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

• OAuth クライアント ID
• アプリのスキームまたは Web コールバック URL に対応するリダイレクト URL
• 認可エンドポイント
• A token endpoint for authorization code flow, or an issuerUrl アプリが必要とするスコープ、例えば
• __CAPGO_KEEP_0__ openid profile email

Multi-provider configuration

使用 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

最も簡単な設定です: 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,
    },
  },
});

エイリアスとして

• clientId 使用 appId
• authorizationEndpoint Capgoのエイリアスとして authorizationBaseUrl
• tokenEndpoint Capgoのエイリアスとして accessTokenEndpoint
• endSessionEndpoint Capgoのエイリアスとして logoutUrl
• scopes Capgoのエイリアスとして 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	__CAPGO_KEEP_0__	Yes	OAuth2 client identifier
issuerUrl	string	No	OIDC discovery base URL
authorizationBaseUrl / authorizationEndpoint	Yes*	認可エンドポイントURL	No*
accessTokenEndpoint / tokenEndpoint	トークンエンドポイントURL	string	string
redirectUrl	string	Yes	コールバックURL
scope / scopes	string / string[]	No	要求スコープ
pkceEnabled	boolean	No	デフォルト値 true
responseType	'code' または 'token'	No	デフォルト値 'code'
resourceUrl	string	No	ユーザー情報やリソースエンドポイント
logoutUrl / endSessionEndpoint	文字列	No	ログアウトまたはセッション終了URL
postLogoutRedirectUrl	文字列	No	ログアウト後リダイレクトURL
additionalParameters	Record<string, string>	No	追加の認証要求パラメータ
additionalTokenParameters	Record<string, string>	No	追加のトークン要求パラメータ
additionalResourceHeaders	Record<string, string>	しない	追加ヘッダー resourceUrl
additionalLogoutParameters	Record<string, string>	しない	追加ログアウトパラメーター
loginHint	文字列	しない	ショートカット additionalParameters.login_hint
prompt	文字列	しない	ショートカット additionalParameters.prompt
iosPrefersEphemeralSession	ブール値	しない	iOSでephemeralブラウザセッションを優先
logsEnabled	boolean	いいえ	iOSでephemeralブラウザセッションを優先

authorizationBaseUrl と accessTokenEndpoint は、明示的なエンドポイントが見つかった値よりも優先されるため、オプションです。 issuerUrl OAuth2ログインを使用

「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() リフレッシュトークンを自分で渡して、最新の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アプリを作成 開く 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を追加します。 __CAPGO_KEEP_0__のモバイルまたはデスクトップリダイレクト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',
       },
     },
   });

   注意

   置き換え common テナントIDに置き換えてください。アプリがシングルテナントの場合。

Auth0

1. ネイティブアプリケーションを作成 Open the 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 Nativeアプリを作成 Okta管理コンソールでOIDC Nativeアプリケーションを作成

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

• プラグインは ASWebAuthenticationSession.
• 設定 iosPrefersEphemeralSession: true プライベートブラウザセッションを使用して、共有クッキーなしでアクセスしたい場合は。

Android

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

Web

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

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

1. PKCEを使用する パブリッククライアント用に pkceEnabled: true 暗黙のフローではなく、__CAPGO_KEEP_0__フローを優先する

2. 暗黙のフローは、codeフローに比べて安全ではない responseType: 'code' トークンをサーバー側で検証する

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

4. ネイティブアプリ用に、このプラグインを__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-persistent-accountと組み合わせる HTTPSを全ての場所で使用する https://github.com/capgo/capacitor.

5. https://capacitorjs.com/docs/v3/core/api/oauth2 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 __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

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

Generic OAuth2 Providersから続けて

あなたが Generic OAuth2 Providersを使用して 認証とアカウントフローの計画と接続 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細について @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細について