やる夫で学ぶOAuth 〜やる夫がユニクロの行列に並んだようです〜

今日もTwitterを見ているやる夫ですが・・・

      / ̄ ̄ ̄\    おや?ツイッターの様子が・・・
    / ─    ─ \   ________
   /   (●)  (●) \. .| |          |
   |     (__人__)   | .| |          |
   \     ` ⌒´   / | |          |
   /              \ | |          |



       ______ 
     /:υ::─ニjjニ─ヾ 
   /:::li|.:( ○)三 (○)\         /RT ユニクロ行列で個人情報流出してやんのww情弱ざまあwww
  (:::||!.:υ::::: (__人__)):::: i| ____   ̄// ̄ ̄
    ):::::::::::::   |r┬-| li::::/  | |     
  /:::::::::::::::   `ー ' ::::::ヽ  | |   

※注:こういう騒ぎがありました。
 http://uinyan.com/uniqlo_line_vulnerability/



     |┃三        / ̄\
     |┃         |     |
     |┃          \_/
 ガラッ. |┃            |
     |┃  ノ//   ./ ̄ ̄ ̄ \
     |┃三    /  ::\:::/:::: \
     |┃     /  <●>::::::<●>  \
     |┃     |    (__人__)     |
     |┃三   \    ` ⌒´    /
     |┃三   / ̄ ̄ ̄ ̄ ̄ ̄ ̄ \




                   γ ⌒⌒ヽ
   / ̄ ̄\           ( ( ヽ ) ノ
 /_ノ     \     (⌒) 三  ノ 从 ゝ
 ( ●)( ●)  ヽ   三/ | ニ  ____     (⌒)    これはどういうことだお!!
. | (__人__) u  }   |  |   /\   / ) し / |  ミ   お前に紹介されたサービスに登録したら
  | ` ⌒´    ノ   !   、 /(○ )::(○ )⌒\/ | ミ     個人情報が漏れたお!!責任とるお!!
.  |         }    \./:::::::(_人_)::::::::  i'   |
.  ヽ        }      |     )ww)     |  |
   ヽ     ノ   ヘ   \    `ー"      ノ
   /    く 、_/っ/      \ .    .   \
   |     \--一''           \



        ノ L____
       ⌒ \ / \
      / (○) (○)\
     /    (__人__)   \
      |       |::::::|     |     ゆるせないお!!
     \       l;;;;;;l    /l!| !    ユニクロは酷いんだお!!
     /     `ー'    \ |i
   /          ヽ !l ヽi
   (   丶- 、       しE |そ  ドンッ!!
    `ー、_ノ       �堯�l、E ノ <
               レY^V^ヽl




   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)     まあ落ち着け・・・
  |     ` ⌒´ノ
.  |         }  ミ        ピコッ
.  ヽ        } ミ  /\  ,☆____
   ヽ     ノ    \  \ /     \
   /    く  \.  /\/ ─    ─ \
   |     `ー一⌒)  /   (●)  (●)  \
    |    i´ ̄ ̄ ̄ \ |      (__人__)     |
               \_   ` ⌒´    /
                /          \ 




     / ̄ ̄\
   /   _ノ  \
   |    ( ー)(ー)
.   |     (__人__)   確かにユニクロのサービスはセキュリティ的に
    |     ` ⌒´ノ   好ましくない作りになっていた
   .l^l^ln      }
.   ヽ   L     }    だがそれで即、個人情報の流出があった事にはならない
    ゝ  ノ   ノ 
   /  /    \
  /  /       \
. /  /      |ヽ、二⌒)、
 ヽ__ノ




     ____    ━┓
   /      \   ┏┛
  /  \   ,_\.  ・    そうなのかお?
/    (●)゛ (●) \     Twitterでは個人情報が流出したって言ってたお
|  ∪   (__人__)    |
/     ∩ノ ⊃  /
(  \ / _ノ |  |
.\ “  /__|  |
  \ /___ /




        / ̄ ̄\
      /   _ノ  \  Twitterで流れる情報にはデマも混じっている
      |    ( ●)(●)
     . |     (__人__) 今回の場合は、
       |     ` ⌒´ノ 収拾されたパスワードがサービス元から
     .l^l^ln        } さらに漏れなければ大丈夫だろう
     .ヽ   L       }
       ゝ  ノ    ノ  それにOAuthが使われるようになる前はパスワードを
     /   /     \ そのまま収拾するなんて普通だった
    /   /        \
  . /    /        -一'''''''ー-、.
  人__ノ       (⌒_(⌒)⌒)⌒))



       ____
     /⌒  ⌒\
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \   OAuth?それはなんだお?
  |     |r┬-|     |  なんて読むんだお?
  \      `ー'´     /




   / ̄ ̄\
 /   _ノ  \    OAuthは、オーオースと読む
 |    ( ●)(●)
. |     (__人__)   簡単に言えば、Twitterと連携するサービスに
  |     ` ⌒´ノ   Twitterのパスワードを渡さなくてもよくなる仕組みだな
.  |         }   
.  ヽ        }   これを使えば、運営側に悪意も持った人間が居ても
   ヽ     ノ    勝手にやる夫のプロフィールやパスワードを変えたり出来なくなる
   /    く  \
   |     \   \ 
    |    |ヽ、二⌒)、




        / ̄ ̄\ 
      / ∪    \      ____
      |::::::        |   /      \  
     . |:::::::::::  ∪  |  / ⌒   ⌒  \   そんなの出来るわけないお
       |::::::::::::::    |/  (●) (●)   \ やる夫はOAuthの画面なんて見たことないけど
     .  |::::::::::::::    } |    (__人__)     | 具体的にはどうやってるんだお?
     .  ヽ::::::::::::::    } \   ` ⌒´     _/ 
        ヽ::::::::::  ノ   |           \
        /:::::::::::: く    | |         |  |
-―――――|:::::::::::::::: \-―┴┴―――――┴┴――  
         |:::::::::::::::|ヽ、二⌒)




     / ̄ ̄\
   /   _ノ  \  ( ;;;;( そうだな・・・
   |    ( ─)(─  ) ;;;;) 
   |      (__人__) /;;/ では、分かりやすいように
.   |        ノ l;;,´  Twitter役に登場してもらおう
    |     ∩ ノ)━・'
  /    / _ノ´     ちなみに、俺が連携サービス・・・
  (.  \ / ./   │   つまり togetter や twilog なんかだと思ってくれ 
  \  “ /___|  |
.    \/ ___ /



    _  __ ___
    ヾ,ゝ '⌒ヾ'/
      ! ((人从リ〉    <  私がTwitter役の、ついったんよ!
    弋 !|゚ ヮ゚ノ!      |  サーバールームからわざわざ来てやったんだから
       リr介 リ       |  感謝しなさい!
   〔三二フ__,ゝ=='ニ!
.       じ'フ

 ついったん(http://twitter.com/twittan)



まず、連携サービスにTwitter連携したサービスを使いたいことを伝える
大抵はログインのリンクをクリックすることが、それに当たるだろうな
    __
   /   \
 /   _ノ  \
 |    ( ●)(●)         キリッ ____
. |     (__人__)           /\   / \   サービス使いたいお!
  |     ` ⌒´ノ          /(ー)  (ー) \  でもパスワードを渡す気はないお!!
.  |         }         / ⌒(__人__)⌒   \
.  ヽ        }     \     |    |r┬-|      |
   ヽ     ノ       \  \   `ー'´     _/
   /    く. \         \  ノ          \
   |     \  \    (⌒二                |
    |    |ヽ、二⌒)、        \        |  |
 連携サービス             ユーザー




そうしたら連携サービスは、Twitterにそれを伝える

                       / ̄ ̄\ ( ;;;;(  やる夫がサービス使いたいって
                      / ._ノ  ヽ、\) ;;;;)  言ってたぞ
    _  __わかったわ!     |  (●)(●)/;;/
    ヾ,ゝ '⌒ヾ'/          |  (__人__)l;;,´|
      ! ((人从リ〉          | ./´ニト━・' .l
    弋 !|゚ ヮ゚ノ!           | .l _ニソ    }
       リr介 リ            /ヽ、_ノ    /
   〔三二フ__,ゝ=='ニ!      __/  /    ノ__
.       じ'フ          / /  /       `ヽ.
                   /´  ./       ,.  ヽ.
     Twitter          ト、_,/.       |、  ヽ
                    |         |/  /
                     連携サービス



     ____ 
   /      \
  /  ─    ─\     ちょっと待つお
/    (●)  (●) \   やる夫がそのまま、ついったんに伝えちゃ駄目なのかお?
|       (__人__)    |
/     ∩ノ ⊃  /
(  \ / _ノ |  |     やる夫もついったんとお喋りしたいお
.\ “  /__|  |  
  \ /___ /




   / ̄ ̄\
 /   _ノ  \      OAuth認証は各連携サービスごとに管理をするから、
 |    ( ●)(●)     俺(連携サービス)を通さなきゃだめだ
. |     (__人__)     
  |     ` ⌒´ノ     それにさっきは簡単に言ったが
.  |         }      実際やってる通信は複雑だぞ
.  ヽ        }       見てみるか?
   ヽ     ノ  
   /    く  \        \
   |     \   \         \
    |    |ヽ、二⌒)、          \




秘    oauth_token       シグネチャ            リクエストトークンURL
密    ハッシュ関数                  POST        ハッキング対策
鍵               情報セキュリティ
      コンシューマ                署      OAuthバージョン
                               名           Nonce
 PDCAサイクル       BASE64 
           トークン秘密鍵     / ̄ ̄ ̄\ 
  ユーザ   OAuth Core 1.0     ./ ─    ─ \        情報漏洩
                      /  <○>  <○>  \  
サービスプロバイダ  RSA-SHA1 |    (__人__)    |  RFC3447
   タイムスタンプ           \    ` ⌒´   /
      エンコーディング      /             \    アクセストークン



       ____
     /ノ   ヽ、_\
   /( ○)}liil{(○)\    な、なんだお この呪文は!?
  /    (__人__)   \   意味がわからないお!
  |   ヽ |!!il|!|!l| /   |
  \    |ェェェェ|     /



    _  __ ___
    ヾ,ゝ '⌒ヾ'/     |  安心しなさい!
      ! ((人从リ〉    <  その辺のめんどくさいことは、利用者は一切考えなくていいわ!
    弋 !|゚ ヮ゚ノ!      | 
       リr介 リ       |  利用者は許可を出すかどうかを選ぶだけでいいの
   〔三二フ__,ゝ=='ニ!    便利な仕組みを作った私に感謝することね! 
.       じ'フ



          ___
       /      \ 
      /ノ  \   u. \   よ、よかったお
    / (●)  (●)    \
    |   (__人__)    u.   |  でも、なんでこんな複雑なんだお!
     \ u.` ⌒´      /
    ノ           \
  /´               ヽ
 |    l              \
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 




     / ̄ ̄\
   /   _ノ  \    まあ、詳しい説明は割愛するが
   |    ( ー)(ー)   ・間違いなく送信者から送られたこと
.   |     (__人__)   ・途中でデータが改ざんされていないこと
    |     ` ⌒´ノ   などを保証するためだな
   .l^l^ln      }
.   ヽ   L     }    これも利用者は、深く考えなくてもいいところだ
    ゝ  ノ   ノ
   /  /    \
  /  /       \
. /  /      |ヽ、二⌒)、
 ヽ__ノ



    _  __ ___
    ヾ,ゝ '⌒ヾ'/     |  話を戻すわ!
      ! ((人从リ〉    <  やらない夫(連携サービス)から連絡を受けたら、私はやる夫に
    弋 !|゚ ヮ゚ノ!      |  「やらない夫が、やる夫のアカウントを使ってTwitterに読み書きしてもいいか」
       リr介 リ       |  を確認しにいくの
   〔三二フ__,ゝ=='ニ!
.       じ'フ



    _  __ ___
    ヾ,ゝ '⌒ヾ'/ 
      ! ((人从リ〉 <この画面で許可を出しなさい!
    弋 !|゚ ヮ゚ノ! 
       リr介 つ 【認証画面】
   〔三二フ__,ゝ=='ニ!
.       じ'フ
     Twitter
      ___
    /      \
   / ⌒   ⌒   \    わかったお
 / ,(⌒) (⌒)、   \   許可をだすお
 | /// (__人__)///   ||  
 \   ` ヽ_ノ    /
   ヽ  , __ ,  イ 
    |        \
     利用者



      ____       
    /      \     ん? でもこれって
   / ノ     \u.\    結局パスワード入れるなら一緒じゃないかお?
 /  (●)  (●)  \  何か違うんだお?
  |    (__人__)   u.  |
 \ u .` ⌒´     /




   / ̄ ̄\
 /   _ノ  \    違う
 |    ( ー)(ー)   認証画面のURLを確認してみてくれ
. |     (__人__)
  |     ` ⌒´ノ   俺(連携サービス)ではなく、
.  |       nl^l^l  ついったん(Twitter)のURLが表示されてるだろ
.  ヽ      |   ノ  
   ヽ    ヽ く    やる夫は最初に「OAuth画面なんて見たことない」と
   /     ヽ \  言っていたが、これがOAuthの認証画面だ



    _  __ ___
    ヾ,ゝ '⌒ヾ'/     |  つまりこの画面では
      ! ((人从リ〉    <  私(Twitter)とやる夫(利用者)の間で通信が行われるから
    弋 !|゚ ヮ゚ノ!      |  パスワードはやらない夫(連携サービス)には、ばれないの!
       リr介 リ
   〔三二フ__,ゝ=='ニ!
.       じ'フ



     ____
   /      \
  /  ─    ─\     ふむふむ
/    (●)  (●) \    
|       (__人__)    |   で、やる夫(利用者)が許可を出したらどうなるんだお?
./     ∩ノ ⊃  /
(  \ / _ノ |  |
.\ “  /__|  |
  \ /___ /




私(Twitter)から、やらない夫(連携サービス)に
「許可された操作のみが行える『許可証』」が渡されるわ!

    _  __ ___        よろこびなさい!
    ヾ,ゝ '⌒ヾ'/     |  やる夫から許可をもらったから
      ! ((人从リ〉    <  その分の操作が出来る許可証を作ってあげたわ!
    弋 !|゚ ヮ゚ノ!
       リr介 つ【許可証(やる夫)】
   〔三二フ__,ゝ=='ニ!
.       じ'フ
     Twitter

   / ̄ ̄\
 /   _ノ  \ 
 |    ( ●)(●)
. |     (__人__)    うむ
  |     ` ⌒´ノ    ありがたくいただこう
.  |         }
.  ヽ        }
   ヽ     ノ   【許可証(やる夫)】
   /    く 、_/ /
   |     \--一'' 
   連携サービス




あとは俺(連携サービス)が貰った許可証を使っていろんな操作を行うわけだ
正確にはもっと細かい手順があるんだが
まあ、大まかに言えばこんなもんだ
   / ̄ ̄\
 /   _ノ  \ 
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }      ホイ、この許可証使って、
.  ヽ        }      やる夫のTwitterアカウントに「わかったお!」
   ヽ     ノ      って呟かせてやれ
   /    く 
   |     \ 
    |    |ヽ、二【許可証(やる夫)】
   連携サービス

    _  __ ___
    ヾ,ゝ '⌒ヾ'/     |  許可証を確認したわ
      ! ((人从リ〉    <  いいわよ!やる夫のTwitterアカウントに「わかったお!」
    弋 !|゚ ヮ゚ノ!      |  って呟かせてあげる
       リr介 リ
   〔三二フ__,ゝ=='ニ!
.       じ'フ
     Twitter

   ┌───┐
   │ やる. │  < 『わかったお!』
   │ 夫  │
   └───┘
  やる夫のTwitterアカウント




      / ̄ ̄ ̄\
   γ⌒)      (⌒ヽ   うーん
   / _ノ ノ    \  \ `、  なにがなんだかわからなくなってきたお
  (  < (○)  (○)   |  )
  \ ヽ (__人__)   / /



    _  __ ___
    ヾ,ゝ '⌒ヾ'/     |  まあ仕組みを知っておくことに越したことはないけれど、
      ! ((人从リ〉    <  そんなに難しく考える必要はないわ!
    弋 !|゚ ヮ゚ノ!      |  
       リr介 リ      |  大切なのは、URLがちゃんとtwitterになってる画面で
   〔三二フ__,ゝ=='ニ!    パスワードを入れるようにすることね!
.       じ'フ




     / ̄ ̄\
   /   _ノ  \  ( ;;;;( そうだな・・・
   |    ( ─)(─  ) ;;;;) 
   |      (__人__) /;;/ twitter以外のURLでパスワード入れる、ということは
.   |        ノ l;;,´  そのサイトの管理者を信頼して自分のTwitterアカウントの全て預ける
    |     ∩ ノ)━・'   ということでもある
  /    / _ノ´ 
  (.  \ / ./   │    昔は仕方なかったが、今はそうしなくても済む仕組みがあるんだから
  \  “ /___|  |     パスワードを預けるべきじゃないだろ、常識的に考えて
.    \/ ___ /



       ____
     /⌒  ー、\     わかったお!
   /( ●)  (●)\    とにかくパスワードを入れるときには 
  /::::::⌒(__人__)⌒:::::\  URLにちゃんと注意するようにするお!
  |     |r┬-/ '    |
  \      `ー'´     /



_  __ ___
ヾ,ゝ '⌒ヾ'/
  ! ((人从リ〉      やる夫で学ぶOAuth・完
 弋 !|゚ ヮ゚ノ! 
    リr介 ノシ        / ̄ ̄\
〔三二フ__,ゝ=='ニ!  /  ヽ_  .\  
    じ'フ        ( ●)( ●)  |     ____
              (__人__)      |     /      \
              l` ⌒´    |  / ─    ─  \ 
             . {         |/  (●)  ( ●)   \
               {       / |      (__人__)      |
           ,-、   ヽ     ノ、\    ` ⌒´     ,/_ 
          / ノ/ ̄/ ` ー ─ '/><  ` ー─ ' ┌、 ヽ  ヽ,
         /  L_         ̄  /           _l__( { r-、 .ト
           _,,二)     /            〔― ‐} Ll  | l) )
           >_,フ      /               }二 コ\   Li‐'
        __,,,i‐ノ     l              └―イ   ヽ |


少し前から書いてみようと思っていたのですが、先日のユニクロ行列騒ぎでTwitter認証が話題になっていたので書いてみました。

参考:

OAuth Core 1.0 仕様 日本語訳
http://labs.i-revo.jp/wiki/?xtra/OAuth1.0

Yahoo!デベロッパーネットワーク - OAuth - フロー
http://developer.yahoo.co.jp/other/oauth/flow.html

ついったんのAAはid:imac2xsss様のサイトから使わせてもらいました。
http://d.hatena.ne.jp/imac2xsss/20070519/