OAuth2プロバイダー

GitHub

このプラグインのインストールステップとフルマークダウンガイドまでの全てのステップを含む設定プロンプトをコピーする

導入

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

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

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

「必要なもの」

OAuthクライアントID

アプリのスキームまたはWebコールバックURLに一致するリダイレクトURL
認証エンドポイント
認証フロー__CAPGO_KEEP_0__のために認証トークンエンドポイント、またはOIDCディスカバリ
A token endpoint for authorization code flow, or an issuerUrl 複数のプロバイダーをサポートする設定
What you need 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',
      },
    },
  },
});

プロバイダーがOpenID Connectのディスカバリードキュメントを公開している場合、

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

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 のエイリアスとして 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

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 client identifier
`issuerUrl`	__CAPGO_KEEP_0__	__CAPGO_KEEP_1__	OIDC discovery base URL
`authorizationBaseUrl` / `authorizationEndpoint`	__CAPGO_KEEP_0__	Yes	__CAPGO_KEEP_1__
`accessTokenEndpoint` / `tokenEndpoint`	Authorization endpoint URL	__CAPGO_KEEP_0__	Yes*
`redirectUrl`	__CAPGO_KEEP_1__	Token endpoint URL	コールバック URL
`scope` / `scopes`	__CAPGO_KEEP_0__ / __CAPGO_KEEP_0__[]	しない	要求されたスコープ
`pkceEnabled`	boolean	しない	デフォルト値は `true`
`responseType`	`'code'` または `'token'`	しない	デフォルト値は `'code'`
`resourceUrl`	string	しない	ユーザー情報またはリソースエンドポイント
`logoutUrl` / `endSessionEndpoint`	__CAPGO_KEEP_0__	No	ログアウトまたはセッション終了URL
`postLogoutRedirectUrl`	__CAPGO_KEEP_0__	No	ログアウト後リダイレクトURL
`additionalParameters`	`Record<string, string>`	No	追加の認証要求パラメータ
`additionalTokenParameters`	`Record<string, string>`	No	追加のトークン要求パラメータ
`additionalResourceHeaders`	`Record<string, string>`	No	追加ヘッダー `resourceUrl`
`additionalLogoutParameters`	`Record<string, string>`	しない	追加ログアウトパラメータ
`loginHint`	文字列	しない	ショートカット `additionalParameters.login_hint`
`prompt`	文字列	しない	ショートカット `additionalParameters.prompt`
`iosPrefersEphemeralSession`	ブール値	しない	iOS上でエフェメラルブラウザセッションを優先する
`logsEnabled`	boolean	No	詳細なデバッグロギングを有効にする

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

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

boolean

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

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

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

Refresh tokens

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

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 を使用する必要がある場合、ユーザープロファイルなどの 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 は、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 example

プロバイダーが公開している場合、発見を使用してください。 /.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`	__CAPGO_KEEP_0__ `resourceUrl`
`scope`	取得したJSON
`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を追加してください。

プラグインの設定

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

ネイティブアプリケーションを作成 Open the Auth0ダッシュボードとネイティブアプリを作成してください。
__CAPGO_KEEP_0__の許可されたコールバック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ディスカバリをサポートしているプロバイダーがあれば、 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.
Set iosPrefersEphemeralSession: true プライベートブラウザセッションを使用する場合、共有クッキーが存在しません。

Android

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

Web

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

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

PKCE を使用する __CAPGO_KEEP_0__ を保持する pkceEnabled: true パブリッククライアント用に。
code 認証フローを優先する responseType: 'code' 暗黙のフローよりも安全です。
バックエンドでトークンを検証する 発行者、受信者、有効期限、署名を検証するサーバー側でデコードする。
リフレッシュトークンを安全に保存する ネイティブアプリ用に、このプラグインを pair する @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 プロバイダーから続ける

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

OAuth2プロバイダー

導入

「必要なもの」

Multi-provider configuration

プロバイダーがOpenID Connectのディスカバリードキュメントを公開している場合、

Auth Connect-compatible presets

設定オプション

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

ログインセクション

boolean

Login status and logout

Refresh tokens

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

プロバイダ固有の例

GitHubの例

Azure AD / Microsoft Entra IDの例

Auth0 の例

Okta の例

Keycloak example

OAuth2 レスポンスの形状

秒

GitHub

Azure AD / Microsoft Entra ID

Auth0

Okta

KeycloakおよびカスタムOIDCプロバイダー

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

iOS

Android

Web

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

トラブルシューティング

providerId is required

OAuth2 provider "xxx" not configured

リダイレクト URL の一致性

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

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

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

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

`providerId is required`

`OAuth2 provider "xxx" not configured`