Keycloakのアイデンティティー・ブローカー機能を利用して、Facebookを外部アイデンティティー・プロバイダーとしてID連携を構成してWebへのアクセス認証をします。FacebookとKeycloakの認証連携としては、OpenID Connectが利用できます。FacebookとのSNS連携ではSDKを利用せずにOIDCで連携します。
【方針】
- FacebookでWeb認証を行う
- Facebookで提供するSDKは利用しない
- FacebookとkeycloakはOIDC認証で連携
- KeycloakとFacebookはIDフェデレーションを構成
【IDフェデレーション】
KeycloakとターゲットWebは、SAML認証やOIDC認証で接続可能です。今回は全経路でOpenID Connect / OIDC で連携します。keycloakとはFacebook以外にもInstagram、twitter、paypal、GoogleやAzure ADなどとのKeycloakでのID認証連携が可能です。
【こんな用途に】
- Webサイトに認証を設定したい
- Facebook / SNS 側の認証を利用したい（IDフェデレーション）
- 管理者の負担を少なくして運用したい
【名称について】
認証の方式により、名称が異なります
| 認証方式 | ID管理側 | Web側など |
| SAML認証時 | idP / Identity Provider | SP / Service Provider |
| OIDC認証時 | OP / OpenID Provider | RP / Relying Party |
【Keycloak を中継してFacebookと外部ID連携を構成】
必要な機器構成
Facebook ⇔ < OIDC > ⇔ Keycloak ⇔ < OIDC > ⇔ Web
- Facebook / OP
- Keycloak / RP and OP （兼用）
- Web / RP
【OIDC対応Web / RP 】
OIDC認証対応のWebサービスを利用 もしくは 自社でOIDC対応のWebを構築して構成できます。
今回は、OIDC認証やSAML認証に対応のWebアプライアンス 
「Powered BLUE Web for SSO / IDaaS」を利用します。
- マルチドメイン・マルチサイトでの運用に対応
- サイト毎にOIDC認証やSAML認証の異なるWeb認証での運用に対応
- サイト毎に個別のサイト管理者に権限を委譲での運用に対応
- GUIからの設定の対応
- 自社環境での運用に対応
- アプライアンスでの‘提供
- Let’s Encrypt対応
- WordPress対応
- OS RockyLinux 8.x / RedHat 8.x に対応
 |
 |
【Keycloak / OP 】
一般的なKeycloakを利用できます。
今回はKeycloakとしては、 「Powered BLUE for idP 」のKeycloakアプライアンスを利用します。
GUIからのサーバーの基本設定およびKeycloakの構成（スタンドアロン・クラスター・バックアップ）などの設定に対応しています。
- サーバーの設定（Network / Firewall )
- ウィザードによるKeycloakの構成や設定（スタンドアロンやクラスター）
- DB 設定（ H2 / MariaDB ）
- DB 構成 ( 内蔵もしくは外部サーバーのどちらの構成にも対応 ）
- Keycloak のバックアップ、リストア、バージョンアップ
- keycloak へのアクセスポート（ 80 / 443 )
- リバースプロキシ連携機能
- SSLクライアント認証
- SSLサーバー証明書の登録機能
- OSなどのパッチ適用
- アクティブモニタ（サーバーやサービス監視・再起動・管理者への通知）
コマンドラインからのプログラムのインストールや設定は不要
( 画面のイメージをクリックで拡大表示 ）
【Keycloak のGUIパス】
WildFlyベースまでのKeycloak の管理GUIのパス /auth
- https://xxx.yyy.zzz.ttt/auth
QuarkusベースでのKeycloak の管理GUIのパス /
- https://xxx.yyy.zzz.ttt/
Powered BLUE アプライアンスは任意のパスおよびポート設定機能 例 /xyz
- https://xxx.yyy.zzz.ttt/xyz
【Keycloakのバージョンアップ 】
バージョンアップ前 例 18.0.1
バージョンアップ後 例 19.0.1
【Keycloakのバックアップやリストア 】
【機器の構成と設定手順】
①keycloakとの認証（1段階）
- WebサイトとKeycloakでOIDC認証（WebとKeycloakでのOIDC基本設定・認証動作の確認）
②FacebookとKeycloakのフェデレーション（2段階）
- KeycloakとFacebookとのIDフェデレーションの設定・認証動作の確認
【 ①keycloakとの認証（1段階） 】
-
- Keycloak / OP の設定
- 1.1. レルムの作成
- 1.2. クライアントの作成
- 1.3. ロールの作成
- 1.4. ユーザーの作成とロールの割り当て
- 1.5. OIDC設定ファイル(json)のダウンロード
- Webサイト / RP の設定
- 2.1. 仮想サイトの作成
- 2.2. KeycloakのOIDC設定ファイル（json)のアップロード
- 2.3. OIDC認証の適用ディレクトの指定
- 2.4. Webコンテンツのアップロード
- 2.5. KeycloakでのOIDC認証
- Keycloak / OP の設定
【 ②FacebookとKeycloakのフェデレーション（2段階） 】
-
- Facebook / フェデレーションの設定
- 1.1. Facebookへアプリの登録
- 1.2. KeycloakにIDプロバイダの登録
- 1.3. FacebookにリダイレクトURIを登録
- 1.4. フェデレーションでのOIDC認証
- Facebook / フェデレーションの設定
【①keycloakとの認証（1段階）】
KeycloakでWebサイトをOIDC認証する
- Keycloak / OP ⇔ Web / RP
- OpenID Connect / OIDCでの認証
【Keycloakの設定】
- Keycloakの管理GUIへは運用時の httpsのFQDN / IP でアクセスします
- IPアドレスでアクセスすると、生成されるURLなどもIPベースとなります
【レルムの作成】
名称設定 例 「rev-o」
作成後 rev-o
【クライアントの作成】
- クライアントID 例 oidc-demo-client （名称は適宜付与）
- クライアントプロトコル 選択 openid-connect
- アクセスタイプ 選択 confidential
- 有効なリダイレクトURL 例 https://www.example.jp/oidc/redirect_uri
＊ リダイレクトURLは、Web / RP 側のOIDCのURLを記載します
【ロールの追加】
ロールを割り当てられたユーザーのみがアクセスできます
例 oidc-demo-client
【ユーザーの作成】
- ユーザー名 demo
- メールアカウント demo@example.jp
【パスワードの設定】
作成したユーザーの「クレデンシャル」を選択してパスワードを設定します
【ユーザーへロールのアサイン】
例 oidc-demo-role
【OIDCの設定ファイル】
Keycloak からOIDC設定ファイルのダウンロード
例 oidc-demo-client の編集を選択
「インストール」タブをクリックしてjsonファイルを「ダウンロード」します
【JSONファイルのダウンロード】
Keycloakのjsonファイルをダウンロード
【Web / RPの設定】
「Powered BLUE Web for SSO / IDaaS」での設定例です
OIDC認証やSAML認証に対応のWebサイト機能を有したマルチドメインで運用できるアプライアンスです。
【仮想サイトの作成】
OIDC認証を設定するWebサイト www.example.jp を作成します。
【OIDCの設定】
Web認証として
- SAML 2.0
- OpenID Connect
を選択できます。
今回は「OpenID Connect」を選択します
【KeycloakからダウンロードのJSONファイルの読み込み】
【データのインポート】
「初期設定」ボタンでKeycloakからエクスポートした読み込みデータ(json)を保存します
【OIDCの有効化】
「OIDCを有効にする」に ✔ を入れて「保存」ボタンで適用します
【認証ディレクトリ】
OIDC認証を適用するディレクトリを設定します
例 /test にOIDC認証を設定
- https://www.example.jp/ 認証なし
- https://www.example.jp/test に OIDC認証を設定
【OIDC認証対応のWeb サイト】
一般的なWebコンテンツのアップロードやWordPerssでのWebサイトの構築・運用に対応しています。
https://www.example.jp/ 以下に
①「Webコンテンツをアップロード」
もしくは
②「WordPress でコンテンツを作成」
します。
 |
 |
|
| 一般的なWebコンテンツのWebサイト | WordPressのWebサイト |
【アクセス手順】
① https://www.example.jp/test にアクセス
② 初回は、Keycloak へリダイレクトされて認証を求められます
- アカウント demo@example.jp
- パスワード xxxxxxxx
③ 認証後に https://www.example.jp/test のWebページが表示
【②FacebookとKeycloakのフェデレーション（2段階）】
ここからは、FacebookとKeycloakの認証連携設定を行います
【Facebookの設定】
下記URLにアクセスします。
https://developers.facebook.com/
「マイアプリ」を選択
「アプリを作成」を選択
作成するタイプを選択 例 「生活者」
「Facebookにログイン」の「設定」を選択
WWW「ウェブ」を選択
URL 適宜指定 例 https://rev-l.powered.blue/
設定の「ベーシック」を選択
- 「アプリID」
- 「app secret」
をKeycloakへ登録
keycloak
「アイデンティティ・プロバイダ」 から 「Facebook」を選択
Facebook側の
- 「アプリID」
- 「app secret」
をそれぞれ、keycloakの
- 「クライアントID」
- 「クライアントシークレット」
に登録します
Keycloak 側の「リダイレクトURI」を Facebook側の「有効なOAuthリダイレクトURI」に登録します。
「Facebookログイン」の「設定」を選択
「有効なOAuthリダイレクトURI」の項に Keycloak 側の「リダイレクトURI」を登録します
【Facebook側のユーザー・アカウント】
- ユーザー名 facebook-user
- 姓 facebook
- 名 user
- パスワード xxxxxxxxxx
【IDフェデレーション】
① https://www.example.jp/test にアクセス
② Keycloak へリダイレクトされて認証を求められます
- 「Facebook」を選択（IDフェデレーション）
③Facebookのログイン画面ヘ遷移
- アカウント facebook-user@xyz.com
- パスワード xxxxxxx
④ 認証後に https://www.example.jp/test のWebページが表示
【Facebookからのメール通知 例】
【アカウントの管理】
Facebook側で管理のユーザーでログイン時には、Keycloak のデフォルトでは新規ユーザー情報
- ユーザー名 facebook-user
- E-メール faceboook-user@xyz.com
- 姓 facebook
- 名 user
などはKeycloak のデータベースへ追加登録されます。
【アプライアンスの簡単運用】
情シスの負担軽減での運用にも対応
|
|
- サーバーの自己監視やサービスの自動再起動機能
- パッチのスケジュールアップデート機能
- 管理者への通知機能
【アプライアンス運用先の環境】
- VMware / Hyper-V
- AWS / Azure / FUJITSU Hybrid IT Service FJcloud-O (富士通) / VPSなど