OAuth2 の一般的なプロバイダー

GitHub

インストール

導入

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

GitHub
コンテキスト: Capgoのソリューションマーケティングページ。役割: 短いUIラベルまたはナビゲーションアイテム。Capgoの製品/ブランドと開発者用語を完全に保存します。
Auth0
Auth0
Okta
Keycloak

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

必要なものです。

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

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

Section titled “What you need” is not a text to be translated, it is a heading, so it should be translated as

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

OAuth2プロバイダーがOpenID Connectのディスカバリードキュメントを公開している場合、Capacitorは自動的に設定を検出します。 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,
    },
  },
});

OAuth2 と OIDC の一般的なエイリアスもサポートしています。

clientId OAuth2 appId
authorizationEndpoint OAuth2 authorizationBaseUrl
tokenEndpoint OAuth2のエイリアスとして accessTokenEndpoint
endSessionEndpoint OAuth2のエイリアスとして logoutUrl
scopes OAuth2のエイリアスとして scope

も利用可能:

additionalParameters 認証要求のオーバーライド用
additionalTokenParameters トークンのエクスチェンジのオーバーライド用
additionalResourceHeaders カスタムリソースエンドポイントヘッダ用
additionalLogoutParameters そして、 postLogoutRedirectUrl context: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And).
loginHint, promptログアウトフロー用 iosPrefersEphemeralSession

, そして

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.

構成オプション

オプション	種類	Required	必要
`appId` / `clientId`	説明	文字列	OAuth2クライアントID
`issuerUrl`	文字列	No	OIDC検出ベースURL
`authorizationBaseUrl` / `authorizationEndpoint`	文字列	Yes*	認可エンドポイントURL
`accessTokenEndpoint` / `tokenEndpoint`	文字列	No*	トークンエンドポイントURL
`redirectUrl`	文字列	Yes	コールバック URL
`scope` / `scopes`	文字列 / 文字列[]	No	要求されたスコープ
`pkceEnabled`	boolean	No	または `true`
`responseType`	`'code'` デフォルト値 `'token'`	No	または `'code'`
`resourceUrl`	文字列	No	ユーザー情報またはリソースエンドポイント
`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`	ブール値	なし	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() プラグインが保管しているリフレッシュトークンを使用します。 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の例

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

プロバイダーが公開している場合に、検出を使用してください /.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`	取得した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 ダッシュボード
許可されたコールバック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を追加 アプリケーションが使用する正確なコールバック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

プラグインは ASWebAuthenticationSession.
設定 iosPrefersEphemeralSession: true context

Android

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

Web

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

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

PKCE を使用します。 保持 pkceEnabled: true パブリッククライアント用
暗黙のフローではなく、認証フロー code を優先します。 responseType: 'code' 暗黙のフローは安全ではありません。
バックエンドでトークンを検証します。 発行者、受信者、有効期限、署名を検証するには、サーバー側でデコードして検証します。
リフレッシュトークンを安全に保存します。 Capgoのネイティブアプリ用には、このプラグインを @capgo/capacitor-パーシスティントアカウント.
プロダクション認証エンドポイントとログアウトエンドポイントは、常に HTTPS を使用する必要があります。 Use PKCE

トラブルシューティング

`providerId is required`

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

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

`OAuth2 provider "xxx" not configured`

呼び出し SocialLogin.initialize() ログインする前に、 providerId プロバイダの設定で oauth2.

リダイレクトURLの不一致

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

リフレッシュトークンが返されない

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

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

関連ドキュメント logsEnabled: true 「関連ドキュメント」のセクション

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

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

Capacitorアプリを配信コンテキスト: Capgo マーケティングウェブサイト。役割: 短い UI ラベルまたはナビゲーションアイテム。見つける場所: コンポーネント Hero.astro。メッセージキー `hero_title_line1` (Hero Title Line1)。

コンテキスト: Capgo マーケティングウェブサイト。役割: ウェブサイトコピーの文。見つける場所: コンポーネント Hero.astro。メッセージキー `hero_subtitle_v2` (Hero Subtitle V2)。 Enterprise Talk To Team

OAuth2 の一般的なプロバイダー

導入

必要なものです。

Section titled “What you need” is not a text to be translated, it is a heading, so it should be translated as

OIDC discovery and aliases

, そして

構成オプション

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

リフレッシュトークンが返されない

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

Enable

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

`providerId is required`

`OAuth2 provider "xxx" not configured`