CIBAの認証フローを体験するためのWebアプリ(途中経過)

おはようございます、ritouです。

ちょっと前から少しずつ作ってたのやつの途中経過です。

CIBAについてはこの辺りの記事をどうぞ。

ritou.hatenablog.com

今回やりたいこと

CIBAの認証フローをデモできる環境を作りたいなーと思っていました。

Webアプリ + プッシュ通知でAuthentication Deviceっぽく振舞わせたい
最初は本当に最小限の実装
エンドポイントは開放して触れるようにしておく

ちなみに裏でAuthleteは使ってません。使ったらもっと楽にできそうですね。

Client登録

Client名を指定して Client Credentials を取得できます。

$ curl "https://oidc-ciba-demo.gigalixirapp.com/api/client" -d "name=SAMPLECLIENT"
{"client_id":"01DCCK4B1Z(masked)","client_secret":"01DCCK4B22(masked)","name":"SAMPLECLIENT"}

Authentication Deviceの設定

URL

とりあえずPC/AndroidのChromeあたりで動くWebアプリをADとして利用します。

URL : https://oidc-ciba-demo.gigalixirapp.com/

OIDCIBADEMO_URL

ログインとプッシュ通知の設定

Firebase Cloud Messaging を利用します。サポートされていない環境では動きません。

まずログインします。

Screenshot_20190603-022503

Push通知も設定します。

Screenshot_20190603-022547

これで準備完了です！

Screenshot_20190603-022612

ちなみにログアウトしたらメアドはDBから削除されてプッシュ通知も来なくなります。

Authentication Flow

Authentication Request

このリクエストが正しく処理されるとプッシュ通知が飛んでいくはずです。

$ curl -X POST "https://oidc-ciba-demo.gigalixirapp.com/api/backchannel" -H "Authorization: Basic MDFEQ0NLNE(masked)" -d "scope=openid&login_hint=ritou.06@gmail.com"
{"auth_req_id":"01DCCKYE67JK0AGD08XC9E4EQD","expires_in":3600}

OpenID Provider Obtains End-User Consent/Authorization

まずは通知が来ます。

Screenshot_20190603-023221

いわゆる同意画面です。

Screenshot_20190603-023250

完了です。

Screenshot_20190603-023307

Token Request Using CIBA Grant Type

ClientはTokenエンドポイントから各種トークンを取得できるようになりました。

$ curl -X POST "https://oidc-ciba-demo.gigalixirapp.com/api/token" -H "Authorization: Basic MDFEQ0NLNE(masked)" -d "grant_type=urn:openid:params:grant-type:ciba&auth_req_id=01DCCKYE67JK0AGD08XC9E4EQD"
{"access_token":"THISISDUMMYACCESSTOKEN","expires_in":3600,"id_token":"eyJhbGciOiJSUzI1NiIsImtpZCI6InJzMjU2XzIwMTkwNiIsInR5cCI6IkpXVCJ9.eyJhdF9oYXNoIjoiblQ1bjZicEJyZGlPWmFCcDZJcXdrUSIsImF1ZCI6IjAxRENDSzRCMVpOR0NQNEJLOTVKVFQ5WThCIiwiZW1haWwiOiJob2dlQGV4YW1wbGUuY29tIiwiZXhwIjoxNTU5NTAwNDQ2LCJpYXQiOjE1NTk0OTY4NDYsImlzcyI6Imh0dHBzOi8vb2lkYy1jaWJhLWRlbW8uZ2lnYWxpeGlyYXBwLmNvbSIsInN1YiI6ImVvZ24wV2FrOXBMQWN1WkQyYkhwRWciLCJ1cm46b3BlbmlkOnBhcmFtczpqd3Q6Y2xhaW06YXV0aF9yZXFfaWQiOiIwMURDQ0tZRTY3SkswQUdEMDhYQzlFNEVRRCIsInVybjpvcGVuaWQ6cGFyYW1zOmp3dDpjbGFpbTpydF9oYXNoIjoiRXNROFN5cjR1NWhYbUt4SjltbWlIUSJ9.pE_jdSYwkw7FK4QbBnAXXvWSFTsesTLMglAygEuyuYk5Y5HKwrxzoUEwo_d_mZB4U4V6m8mFNIZqcOrP_cdrSwIOZNgH1BkSJucyzS47SgxgfR-X3y4cmPyCAzkHuJdbMao-ev27cbX9xFtlpw5cS4uIk4pHGtKtLJnhoIowQIpd34tXGPjLxuoOo-3P9N0iYZO6RlxL20N_MucbT4NwrZCgQAQSx_QrVUZjEtsi_OtXo-QRiDXAWILSgwxSpatFcLh6ITQlNNn1U03A5aguTnZRITnbJQoqBmaPRvfIC7Y_cc7N5SCnqpHJFBN2qGfOQTquoP0Vu0FT9eGOHAc8_w","refresh_token":"THISISDUMMYREFRESHTOKEN","token_type":"Bearer"}

ID Tokenをデコードするとこんな感じです。

JWT Header and Payload