ReactでOpenID Connectを実装する～その５

これまでは認証プロバイダとしてAuth0を使っていましたが、やっぱりユーザIDやパスワードなどのユーザ情報は自前で管理したくなるものです。

ですので今回は認証プロバイダとしてAuth0を使う代わりに、自分自身で独自の認証プロバイダを立ち上げます。これで外部サービスに頼らずともログイン認証を実装できます。

～目次～

処理フロー

プログラム実装を始める前に、画面の流れとそれに関連する通信フローを簡単に説明します。この処理イメージが頭にあると、プログラム実装がより理解しやすいかと思います。

処理Ａ～Ｂ）初期画面・サインイン画面表示

まずhttp://localhost:3000/にアクセスします。認証利用アプリ(localhost:3000)は初期画面を表示します。

 

ログインボタンを押下すると、ブラウザは認証プロバイダ(localhost:3001)にリクエストを送信します。認証プロバイダはサインイン画面(ユーザID・パスワードを入力する画面)を表示します。

 

ここまでの通信フローをまとめると、以下のようになります。

ログインボタンが押下されたとき、認証プロバイダはすぐにサインイン画面を応答するのではなく、まずuidと呼ばれる一意キーを発行して、uidつきのリクエストをリダイレクトする処理を間に挟む点に留意です。

 

処理Ｃ）認可確認画面表示

正しいユーザIDとパスワードを入力してSign-inボタンを押下すると、ブラウザは認証プロバイダ(localhost:3001)にリクエストを送信します。認証プロバイダはユーザIDとパスワードをチェックして、問題なければ認可確認画面(Authorize画面)を表示します。

この処理の通信フローをまとめると、以下のようになります。

認証プロバイダはユーザIDとパスワードが正しいことをチェックしたら、すぐに認可画面を応答するのではなく、新たなuidを発行して、uidつきのリクエストをリダイレクトする処理を間に挟みます。

 

処理Ｄ）ログイン後画面の表示

Continueボタンを押下すると、ブラウザは認証プロバイダ(localhost:3001)にリクエストを送信します。認証プロバイダは認証利用アプリ(localhost:3000)にリダイレクトし、ログイン後の画面を表示します。

この処理の通信フローをまとめると、以下のようになります。

認証プロバイダはすでにユーザID・パスワードのチェックが終わったユーザであることが確認できたら「認可コード」を発行して、認証利用アプリにリダイレクトします。

認証利用アプリは、いったんダミー画面を表示するのですが、ダミー画面内のJavaScript処理で認可コードを付与したリクエストを認証プロバイダに対して行い、アクセストークンとIDトークンをJSON形式で受領します。

続けて認証プロバイダに再度リクエストを行い、ユーザプロファイル情報をJSON形式で受領します。

 

以上が今回実装するエンドユーザ－認証利用アプリ－認証プロバイダの処理フローとなります。では次回は認証プロバイダを実際に作成していきます。

 

ReactでOpenID Connectを実装する～その６　自前認証プロバイダを立ち上げてみる（認証プロバイダ編）