Web技術勉強会11回目

847 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
847
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web技術勉強会11回目

  1. 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. 2. 前回の内容を実践してみる • 前回の内容を具体的に盛り込んでシステム化 DIARYSYS ver4 DIARYSYS ver1 DIARYSYS ver3 DIARYSYS ver2 2
  3. 3. 前回の内容を実践してみる • 自作ブログシステム「DIARYSYS4」を前回紹介 した観点で実装 – ブログはあらゆる技術やコンテンツを集約できる – これまで培った技術を応用できる – バージョンアップごとに機能を足す – リファクタリングをする – 過去のプログラムの見直し – 必ず新しい要素を入れる 3
  4. 4. 実装した2つの機能を紹介 • Widget管理機能 – DIARYSYSのトップ画面のサイドバーに表示するウィジェットに 関する管理機能 – これまではウィジェットはサイドバー処理用の関数に直接制御ロ ジックを記述していたため、表示/非表示の設定が不可能 • 認証機能 – 管理画面へログインするための認証機能 – これまではログインIDの入力+SESSION。だが、ログインIDが 知られてしまえば、誰でもHack可能で、しかも送信が完全に平文。 ログイン周りのロジックがあまりに稚拙。 4
  5. 5. Widget管理機能について 5
  6. 6. Widget管理機能 • 従来方法 – サイドバーに表示する項目が固定 • 非表示にしたいときはソースから消去するしかない – サイドバーに表示する順番が固定 • 順番を変えたいときはソースを修正するしかない • 新方法 – 管理画面でWidgetの設定ができるようにする • 表示/非表示、表示順などを設定 – イメージとしては、LivedoorBlogで言うところの「プラグイン管理」 • というか、かなり参考にした 6
  7. 7. 言語による役割分担 • PHP – 制御全般を担当。外部APIの場合は、Perlに処理を渡し、表示処 理は、テンプレートやJavascriptへ処理を渡す。 • Perl – 外部WebAPIをWidget化するために利用。また、Widget設定を保 存するときのDB関連の処理も担当。その他、Widgetテーブルの 初期化スクリプトとしても利用。 • Javascript – 表示処理を担当。受け取ったWidget設定から実際に表示するた めの処理として利用。 7
  8. 8. 機能の実装 • ロジック自体は難しくない – ただし、エラー処理が面倒くさかった。バリデーションチェックが コードの半分を占めている – 難しくはないが、設計は工夫した(MVC) Contoroller (PHP) Web Browser DB Model (Perl) View (Javascript) 8
  9. 9. 実装画面 Widget設定画面 サイドバー 9
  10. 10. 認証機能について 10
  11. 11. これまでの認証方法 IDが他人に知られたら が他人に • 従来方式 のっとられてしまう (DIARYSYS3) $id = “administrator”; 平文 ID 照合 ID送信 ID 一致 $_SESSION[“admin”] = true; 管理者権限付与 ログイン画面 ロジックが単純すぎる ロジックが単純すぎる サーバサイド ではこの認証方法 ではこの認証方法を める必要 必要がある DIARYSYS4ではこの認証方法を改める必要がある 11
  12. 12. 認証処理の実装は難しい • 認証のロジックを本格的に実装するのはあまり に困難 – セキュリティの知識や技術が必須 – セキュリティを勉強しなおすのは時間的に厳しい – 管理画面に入るだけの処理でそんなに時間は割けない 優秀な認証機能を流用・応用 12
  13. 13. Livedoor Authの利用 • LivedoorAuth(http://auth.livedoor.com/)の認証を 利用したログインを実装 – 認証ロジック、セキュリティ管理系は全てLivedoorに依存する – 自前で認証ロジックを組み必要がない – 自前で実装するよりはるかに強固 • 開発者向けWebAPI – 開発者が自システムに組み込むことを前提としているので、利用 しやすい – Livedoor IDがあれば誰でも使うことが出来る 13
  14. 14. Livedoor Authの概要 • アプリケーションの登録 – 認証させたいアプリケーション(Webシステム)を登録 する • 登録内容は、アプリケーション名、アプリケーションの説明(任 意)、認証処理させるURL、認証成功後に移動するURL • 最大5個までのアプリケーションを登録できる 「アプリケーションキー」「秘密鍵」 は認証をシステムに組み込む 際に必須。 14
  15. 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. 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. 17. LivedoorAuthを組み込んだ認証 • 新方式(DIARYSYS4) 認証成功! 認証成功!(管理者画面にジャンプ) サーバサイド 認証URL生成ロジック IDチェック処理 Livedoor ID 認証URL要求 コールバック処理 認証URL コールバック Livedoor ID要求 Livedoor ID 認証URL 認証処理 ログイン画面 クリック 返却処理 Livedoor Auth 17
  18. 18. 今後の予定 • 次回までに実装予定の機能 – ファイルアーカイブ機能 • アップローダ+アップロードファイル一覧表示の機能 • アップロードしたファイルの情報表示など • アップロードは非同期で行う予定 – タグ管理機能 • エントリに付与するタグ管理機能 • 前バージョンで実装済みなので、ほぼ流用の予定(ただしリ ファクタリングはする) 18

×