Keycloak

このプラグインのインストール手順とマークダウンガイドの全てを含む設定プロンプトをコピーします。

Overview

Keycloakは、組み込みの汎用OAuth2プロバイダーを通じて機能します。Keycloakには新しいネイティブプロバイダーが必要ありません。KeycloakクライアントをOpenID Connectクライアントとして設定し、 provider: 'oauth2' with a stable providerId例えば keycloak.

Keycloakクライアント設定

認可Capacitorフローを使用します。

Use the authorization code flow.
アプリ設定でPKCEを有効にします。
アプリが使用するすべてのリダイレクト URI を登録する必要があります。例えば myapp://oauth/keycloak モバイル用の非 HTTPS のリダイレクト URI と、HTTPS のコールバック URL をプロダクション用の Web アプリケーションに使用します。
スコープとして openid profile emailを使用します。ただし、リレームとクライアントがリフレッシュトークンを発行するように設定されている場合にのみ offline_access を追加します。

Issuer URL はデプロイメント依存です。現在の Keycloak のデプロイメントでは、 https://keycloak.example.com/realms/my-realm/.well-known/openid-configurationにリレームのメタデータを公開していますが、一部のデプロイメントでは追加のベースパスが含まれています。リレームの OpenID エンドポイントの構成から表示される issuer URL を使用します。

OIDC discovery の例

を優先します。そうすることでプラグインは、リレームのメタデータから認証、トークン、ログアウトエンドポイントを自動的に検出できます。 issuerUrl リレームのメタデータ

import { SocialLogin } from '@capgo/capacitor-social-login';

const keycloakIssuer = 'https://keycloak.example.com/realms/my-realm';

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      appId: 'your-keycloak-client-id',
      issuerUrl: keycloakIssuer,
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email',
      pkceEnabled: true,
      resourceUrl: `${keycloakIssuer}/protocol/openid-connect/userinfo`,
    },
  },
});

const result = await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'keycloak',
  },
});

console.log(result.result.idToken);
console.log(result.result.accessToken?.token);
console.log(result.result.resourceData);

リフレッシュトークン用に、以下の条件を満たす場合にのみリクエスト offline_access Keycloakのドメインとクライアントがリフレッシュトークンをこのアプリケーションに許可している場合

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      appId: 'your-keycloak-client-id',
      issuerUrl: keycloakIssuer,
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
    },
  },
});

手動エンドポイントフォールバック

OIDCディスカバリーがブロックされている場合や、デプロイメントがアプリケーションにメタデータを公開していない場合、エンドポイントを直接設定する。URLのベースは、Keycloakのデプロイメントが公開しているものと同じでなければなりません。

const keycloakRealmUrl = 'https://keycloak.example.com/realms/my-realm';

await SocialLogin.initialize({
  oauth2: {
    keycloak: {
      appId: 'your-keycloak-client-id',
      authorizationBaseUrl: `${keycloakRealmUrl}/protocol/openid-connect/auth`,
      accessTokenEndpoint: `${keycloakRealmUrl}/protocol/openid-connect/token`,
      redirectUrl: 'myapp://oauth/keycloak',
      scope: 'openid profile email',
      pkceEnabled: true,
      resourceUrl: `${keycloakRealmUrl}/protocol/openid-connect/userinfo`,
      logoutUrl: `${keycloakRealmUrl}/protocol/openid-connect/logout`,
    },
  },
});

Auth Connectの互換性

KeycloakはAuth ConnectのプリセットプロバイダIDのリストに含まれていません。すでに SocialLoginAuthConnectを使用している場合でも、汎用の oauth2 プロバイダーとログイン provider: 'oauth2' プラス providerId: 'keycloak'.

詳細は Keycloak OpenID Connect エンドポイントのリファレンス関連するドキュメント

「Keycloakから続けて」

Keycloakを使用している場合 Keycloak 認証とアカウントフローの計画に使用している場合、Keycloakを Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication 2要素認証の実装詳細について。