Embed Size (px)
DESCRIPTION
Citation preview
1
WebWebWebWeb技術勉強会第技術勉強会第技術勉強会第技術勉強会第11111111回回回回～～～～自作自作自作自作ブログブログブログブログ「「「「DIARYSYS4DIARYSYS4DIARYSYS4DIARYSYS4」」」」開発報告開発報告開発報告開発報告～～～～
Ryuichi TANAKAStudy:http://devel.de.c.dendai.ac.jp/study/Blog:http://blog.livedoor.jp/mapserver2007/
2
前回の内容を実践してみる
• 前回の内容を具体的に盛り込んでシステム化
DIARYSYS ver1
DIARYSYS ver2
DIARYSYS ver3
DIARYSYS ver4
3
前回の内容を実践してみる
• 自作ブログシステム「DIARYSYS4」を前回紹介
した観点で実装
– ブログはあらゆる技術やコンテンツを集約できる
– これまで培った技術を応用できる
– バージョンアップごとに機能を足す
– リファクタリングをする
– 過去のプログラムの見直し
– 必ず新しい要素を入れる
4
実装した2つの機能を紹介
• Widget管理機能– DIARYSYSのトップ画面のサイドバーに表示するウィジェットに
関する管理機能
– これまではウィジェットはサイドバー処理用の関数に直接制御ロジックを記述していたため、表示／非表示の設定が不可能
• 認証機能– 管理画面へログインするための認証機能
– これまではログインIDの入力＋SESSION。だが、ログインIDが知られてしまえば、誰でもHack可能で、しかも送信が完全に平文。
ログイン周りのロジックがあまりに稚拙。
5
Widget管理機能について
6
Widget管理機能
• 従来方法– サイドバーに表示する項目が固定
• 非表示にしたいときはソースから消去するしかない
– サイドバーに表示する順番が固定
• 順番を変えたいときはソースを修正するしかない
• 新方法– 管理画面でWidgetの設定ができるようにする
• 表示／非表示、表示順などを設定
– イメージとしては、LivedoorBlogで言うところの「プラグイン管理」
• というか、かなり参考にした
7
言語による役割分担
• PHP– 制御全般を担当。外部APIの場合は、Perlに処理を渡し、表示処理は、テンプレートやJavascriptへ処理を渡す。
• Perl– 外部WebAPIをWidget化するために利用。また、Widget設定を保存するときのDB関連の処理も担当。その他、Widgetテーブルの
初期化スクリプトとしても利用。
• Javascript– 表示処理を担当。受け取ったWidget設定から実際に表示するた
めの処理として利用。
8
機能の実装
• ロジック自体は難しくない– ただし、エラー処理が面倒くさかった。バリデーションチェックがコードの半分を占めている
– 難しくはないが、設計は工夫した（MVC)
Web Browser
Contoroller
(PHP)
View
(Javascript)
Model
(Perl)
DB
9
実装画面
Widget設定画面 サイドバー
10
認証機能について
11
これまでの認証方法
• 従来方式(DIARYSYS3)
ログイン画面
ID送信
$id = “administrator”;
IDID
照合
$_SESSION[“admin”] = true;
一致
サーバサイド
管理者権限付与
IDがががが他人他人他人他人にににに知知知知られたらられたらられたらられたら
のっとられてしまうのっとられてしまうのっとられてしまうのっとられてしまう
平文平文平文平文
ロジックロジックロジックロジックがががが単純単純単純単純すぎるすぎるすぎるすぎる
DIARYSYS4ではこのではこのではこのではこの認証方法認証方法認証方法認証方法をををを改改改改めるめるめるめる必要必要必要必要があるがあるがあるがある
12
認証処理の実装は難しい
• 認証のロジックを本格的に実装するのはあまりに困難– セキュリティの知識や技術が必須
– セキュリティを勉強しなおすのは時間的に厳しい
– 管理画面に入るだけの処理でそんなに時間は割けない
優秀な認証機能を流用・応用
13
Livedoor Authの利用
• LivedoorAuth(http://auth.livedoor.com/)の認証を
利用したログインを実装– 認証ロジック、セキュリティ管理系は全てLivedoorに依存する
– 自前で認証ロジックを組み必要がない
– 自前で実装するよりはるかに強固
• 開発者向けWebAPI– 開発者が自システムに組み込むことを前提としているので、利用しやすい
– Livedoor IDがあれば誰でも使うことが出来る
14
Livedoor Authの概要
• アプリケーションの登録– 認証させたいアプリケーション(Webシステム)を登録
する• 登録内容は、アプリケーション名、アプリケーションの説明(任意)、認証処理させるURL、認証成功後に移動するURL
• 最大5個までのアプリケーションを登録できる
「アプリケーションキー」「秘密鍵」は認証をシステムに組み込む際に必須。
15
アプリケーションへの組み込み
• パラメータを設定する
– app_key(ｱﾌﾟﾘｹｰｼｮﾝｷｰ),v(ﾊﾞｰｼﾞｮﾝ：1.0で固定),t(そのときの時間：PHP
ならtime()),perms(userhashまたはid：ここではid)を昇順昇順昇順昇順にににに連結連結連結連結させるさせるさせるさせる
– 秘密鍵と連結させた文字列をHMAC_SHA1でハッシュコードを生成し、
それを「シグネチャ」と呼ぶ
– パラメータを「＝」と「&」を使って昇順に連結、最後にシグネチャを連結させてURLを生成する(詳しくは公式参照)
生成したURLの例：
http://auth.livedoor.com/login/?app_key=9f7c4a090ac30fad653cfa
dc47444112&perms=id&t=1224510626&v=1.0&sig=aba5d97c5f9
9d829be8526d5f44a0442522865b6
16
アプリケーションへの組み込み
• 生成したURLにアクセスすると、Livedoorの認証画面になる(ただし、ログイン済みの場合は省略される)
• 認証が成功すると、アプリケーションの登録で設定した「コールバック」URLにジャンプする
(ここで処理を終ることも出来るが、今回はここからさらに進む)
• コールバック先で$_GETパラメータにより、「token」を取得する
• 同様に、app_key,t,vおよび秘密鍵を利用してHMAC_SHA1でハッシュコードを生成し、再度シグネチャ(sig)を生成する
• app_key,t,v,token,sigとformat(json or xml)をPOSTで
http://auth.livedoor.com/rpc/auth に送信する
• 成功すればLivedoorIDが返ってくるので、これを認証に利用する
17
LivedoorAuthを組み込んだ認証
• 新方式(DIARYSYS4)
コールバック処理
サーバサイド
認証URL要求
Livedoor Auth
認証URL生成ロジック
認証URL
認証URL
クリック
認証処理
コールバック
Livedoor ID
返却処理
Livedoor ID要求
IDチェック処理Livedoor ID
認証成功認証成功認証成功認証成功！！！！(管理者画面にジャンプ)
ログイン画面
18
今後の予定
• 次回までに実装予定の機能
– ファイルアーカイブ機能• アップローダ＋アップロードファイル一覧表示の機能
• アップロードしたファイルの情報表示など
• アップロードは非同期で行う予定
– タグ管理機能• エントリに付与するタグ管理機能
• 前バージョンで実装済みなので、ほぼ流用の予定(ただしリファクタリングはする)
