コンテンツにジャンプ
Capgo - Live Updates for Capacitor Apps Capgo

一般的なOAuth2 プロバイダー

GitHub

Introduction

Section titled “Introduction”

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

  • GitHub
  • Azure AD / Microsoft Entra ID
  • Auth0
  • Okta
  • Keycloak
  • Custom OAuth2 or OIDCサーバー

The oauth2 設計上、configuratonは複数のプロバイダーをサポートしています。ログイン時には、複数のプロバイダーを一度に登録し、必要に応じて選択できます。 providerId.

What you need

「必要なもの」

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

  • OAuthクライアントID
  • アプリのスキームまたはWebコールバックURLに一致するリダイレクトURL
  • 認証エンドポイント
  • 認証フローcodeのために、認証トークンエンドポイント、またはOIDCディスカバリ issuerUrl OIDCディスカバリ
  • アプリが必要とするスコープ、例えば openid profile email

複数プロバイダー設定

「複数プロバイダー設定」

Use SocialLogin.initialize() once during app startup and register every provider you need:

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

Section titled “OIDC discovery and aliases”

If your provider exposes an OpenID Connect discovery document, issuerUrl is the simplest setup:

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

The plugin also supports common OAuth and OIDC aliases:

  • clientId as an alias of appId
  • authorizationEndpoint as an alias of authorizationBaseUrl
  • tokenEndpoint as an alias of accessTokenEndpoint
  • endSessionEndpoint as an alias of logoutUrl
  • scopes as an alias of scope

Also available:

  • additionalParameters for auth request overrides
  • additionalTokenParameters for token exchange overrides
  • additionalResourceHeaders for custom resource endpoint headers
  • additionalLogoutParameters and postLogoutRedirectUrl for logout flows
  • loginHint, prompt, and iosPrefersEphemeralSession

Auth Connect-compatible presets

Section titled “Auth Connect-compatible presets”

If you are migrating from Ionic Auth Connect and want to keep the same provider names, use 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 クライアント識別子
issuerUrlstringNoOIDC
authorizationBaseUrl / authorizationEndpointstringYes*Authorization
accessTokenEndpoint / tokenEndpointstringNo*Token
redirectUrlstringYesCallback
scope / scopesstring / string[]NoRequested scopes
pkceEnabledbooleanNoDefaults to true
responseType'code' or 'token'NoDefaults to 'code'
resourceUrlstringNoUser info or resource endpoint
logoutUrl / endSessionEndpointstringNoLogout or end-session URL
postLogoutRedirectUrlstringNoRedirect URL after logout
additionalParametersRecord<string, string>NoExtra auth request params
additionalTokenParametersRecord<string, string>NoExtra token request params
additionalResourceHeadersRecord<string, string>NoExtra headers for resourceUrl
additionalLogoutParametersRecord<string, string>しない追加ログアウトパラメータ
loginHint文字列しないShortcut for additionalParameters.login_hint
prompt文字列しないShortcut for additionalParameters.prompt
iosPrefersEphemeralSession布しないiOS上でエフェメラルブラウザセッションを優先する
logsEnabled布いいえ__CAPGO_KEEP_0__

authorizationBaseUrl そして accessTokenEndpoint __CAPGO_KEEP_1__ issuerUrl __CAPGO_KEEP_2__

__CAPGO_KEEP_3__

OAuth2 ログインを使用する

「OAuth2 ログインを使用する」のセクション

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

コピー

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

使用 flow: 'redirect' if you want a full-page redirect instead of a popup:

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

On the page that receives the callback, parse the login result:

const result = await SocialLogin.handleRedirectCallback();
if (result?.provider === 'oauth2') {
  console.log(result.result.providerId);
}

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

Section titled “ログイン状態とログアウト”
const status = await SocialLogin.isLoggedIn({
  provider: 'oauth2',
  providerId: 'github',
});


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

リフレッシュトークン

Section titled “リフレッシュトークン”
await SocialLogin.refresh({
  provider: 'oauth2',
  options: {
    providerId: 'github',
  },
});


const refreshed = await SocialLogin.refreshToken({
  provider: 'oauth2',
  providerId: 'github',
  refreshToken: 'existing-refresh-token',
});

refresh() Capgoプラグインが保存したリフレッシュトークンを使用します。 refreshToken() __CAPGO_KEEP_0__でリフレッシュトークンを自分で渡すことができ、最新のOAuth2レスポンスを返します。

アクセストークンの現在の値を取得します。

「アクセストークンの現在の値を取得します。」
const code = await SocialLogin.getAuthorizationCode({
  provider: 'oauth2',
  providerId: 'github',
});


console.log(code.accessToken);

プロバイダーの例

「プロバイダーの例」

GitHubの例

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

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のレスポンスの形状

OAuth2のレスポンスの形状

OAuth2のログインが成功すると、次の値が返されます。

フィールドログインに使用される設定されたプロバイダー キー
providerIdアクセストークンのペイロードまたは
accessTokenプロバイダーが返した場合のOIDC IDトークン null
idTokenリフレッシュトークンは、要求されたスコープが許可した場合
refreshTokenコピー
resourceDataRaw JSON fetched from resourceUrl
scopeスコープが付与された
tokenType通常 bearer
expiresIn秒単位のトークン有効期限

プロバイダーのセットアップリファレンス

プロバイダーのセットアップリファレンス

GitHub

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

「Azure AD / Microsoft Entra ID」セクション

  1. アプリを登録 Azure ポータルに移動し、 App registrationsネイティブまたはモバイル アプリの登録を作成

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

Auth0

Auth0というセクション

  1. ネイティブアプリを作成 Open the Auth0ダッシュボード でネイティブアプリを作成してください。

  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

Oktaというセクション

  1. OIDCネイティブアプリを作成 Okta管理コンソールでOIDCネイティブアプリケーションを作成します。

  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プロバイダー

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

KeycloakとカスタムOIDCプロバイダー
  • プラグインは ASWebAuthenticationSession.
  • 設定 iosPrefersEphemeralSession: true プライベートブラウザセッションを使用する場合、共有クッキーが存在しません。

Android

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

Web

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

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

PKCE を使用してください

  1. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ pkceEnabled: true パブリッククライアント用に。

  2. 暗黙のフローに比べて、code フローは安全です。 responseType: 'code' バックエンドでトークンを検証する

  3. サーバー側で発行者、受信者、有効期限、署名を検証してデコードする リフレッシュトークンを安全に保存する

  4. ネイティブアプリ用に、このプラグインを pair する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-persistent-account @capgo/capacitor-persistent-account.

  5. プロダクション認証エンドポイントとログアウトエンドポイントは、常にHTTPSを使用する トラブルシューティング

__CAPGO_KEEP_1__

Section titled “トラブルシューティング”

providerId is required

Section titled “providerId は必須です”

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

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

OAuth2 provider "xxx" not configured

Section titled “OAuth2 プロバイダ "xxx" が構成されていません”

Call SocialLogin.initialize() ログインする前に、 providerId と一致することを確認してください。 oauth2.

オブジェクトキー下の

Redirect URL の一致性
  • Section titled “Redirect URL の一致性”
  • アプリとプロバイダーダッシュボードで、設定済みのリダイレクトURLを文字列単位で比較してください。末尾のスラッシュ、スキームの不一致、ホストの差異を注意してください。
  • __CAPGO_KEEP_0__のURLスキームを登録して、デバイス上でテストする前に確認してください。

No refresh token returned

__CAPGO_KEEP_1__

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

__CAPGO_KEEP_2__

__CAPGO_KEEP_0__の設定で、生成されたURLとトークン交換の詳細を表示するようにします。

関連ドキュメント logsEnabled: true __CAPGO_KEEP_3__

__CAPGO_KEEP_0__

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

「一般的な OAuth2 プロバイダーから続けてください」のセクション

Capgo を使用している場合 一般的な OAuth2 プロバイダー 認証とアカウントフローの計画に使用し、Cloudflare の Capgo との接続 Capacitor の @capgo/capacitor-social-login を使用 Capacitor の @capgo/capacitor-social-login のネイティブ機能 Capacitor の @capgo/capacitor-social-login の実装詳細 Capacitor の @capgo/capacitor-passkey Capacitor の @capgo/capacitor-passkey の実装詳細 Capacitor の @capgo/capacitor-social-login @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細について Two-factor authentication Two-factor authenticationの実装詳細について