一般的なOAuth2 プロバイダー

導入

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

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

The oauth2 複数のプロバイダーをデザイン上サポートしています。複数のプロバイダーを一度に登録し、ログイン時には1つを選択できます。 providerId.

必要なもの

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

• OAuthクライアントID
• アプリスキームまたはWebコールバックURLに一致するリダイレクトURL
• 認証エンドポイント
• 認証フローcodeのために認証トークンエンドポイント、またはOIDCディスカバリ issuerUrl 必要なスコープ、例えば
• 複数のプロバイダーをサポートする設定 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 discoveryとエイリアス

プロバイダーが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,
    },
  },
});

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

• clientId エイリアスとして appId
• authorizationEndpoint エイリアスとして authorizationBaseUrl
• tokenEndpoint エイリアスとして 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

]} The translations are as follows: 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 クライアント ID
issuerUrl	string	No	OIDC
authorizationBaseUrl / authorizationEndpoint	string	Yes*	Authorization
accessTokenEndpoint / tokenEndpoint	string	No*	Token
redirectUrl	string	Yes	Callback
scope / scopes	文字列 / 文字列[]	しない	要求されたスコープ
pkceEnabled	ブール値	しない	デフォルト値 true
responseType	'code' または 'token'	しない	デフォルト値 'code'
resourceUrl	文字列	しない	ユーザー情報またはリソースエンドポイント
logoutUrl / endSessionEndpoint	string	No	Logout or end-session URL
postLogoutRedirectUrl	string	No	Redirect URL after logout
additionalParameters	Record<string, string>	No	Extra auth request params
additionalTokenParameters	Record<string, string>	No	Extra token request params
additionalResourceHeaders	Record<string, string>	No	Extra headers for resourceUrl
additionalLogoutParameters	Record<string, string>	しない	__CAPGO_KEEP_0__
loginHint	文字列	しない	__CAPGO_KEEP_1__ additionalParameters.login_hint
prompt	文字列	しない	__CAPGO_KEEP_2__ additionalParameters.prompt
iosPrefersEphemeralSession	ブール値	しない	__CAPGO_KEEP_3__
logsEnabled	iOSでephemeralブラウザセッションを優先する	No	詳細なデバッグ ロギングを有効にする

authorizationBaseUrl と accessTokenEndpoint は、発見に十分です。Explicitエンドポイントは、発見された値よりも優先されます。 issuerUrl OAuth2 ログインを使用する

セクション：OAuth2 ログインを使用する

セクション：ログイン

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

セクション：Web上でのリダイレクトフロー

使用するには、フルページリダイレクトをポップアップの代わりに使用します。 flow: 'redirect' if you want a full-page redirect instead of a popup:

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() refresh tokensを使用します。 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	プロバイダーが返した場合の OIDC ID トークン null
idToken	リフレッシュ トークンが要求されたスコープで許可されていた場合
refreshToken	クリップボードにコピー
resourceData	Raw JSON fetched from 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 を追加する アプリのコールバック 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を設定 「Auth0」

2. Set allowed callback URLs 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ネイティブアプリを作成 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プロバイダー

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

Web

• プロバイダーがポップアップをブロックしている場合や、トップレベルナビゲーションを必要とする認証ルールがある場合、リダイレクトフローがより適しています。
• CORSによって直接ブラウザーのトークン交換がブロックされている場合、バックエンドの交換またはパブリッククライアントを許可するプロバイダーの設定を使用してください。
• セキュリティのベストプラクティス

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

1. Section titled “Security best practices” __CAPGO_KEEP_0__ pkceEnabled: true パブリッククライアント用に。

2. Prefer authorization code flow responseType: 'code' バックエンドでトークンを検証する

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

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

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

__CAPGO_KEEP_1__

providerId is required

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

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

OAuth2 provider "xxx" not configured

Call SocialLogin.initialize() ログインする前に、 providerId プロバイダーのキーがオブジェクトのキーと一致することを確認してください。 oauth2.

リダイレクト URL の一致性が問題です

• アプリとプロバイダーのダッシュボードで、構成済みのリダイレクト URL を文字列単位で比較してください。
• 末尾のスラッシュ、スキームの不一致、ホストの差異などを注意してください。
• デバイスでテストする前に、モバイルアプリURLスキームを登録してください。

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

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

セクション：トークン交換のデバッグ

サービスプロバイダの設定で、生成されたURLとトークン交換の詳細を表示するようにしてください。 logsEnabled: true 関連ドキュメント

セクション：関連ドキュメント

• サービスプロバイダの設定で、生成されたURLとトークン交換の詳細を表示するようにしてください。
• Ionic Auth Connect の移行

一般的な OAuth2 プロバイダーから続ける

Capacitor を使用している場合 一般的な 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-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細について Two-factor authentication Two-factor authenticationの実装詳細について