1. Web技術勉強会第11回
Web技術勉強会第11回
技術勉強会第11
～自作ブログ「DIARYSYS4」開発報告～
自作ブログ「DIARYSYS4」開発報告～
ブログ
Ryuichi TANAKA
Study:http://devel.de.c.dendai.ac.jp/study/
Blog:http://blog.livedoor.jp/mapserver2007/
1

2. 前回の内容を実践してみる
• 前回の内容を具体的に盛り込んでシステム化
DIARYSYS ver4
DIARYSYS ver1
DIARYSYS ver3
DIARYSYS ver2
2

3. 前回の内容を実践してみる
• 自作ブログシステム「DIARYSYS4」を前回紹介
した観点で実装
– ブログはあらゆる技術やコンテンツを集約できる
– これまで培った技術を応用できる
– バージョンアップごとに機能を足す
– リファクタリングをする
– 過去のプログラムの見直し
– 必ず新しい要素を入れる
3

4. 実装した2つの機能を紹介
• Widget管理機能
– DIARYSYSのトップ画面のサイドバーに表示するウィジェットに
関する管理機能
– これまではウィジェットはサイドバー処理用の関数に直接制御ロ
ジックを記述していたため、表示／非表示の設定が不可能
• 認証機能
– 管理画面へログインするための認証機能
– これまではログインIDの入力＋SESSION。だが、ログインIDが
知られてしまえば、誰でもHack可能で、しかも送信が完全に平文。
ログイン周りのロジックがあまりに稚拙。
4

5. Widget管理機能について
5

6. Widget管理機能
• 従来方法
– サイドバーに表示する項目が固定
• 非表示にしたいときはソースから消去するしかない
– サイドバーに表示する順番が固定
• 順番を変えたいときはソースを修正するしかない
• 新方法
– 管理画面でWidgetの設定ができるようにする
• 表示／非表示、表示順などを設定
– イメージとしては、LivedoorBlogで言うところの「プラグイン管理」
• というか、かなり参考にした
6

7. 言語による役割分担
• PHP
– 制御全般を担当。外部APIの場合は、Perlに処理を渡し、表示処
理は、テンプレートやJavascriptへ処理を渡す。
• Perl
– 外部WebAPIをWidget化するために利用。また、Widget設定を保
存するときのDB関連の処理も担当。その他、Widgetテーブルの
初期化スクリプトとしても利用。
• Javascript
– 表示処理を担当。受け取ったWidget設定から実際に表示するた
めの処理として利用。
7

8. 機能の実装
• ロジック自体は難しくない
– ただし、エラー処理が面倒くさかった。バリデーションチェックが
コードの半分を占めている
– 難しくはないが、設計は工夫した（MVC)
Contoroller
(PHP)
Web Browser DB
Model
(Perl)
View
(Javascript)
8

9. 実装画面
Widget設定画面 サイドバー
9

10. 認証機能について
10

11. これまでの認証方法
IDが他人に知られたら
が他人に
• 従来方式 のっとられてしまう
(DIARYSYS3)
$id = “administrator”;
平文
ID 照合
ID送信 ID
一致
$_SESSION[“admin”] = true;
管理者権限付与
ログイン画面
ロジックが単純すぎる
ロジックが単純すぎる
サーバサイド
ではこの認証方法
ではこの認証方法を める必要
必要がある
DIARYSYS4ではこの認証方法を改める必要がある 11

12. 認証処理の実装は難しい
• 認証のロジックを本格的に実装するのはあまり
に困難
– セキュリティの知識や技術が必須
– セキュリティを勉強しなおすのは時間的に厳しい
– 管理画面に入るだけの処理でそんなに時間は割けない
優秀な認証機能を流用・応用
12

13. Livedoor Authの利用
• LivedoorAuth(http://auth.livedoor.com/)の認証を
利用したログインを実装
– 認証ロジック、セキュリティ管理系は全てLivedoorに依存する
– 自前で認証ロジックを組み必要がない
– 自前で実装するよりはるかに強固
• 開発者向けWebAPI
– 開発者が自システムに組み込むことを前提としているので、利用
しやすい
– Livedoor IDがあれば誰でも使うことが出来る
13

14. Livedoor Authの概要
• アプリケーションの登録
– 認証させたいアプリケーション(Webシステム)を登録
する
• 登録内容は、アプリケーション名、アプリケーションの説明(任
意)、認証処理させるURL、認証成功後に移動するURL
• 最大5個までのアプリケーションを登録できる
「アプリケーションキー」「秘密鍵」
は認証をシステムに組み込む
際に必須。
14

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
15

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が返ってくるので、これを認証に利用する
16

17. LivedoorAuthを組み込んだ認証
• 新方式(DIARYSYS4)
認証成功！
認証成功！(管理者画面にジャンプ)
サーバサイド
認証URL生成ロジック IDチェック処理 Livedoor ID
認証URL要求
コールバック処理
認証URL コールバック Livedoor ID要求
Livedoor ID
認証URL 認証処理
ログイン画面 クリック
返却処理
Livedoor Auth
17

18. 今後の予定
• 次回までに実装予定の機能
– ファイルアーカイブ機能
• アップローダ＋アップロードファイル一覧表示の機能
• アップロードしたファイルの情報表示など
• アップロードは非同期で行う予定
– タグ管理機能
• エントリに付与するタグ管理機能
• 前バージョンで実装済みなので、ほぼ流用の予定(ただしリ
ファクタリングはする)
18