OpenID Connectを使ってWebサイト(Apache)にログイン画面を追加するという事なのですが、思いのほか手順としてまとまった記事が無かったため、まとめておこうと。
OpenID Connect(OIDC)とは、とかの説明は読んでて頭痛くなる話でありますので割愛。動けば正義。
本記事ではOIDCプロバイダーを作り、ログイン画面としてそれを使うようにApacheを構成し、エンドユーザーがWebサイトで自身のユーザーIDをサインアップ、ログインするまでを手順を追って説明します。
OIDCプロバイダーとしてはIBM CloudのApp IDで説明しますが、いわゆるOIDCプロバイダーなら何でも似たようなことが出来るはず。
IBM CloudのApp IDサービスを作る
1.IBM Cloudのカタログで「App ID」で検索し、サービスを作る。
ライトプランを使用。1000回ログイン、1000ユーザーまではタダ。
https://cloud.ibm.com/catalog
2.サービスが出来たら、その管理画面で「認証の管理」を開く。IDプロバイダーとして「クラウド・ディレクトリー」以外は無効にする。
3.同じ画面の「認証設定」タブを開き、WebリダイレクトURLを追加する。後に構成するWebサーバーのアドレスと、リダイレクト確認用に使われるページを指定する。
例では「http://www.example.com/redirect_uri
」。
なおこのURLは、ページが実在する必要はない。
4.「サービス資格情報」を開き、資格情報を追加する。
「リーダー」で結構。
5.作られた資格情報の内容を確認する。
以下情報の内、"clientId"、"discoveryEndpoint"、"secret"は後のApacheの構成で使用する。
Webサーバーを作る
1.仮想サーバーを作る。
Webサーバーはインターネットからアクセス出来れば何でもいいのだが、Amazon Lightsailを使うか。$3.5でOSがCentOS 7の仮想サーバーを一台作る。
https://aws.amazon.com/jp/lightsail-vps/
一応サーバーのFQDNは先に設定したリダイレクトURLに合わせたもの(www.example.com
)をRoute 53に登録する。ここの手順は割愛。
2.Apacheをインストールする。
Webサーバーにsshでログインし、Apache httpdとmod_auth_openidc、あと便利のためphpをインストールする。
$ sudo -i
# yum install -y httpd
# yum install -y mod_auth_openidc
# yum install -y php
3.ApacheにOpenID Connectの設定を追加する。
とりあえずWebサイト全体(/)を認証必要な様に設定する。
以下のファイルを作成する。
「OIDCProviderMetadataURL」は先の"discoveryEndpoint"、「OIDCClientID」は"clientId"、「OIDCClientSecret」は"secret"である。
「OIDCRedirectURI」は先に設定したリダイレクトURL、「OIDCCryptoPassphrase」は適当な文字列を指定する。
OIDCProviderMetadataURL https://jp-tok.appid.cloud.ibm.com/oauth/v4/36c8a54c-b690-4279-a5d3-7ddd64dd73fb/.well-known/openid-configuration
OIDCClientID 2edc690f-6876-4cf2-aad9-64629869d533
OIDCClientSecret YWYwOTg3MDUtZjhiNS00ZjMyLTgzOTgtN2NjNDdlZWYyMjhh
OIDCRedirectURI http://www.example.com/redirect_uri
OIDCCryptoPassphrase xxxxxxxx
<Location />
AuthType openid-connect
Require valid-user
</Location>
4.index.htmlを作る。
<!DOCTYPE html>
ログイン成功!
5.Apacheを起動する。
# systemctl enable httpd
# systemctl start httpd
エンドユーザーとしてWebサーバーにログインする
Webサーバーが起動したら、エンドユーザーとして「ログインアカウントのサインアップ」、「サインアップ確認用電子メールの確認」、「ログイン」までを試してみる。
ユーザーアカウントは電子メールアドレスを使うため、何だったらgmailにテスト用のメアドを作っておく。
1.Webサーバーにアクセスする。
Webブラウザを利用し、作ったWebサーバーのFQDN(ここでは「http://www.example.com/
」)にアクセスする。
以下の様な画面が表示されただろうか。Webサーバーにログイン画面が追加されている。
2.Webサイトにサインアップする。
先のログイン画面の下、「Sign up!」をクリックすると表示される以下の画面で、電子メールアドレスとパスワードを入力し、「Sign up」をクリックする。
3.サインアップ確認用の電子メールを確認する。
以下の画面が表示されたら、登録したメアドのメールボックスを確認し、サインアップ確認用の電子メールが届いているのを確認し、メール中の「Veryfy」をクリックする。
4.確認が終わったら、再度Webサーバー(http://www.example.com
)にアクセスする。
やはりログイン画面が表示されるので、サインアップした電子メールアドレス、パスワードでログインする。
5.ログイン成功を確認する。
先に作成したindex.htmlのページが表示されただろうか。
(ついで)Webサーバーから見える環境変数
ついでだが、OIDCログインされた状態でWebサーバーにアクセスする際、Webサーバー側ではどのような情報が見えるのかを確認したい。先ほど導入して使っていないphpをここで使う。
1.phpinfoを表示するページを作る。
<?php
phpinfo();
?>
2.Webブラウザで「www.example.com/cgi-bin/phpinfo.php
」にアクセスする。
特に、Apache Environmentで表示される内容が重要である。
OIDC_access_tokenの値が、いわゆるJWTというもので、今回は設定していないが、デコードすればユーザーに付与されたロールや属性などの情報が手に入り、Webアプリ側でのアクセス制御等に利用する事が出来る。
(ついで2)ユーザー管理
OIDCプロバイダーを使う大きな意義は、ユーザーIDの保管や、サインアップ、パスワードリセット等の機能をWebサーバーの作りからほとんど分離して移管できるところにある。とはいえ誰が登録しているのかは知りたいので、App IDの画面から登録ユーザーの一覧を確認することが出来る。
IBM CloudのApp ID画面を開き、「認証の管理」>「クラウド・ディレクトリー」>「ユーザー」を開けば、登録されているユーザーの一覧を確認することが出来る。
ちなみに、ここから予めユーザーを作っておくという事も出来る。
個別のユーザー登録情報を開けば、そのユーザーに設定されている役割や、カスタム属性等を表示、編集できる。
そういや、Keycloakでは出来る、管理者によるユーザーのパスワードリセットはApp IDでは出来ないんだな。。パスワードリセットはユーザー自身で行えば良いというのは、セキュリティ的に正しいとは思うが。API使えば出来たりするのか。
(次回)サインアップしたユーザーアカウントを使ってREST-APIにログイン認証機能を付加する。
https://qiita.com/rk05231977/items/0b77d23d1f44cf9ad6ae