KeycloakでSAMLを使ってみる（WordPress編）

KeycloakのSAML認証を利用してWordpressの連携を検証します。
Keycloakの[公式ドキュメント](https://www.keycloak.org/docs/latest/server_admin/#ref-saml-vs-oidc_server_administration_guide)では、SAMLよりもOIDCを推奨すると記載がありますが、SAMLは、引き続き多くのプロダクトで採用しているとされています。Keycloakでは、標準で SAML2.0とOIDC がSSO認証プロトコルとして利用できます。標準で利用できるSSO認証プロトコルのうち、今回は、SAML認証を検証してみます。
※本記事は、Keycloakのバージョンアップに伴い、「[KeycloakでSAMLを使ってみる（WordPress編）](https://qiita.com/katakura__pro/items/1e65e0bde7fda75332a1)」の記事を最新化したものです。

# 本記事でやること
 1. Amazon Lightsailを用いたWordPress構築
 2. Keycloak側の設定(Idp)
 3. WordPress側の設定(SP)
 4. 動作確認

# SAMLの概要
SAMLとは「Security Assertion Markup Language」の頭文字を取ったもので「サムル」と読みます。ドメインの異なるシステム間で安全に認証・認可情報の伝送を行うためOASIS(構造化情報標準促進協会）で定められたXMLベースのマークアップ言語規格です。SSO（シングルサインオン）やID連携などでSAMLを利用した認証が行われています。

# Amazon Lightsailを用いたWordPress構築

## WordPress構築
WordPressの構築にはAmazon Lightsailを利用する。LightsailはEC2などをコンソールから構築するよりも簡単で、選択項目も少なく、WordPressやApacheなどは全てインストールされるため、WordPressインストール～初期起動までを手早く構築できる。今回は[こちら](https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-tutorial-launching-and-configuring-wordpress)のチュートリアルに沿ってWordPressを起動させる。

## プラグイン導入
SAMLを用いたSSOを実現するため、「[SAML Single Sign On – SSO Login](https://ja.wordpress.org/plugins/miniorange-saml-20-single-sign-on/)」を導入する。
導入はWordPressの管理画面の`Plugins`から「SAML」で検索するとすぐに出てくる。
![プラグイン導入①_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/8972aaed-7e67-6669-435f-e569ede651d2.png)

`Install Now`ボタンを押下することで導入でき、インストール後のプラグインで「Activate」を選択することで有効化される。
![プラグイン導入②_編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/ebe6bc7e-9aa8-bd2c-e375-5b28db5c7873.png)

プラグインの導入が完了すると、以下のようなメタデータを確認することができるようになります。
こちらのメタデータは後ほどKeycloakの設定で利用します。
![プラグイン導入③メタデータタブ表示.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/fa23ab48-c604-bb6f-91d1-73523d34f06d.png)

# Keycloak側の設定(Idp)
以下の手順は、管理者ユーザーでのログインを前提として行います。
なお、keycloakの基本的セットアップについては[こちら](https://qiita.com/l_katayose/items/cbaff1395924cf13218c)を参照ください。

## Realmの追加
画面左上の「レルムの選択」メニューから「Create Realm」ボタンをクリックします。下記の通りにRealmを作成します。

- Realm name : `wordpress`
- enabled : `On`

![Realm作成①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/621eb42f-0a69-db02-38eb-306a74678091.png)

## クライアントの追加・設定
作成したRealmでWordpress用のClientを作成する。

1. Realmから「wordpress」を選択し、「Clients」のメニューを選択する。
![クライアント作成①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/599e9e74-b282-aff6-77d0-ef3362b945cd.png)


2. 「Create client」ボタンを押下して、Clientの作成画面を開く。
　　以下の通り、必要な項目を入力して「Next」ボタンを押下する。
　　　・Client type：`SAML`
　　　・Client ID：SPの`SP-EntityID / Issuer`
![クライアント作成②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/618633ca-035a-c197-09eb-f065ecc76a5d.png)

3. 特に変更せず、そのまま「Next」ボタンを押下する。
![クライアント作成②-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/02322316-1119-5e3d-5bca-30c806cbd4b8.png)

4. 以下の通り、必要な項目を入力して「Save」ボタンを押下する。
　　 ・RootURL：SPの`Base URL`
 　　・Valid redirect URIs ：SPの`ACS (Assertion Consumer Service) URL`
![クライアント作成②-3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/f7171a3f-6227-9e51-714a-50e0a5d6065e.png)

5. Client作成されたら以下の通り設定を変更する。
　Settingsタブ
　　・Name ID format：`email`
　　・Force Name ID Format：`off`
　　・Force POST Binding：`off`
![クライアント作成③-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/9c910523-e0d1-f414-4b9f-e221b716132b.png)

　Keysタブ
　　・Client signature required：`off`
![クライアント作成④.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/dd659036-9802-0107-c725-3c5741e456bf.png)

　Advancedタブ
　　・Assertion Consumer Service POST Binding URL：SPの`ACS  URL`
![クライアント作⑤.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/cbc9f28b-c7a7-27b0-68da-ab190df95398.png)

## User追加
`wordpress`のRealmに適当なユーザーを追加する。
![ユーザー登録.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/2c18383a-3eef-e165-08a7-722c8b1fd3dc.png)

## Mapper追加
作成したClientに対してMapperを追加する。

`Client details`　→　`Client Scopes`　→　`Dedicated scopes`と選択を選択して、Mapperの追加画面を開く。
![マッパー追加①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/496125e7-d444-4363-e027-e63ac04f6ea3.png)

`Add predefined maper`を選択して、`X500 givenName`, `X500 surname`, `X500 email`の3つを追加する。
![マッパー追加②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/69e16500-a08d-3c3f-56c7-af2059898521.png)

正しく追加される以下のように表示される。
![マッパー追加③.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/6d558729-d309-ad6b-bf55-084ef92c1f5d.png)

## SP設定用の設定ファイル取得
Idpの情報をSPに連携するため、`Realm settings` →　`General`を開き、`SAML 2.0 Identity Provider Metadata(EndpointsのURL)`を取得する。
![設定ファイルダウンロード①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/398c80a9-07e6-706e-8f29-d25f3507b8b8.png)

# WordPress側の設定(SP)
SP側のSSOを設定していきます。

## 設定のアップロード
Wordpressのメニューから`miniOrange SAML 2.0 SSO`を選択し、`Keycloak`のアイコンを押下する。
![SP設定①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/04032bab-fa6f-33a5-3310-f2f4e93a2085.png)

`Enter metadata URL`にIdpのMetadataのURLを入力し、`Fetch Metadata`ボタンを押下する。
![SP設定②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/ba6ac5ef-1c08-668c-e7d4-a941788a8d0a.png)

正常にIdPの情報が適用されると以下のように表示される。
![SP設定③.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/5b67466f-b393-7fea-d158-e71c9af02725.png)


## 属性のマッピング
こちらに関して、今回個別に設定をする必要はありませんが、無料版のプラグインでは、Wordpress ユーザーの Email および Username 属性に対して NameID のみがサポートされており、ユーザーが SSO を実行すると、IDP から送信された NameID 値が、WordPress ユーザーの電子メールとユーザー名にマッピングされます。
![属性マッピング①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/df25aeaf-3f1f-4c73-db0d-1202b8fbb642.png)


## ロールマッピング
無料版のプラグインでは、管理者以外のすべてのユーザーが SSO を実行するときに割り当てられるデフォルトの役割を選択できます。
`Attribute/Role Mapping`タブに移動し、`Role Mapping`セクションに移動します。
Default Roleを選択し、`Update` ボタンを押下する。
![ロールマッピング①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/0d55e9ae-bba8-360c-0431-aac7a623d5c3.png)

## SSO設定
`Redirection & SSO Links`タブを押下し、Option 1の`Add a Single Sign-On button on the WordPress login page`を有効ことでシングル サインオン ボタンを有効化できる。
![SSO.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/d5d55e8b-9f7e-b4c2-a1b6-6e29769274f8.png)


# 動作確認
ここまですべての設定が完了したのち、WordpressのAdminページへアクセスすると「Login with Keycloak」ボタンが表示されており、SSOの設定が有効になっていることが確認できる。
![動作検証①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/23741bc7-f5c2-b189-85cf-ee7b8f367ae6.png)

Wordpressのログイン画面で「Login with Keycloak」ボタンを押下すると以下のようにKeycloakのログイン画面へリダイレクトされる。こちらに事前にKeycloakに登録しておいたUserでログインする。
![動作検証②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/08a61020-8bd4-d222-a51e-a44ccd79f7ff.png)

ログインに成功すると再度リダイレクトが発生し、WordpressのAdmin画面が表示され、KeycloakでSSOできることが確認できる。
![動作検証③.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/e5507f84-e6cd-55e1-2fbf-d86e79c81acf.png)

また、Wordpressのメニューから`profile`を選択すると、Keycloakに登録したUserがWordpressにも表示されていることが確認できる。
![動作検証④.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333320/ec07e197-8919-5a9f-7d86-a5c68a40b63d.png)

# 最後に
今回KeycloakのSAMLによるSSO認証を検証しました。利用するSPによっては各々違った設定が発生すると思いますが、Keycloak側の設定自体は難しい要素はなく、無事SSOすることができました。


# 参考資料
- https://www.keycloak.org/docs/latest/server_admin/#_saml
- https://wordpress.org/
- https://ja.wordpress.org/plugins/miniorange-saml-20-single-sign-on/
- https://aws.amazon.com/jp/lightsail/