Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web技術勉強会11回目

946 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×