Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

OpenID Connect体験

More than 3 years have passed since last update.

OpenID Connectを学習するために、実際にYahoo! ID連携サービスでOpenID Connectを体験してみました。

前置き

体験してみた理由

OpenID Connectを利用したID連携アプリケーションを作って見ようと思ったのですが、知識も無く、仕様も難しく、どこから手をつけて良いのかわかりませんでした。そこで、実際にOpenID Connectのフローを一つ一つ手で追ってみて、理解を深めようと考えました。その手順を記事にします。

OpenID Connectとはなにか

OpenID Connectは、OAuth2.0というアクセストークンを利用したセキュアなサービスの利用ができる認可の仕組みの上で認証が出来るようにしたものです。以下にOpenID Connectを勉強する上で、参考にしたサイトを記載します。

OpenID Connect 入門

前準備

事前に必要なコト

Yahoo! JAPANへのアプリケーションの登録が必要です。Yahoo! JAPANにアプリケーションを登録するとアプリケーションID(以下client_idとします)とシークレット(以下client_secretとします)が手に入ります。また、アプリケーションを登録するためには、Yahoo! JAPAN IDが必要です。持っていない場合は作る必要があります。以下の設定でアプリケーションを登録しました。

設定項目 設定値
アプリケーションの種類 サーバーサイド
コールバックURL http://example.com

参考URL

Yahoo! JAPAN IDの登録ページ

アプリケーションIDの登録ページ

事前に必要なモノ

  • ブラウザ
  • 下記のコマンドが実行できるコマンドラインインターフェース
    • tr
    • curl
    • openssl
    • base64
    • date

実行環境

  • ブラウザ
    • Google Chrome バージョン 45.0.2454.85 m
  • OS
    • Ubuntu 14.04 64bit

実際にOpenID Connectしてみる

STEP1 Authorization codeの取得

このステップではID連携したいアプリケーションがYahoo! JAPANからAuthorization codeを取得する流れを確認しました。このステップでは、Yahoo! JAPANへのログインとID連携の同意が必要であるためブラウザを利用します。以下のURLをブラウザで開きます。

https://auth.login.yahoo.co.jp/yconnect/v1/authorization?
response_type=code+id_token
&client_id={client_id}
&redirect_uri=http://example.com
&state=xyz
&scope=openid+profile
&nonce=ef3a091928d5491624c0ac54d697124422705092
パラメータ 必須 説明
response_type 「code」と「id_token」を指定します
client_id 事前に準備したclient_idの値を入れます
redirect_uri アプリケーションIDを登録した時に、コールバックURLに入力したURLを指定します。今回は「http://example.com」を指定します
state CSRF対策のランダム文字列を指定します
scope OpenID Connectのリクエストを送る場合は、scopeに必ず「openid」の値を入れる必要があります
「openid」の値以外に、取得したい属性情報をscopeで指定します
・「openid」のみをscopeに指定すると、ユーザー識別子のみ取得できます
・「profile」をscopeに指定すると、姓名・生年・性別が取得できます
・「email」をscopeに指定すると、メールアドレスと確認済みフラグを取得できます
・「address」をscopeに指定すると、ユーザー登録住所情報が取得できます
nonce id_tokenを取得する際は必須 リプレイアタック対策のパラメーターです。リクエストごとにランダムな文字列を指定します
display ユーザーのUIをpage(PC用UI)、touch(スマートフォン用UI)、wap(フィーチャーフォン用UI)、inapp(ネイティブアプリ用UI)~選択できます。デフォルト値はpageです
bail Yahoo! JAPANが独自に用意したパラメータです。bail=1 を指定すると同意画面で「同意しない」ボタンをクリックした際にcodeパラメーターを付加せずにredirect_uriへリダイレクトさせます。指定しない場合はYahoo!トップへ遷移します

成功するとログイン/同意画面が表示されます。

  • Yahoo! JAPANにログインしていない場合はログインしてください
    • すでにログインしている場合は省略されます
  • 同意画面では「同意してはじめる」を選択してください
    • 一度同意すると、次回以降同意画面は省略されます

ログイン/同意が完了する(もしくは事前にログイン、同意している)と、以下のようなURLで「http://example.com」にリダイレクトされます。

http://example.com/?code=kaeasavt&state=xyz
  • code=kaeasavtの部分がAuthorization Codeです
    • このcodeの値を保存します
  • state=xyzはAuthorization Requestの時に設定したパラメータの値です。リクエスト時の値「xyz」と一致していることを確認します
    • 本来は、リクエスト時にstateの値をセッションに保存し、レスポンスのstateの値を比較します。一致しなければ処理を中断します

STEP2 Access Token、ID Tokenの取得

このステップではID連携したいアプリケーションが、Step1で取得したcodeをyahoo! JAPANに渡して、Access TokenとID Tokenを取得する流れを確認しました。

Tokenを取得する際は、HTTPリクエストのヘッダーやデータにTokenリクエストに必要な値を指定する必要があるため、コマンドラインインターフェースでcurlコマンドを利用しました。

以下のコマンドを実行して、Tokenを取得します。

curl -H 'Authorization: Basic {basicAuth}' -d \
"grant_type=authorization_code&code={code}&redirect_uri=http://example.com" \
https://auth.login.yahoo.co.jp/yconnect/v1/token
パラメータ 必須 説明
grant_type authorization_code という固定文字列を指定します
code 認可コードを指定します
一度リクエストした認可コードは使用できなくなります
redirect_uri STEP1で送ったリクエストのredirect_uriで指定したURLを入力します

{code}にはSTEP1で取得したcodeの値を入れます。

{basicAuth}には、client_idとclient_secretを「:」(コロン)でつなぎ、Base64でエンコードした値を入れます。

以下のコマンドで{basicAuth}に入れる値を作ります。

echo -n "{client_id}:{client_secret}" | base64

{client_id}と{client_secret}は事前に用意したclient_idとclient_secretの値を入れます。

成功すると以下のようなレスポンスが表示されます。

{
"access_token":"gCDvPtVgo..z2kTSWEnQs_.YzGtTdmMBWNLGJD0JE3El4v68N3a0EVhbdhmUqoqZsQ0H8samPleQPiFg6PPuFRjWipUpZGq0566RcWrUdsWNPUBCO9AL5tgb6mLS5gzArQvbkPEwSRJFJgAX1SlX1dlu.6mlEEWs5kQiZlZ1SnuTYarkn5o47nC_Kqip6aF7DFBz.alcj4dVaOc9OMPrZw1ioTIzKpNka2UnulvVDhL7KVm00nKcbxUKhoLPl_E4JDGe2ttEg.RStTfQer5oHpR5RSf_5BCpPSampleZx9MYntNVXRHBCczChWJKa3Kck1HlnN3CI9uhdwcD1xx6R5kgi4EMttDoSguU4LxtXiqC24_fAQuHdtz1D9IAf6eeE4xHF_1AfJDkzbyDLWvWVUAbNpiErvKFPM8O8efd9bb74.8WMe49cdK5AaUSEdZg7Hu5H6V5C.KBMs768i.Piv98iXQl0G8vXKmS4rZwrcADVYocokB9VFzlRZruwJFXtWpyW5gvS3.5lSshiN4SampleTT5qsMlrKsSETIj.KNnuPQEDUPWIVpHjLTr1hudsaMPleK8M1atMOGAKr65RdZbd7ItwshOEA--",
"token_type":"bearer",
"expires_in":"3600",
"refresh_token":"AIHv2FUi6ygUPgm0dPSaMPleDztwSX_xd0XZ9ZSiYdWWo5Lcvic-",
"id_token":"eyJ0eXAiOiJKV1QiLSampleiOiJIUzI1NiJ9.eyJpc3MiOiJodHRwxzpcL1wvYXV0aC3sb2dSampleWhvby5jby5qCCIsInVzZXJfaWQiOiJTT09HSUgzV1lCNUpDWFpFSUtUWUdLSFk0USIsImF1ZCI6ImRqMHphaSample5UVNrbE9aMkZWU21wWVJYWnpQV052Ym5OMWJXVnljMlZqY21WMEpuZzlPRGMtIiwiaWF0IjoxNDQSampleDk5LCJleHAiOjE0NDQwMjU5NjUsIm5vbmLlIjhiZWYzYTA5MTkyOGQ1NDkxNjI0YzBjYzU0FDY5NzEyNDQyMjcwNTA3MiJ9.24VcO1TsAmplEqcFK9bOR3tzaoQjDQSY_ufGfMHI1sQ"
}

STEP3 IDトークンの正当性の検証手順

このステップでは、ID連携したいアプリケーションが受け取ったIDトークンが改ざんされていないかどうかを検証する流れを確認しました。

IDトークンの内容を検証する

STEP2で取得したid_tokenは以下のようにピリオド(.)で区切られた3つ文字列により構成されています。

id_token: "{ヘッダー部}.{ペイロード部}.{シグネチャー部}"

{ヘッダー部}を以下のコマンドでbase64 デコードすると、内容を確認することが出来ます。

echo "{ヘッダー部}" | base64 -d

出力結果

{
"typ":"JWT",
"alg":"HS256"
}

JWTであることと、HS256は署名生成アルゴリズムとしてHMAC-SHA256を利用していることがわかります。

{ペイロード部}も同様に、base64デコードし、内容を確認します。

{
"iss":"https:¥/¥/auth.login.yahoo.co.jp",
"user_id":"TAHOGSH35SAMPLEZE4PNLMKHE0Q",
"aud":"dj0zaiZpPW9QSklOZ2FVSampleZzPWNvbnN1bWVyc2VjcmV0Jng9ODc-",
"iat":1441606899,
"exp":1444025965,
"nonce":"ef3a091928d5491624c0ac54d697124422705092"
}
パラメータ 内容 検証方法
iss IDトークンの発行元 https://auth.login.yahoo.co.jpと一致すること確認
また、ペイロードの内容はjson形式であり、スラッシュ(/)はバックスラッシュ(\)でエスケープされます
user_id ユーザー識別子 他の検証が全てとおることにより、このIDが正しい物だと検証できます
aud IDトークンの発行対象のアプリケーションID 発行時のアプリケーションID(client_id)と一致することを確認
iat IDトークンの発行時刻のUNIXタイムスタンプ 「(現在時刻のタイムスタンプ値)-(600秒)」以上であることを確認
exp IDトークンの有効期限の時刻のUNIXタイムスタンプ 現在時刻のタイムスタンプ値より大きいことを確認
nonce Authorizationリクエスト時に送信した値 リクエストした時のnonceの値と一致することを確認

現在時刻のタイムスタンプ値は以下のコマンドで確認します。

date +%s

署名を検証する

YConnectではJWTの署名生成アルゴリズムとしてHMAC-SHA256が利用されています。そのため、検証の手順もHMAC-SHA256に基づいた検証をする必要があります。

以下のコマンドを実行し、上記の{ヘッダー部}と{ペイロード部}をピリオド(.)で繋ぎ、client_secretを使ってHMAC-SHA256でハッシュ化します。

echo -n "{ヘッダー部}.{ペイロード部}" | openssl dgst -binary -sha256 -hmac "{client_secret}" > hs256_sign.txt
  • ハッシュ化するときはバイナリ表現で出力します

ハッシュ化した結果をurl safe base64エンコードします。

base64 hs256_sign.txt | tr -d '¥n' | tr -d '=' | tr '/+' '_-'

出力された結果と{シグネチャー部}が一致することを確認

STEP4 属性情報の取得

このステップではID連携したいアプリケーションが認証したユーザの属性情報(名前、メールアドレス、住所等)をAccess Tokenを使って取得する流れを確認しました。

UserInfoAPIにAccess Tokenを渡すと、属性情報を得ることができます。

コマンドラインインターフェースで以下のコマンドを実行します。

curl -H 'Authorization: Bearer {access_token}' https://userinfo.yahooapis.jp/yconnect/v1/attribute?schema=openid

{access_token}に、STEP2で取得したAccess Tokenの値を入れます。

成功すると以下のようなレスポンスが表示されます。

{
"user_id":"TAHOGSH35SAMPLEZE4PNLMKHE0Q",
"name":"山田太郎",
"given_name":"太郎",
"given_name#ja-Kana-JP":"タロウ",
"given_name#ja-Hani-JP":"太郎",
"family_name":"山田",
"family_name#ja-Kana-JP":"ヤマダ",
"family_name#ja-Hani-JP":"山田",
"gender":"male",
"birthday":"1989",
"locale":"ja-JP"
}

STEP1でscopeに指定した値で、返却される属性情報が変わります。

まとめ

はまったこと

  • STEP3の署名を検証する時にけっこうはまってしまいました。はまってしまった原因は、HMAC-SHA256でハッシュ化するときにHex文字列で出力した値をbase64でエンコードしていたため、シグネチャーの値と一致しませんでした。正しくはバイナリ形式で出力した値をbase64でエンコードします

感想

  • 最初は仕様を読んで理解しようとしましたが、実際に手でフローを追ってみると、理解が深まりました
  • 今回試した部分を実装するだけでID連携が可能となるので、自分でパスワード管理するよりもコストが少なく済むことを実感しました
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away