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.

1

Share

Download to read offline

後期02

Download to read offline

北海道科学大学電子計算機研究部ネットワークチーム講座資料

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

後期02

  1. 1. 電算部ネットワーク講座 Ⅱ Node.js で Web アプリケーション開発
  2. 2. 前回のおさらい • テンプレートエンジン Hogan.js で HTML の 自動生成。 • Express で HTTP Header の取得、設定
  3. 3. Hogan.js
  4. 4. テンプレート views/template.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <ul> {{#list}} <li>{{.}}</li> {{/list}} </ul> </body> </html> 繰り返し 変数展開
  5. 5. HTML の生成 server.js var express = require("express"); var hogan = require("hogan-express"); var path = require("path"); ! var app = express(); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! app.listen(3000); View データ
  6. 6. 毎回スライドに server.js 全体を書くのは冗長なので
  7. 7. HTML の生成 server.js (ルートの一部) app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); });
  8. 8. このように、今後はルートの 一部だけを抜粋して表記する
  9. 9. コマンドプロンプト (cmd.exe) で実行 必要なモジュールのインストール > npm install express hogan-express ! サーバの起動 > node server.js ! ! 停止する時は Ctrl + C を入力。 コードの修正を反映させるためには、毎回起動し直す。
  10. 10. 実行結果
  11. 11. HTTP Header
  12. 12. Header の取得と設定 server.js (ルートの一部) app.get("/header", function(req, res){ // User-Agent の取得 var ua = req.headers["user-agent"]; // X-Powered-By の設定 res.set("X-Powered-By", "densan"); ! // レスポンスの送信 res.send("User-Agent: " + ua); });
  13. 13. HTTP Header • User-Agent: クライアントのアプリケーション を情報が含まれている。 PC/スマホの判定に使われる。 • X-Powered-By: サーバのアプリケーション情 報が含まれている事がある。 PHP/5.4.22 など。
  14. 14. 復習おわり
  15. 15. 今回の内容 • Google アカウント認証
  16. 16. Google アカウント認証 Google アカウントを用いて本人確認をする 認証方法。 技術的には OAuth/OpenID が用いられて いる。
  17. 17. OAuth/OpenID OAuth はサードパーティ製アプリケーションに パスワードを教えること無く、サービスのリソー スを提供する仕組み。 ! ※サービスのリソース:カレンダーに登録されて いる予定、メール、連絡先などのユーザがサー ビスに登録しているデータ。
  18. 18. OAuth/OpenID OpenID はサードパーティ製アプリケーショ ンに第三者を通して身元を証明するための仕 組み。主にログインに使われる。 ! ※第三者:Google など
  19. 19. Passport.js
  20. 20. Passport.js Node.js で OAuth や OpenID を簡単に扱う ためのライブラリ。 Google, Twitter, Facebook などに対応して いる。 ! http://passportjs.org/
  21. 21. 依存関係が増えてくると、何の モジュールに依存していたか 把握しきれなくなってくる
  22. 22. package.json を使う
  23. 23. npm init 対話的に答えていくと、最後に package.json が生成される。 > npm init ! (中略) ! name: (demo) ! version: (1.0.0) description: entry point: (server.js) test command: git repository: keywords: author: license: (ISC) About to write to C:Usersww24Desktopdemopackage.json: ! (中略) ! Is this ok? (yes)
  24. 24. package.json { "name": "demo", "version": "1.0.0", "description": "", "main": "server.js", "dependencies": { } 既に依存している "hogan-express": "^0.5.2", "express": "^4.9.5" }, "devDependencies": {}, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node server.js" }, "author": "", "license": "ISC" } モジュールが列挙される
  25. 25. package.json 導入後の npm install
  26. 26. npm install --save > npm install --save passport passport-google ! このように --save というオプションを付けると package.json に追記されます。 ! > npm i --save passport passport-google ! ※ install は i と略記できます。
  27. 27. package.json { "name": "demo", "version": "1.0.0", "description": "", "main": "server.js", "dependencies": { "express": "^4.9.5", "hogan-express": "^0.5.2", "passport": "^0.2.1", "passport-google": "^0.3.0" }, "devDependencies": {}, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node server.js" }, "author": "", "license": "ISC" } }モジュールが追加された
  28. 28. session
  29. 29. session Web アプリケーションに於いて、 同一のユーザを判別する仕組み。 ! ログイン状態の保持に利用され、 技術的には Cookie などを用いる。
  30. 30. もし session が無いと 毎回リクエスト毎 (ページが変わる度) に、 ・ログイン情報 (ID, Password) ・入力途中のデータ をサーバに送信しなければならない。
  31. 31. 非常に不便
  32. 32. express-session > npm i --save express-session ! Express で session を扱うモジュールを導入する。
  33. 33. 本題 Google アカウント認証
  34. 34. Express + Passport フレームワークの Express と OAuth/OpenID の ライブラリ Passport を組み合わせると、 簡単に Google/Twitter/Facebook の認証が実装 できる。 ! http://passportjs.org/guide/google/
  35. 35. Express + Passport server.js (ファイルの先頭に記述) var session = require("express-session"); var passport = require("passport"); var GoogleStrategy = require("passport-google").Strategy; ! passport.use(new GoogleStrategy({ returnURL: "http://localhost:3000/auth/callback", realm: "http://localhost:3000/" }, function (id, profile, done) { console.log("id:", id); console.log("profile:", profile); ! profile.id = id; ! done(null, profile); }));
  36. 36. Express + Passport server.js (前スライドの続き) var users = {}; ! passport.serializeUser(function (user, done) { users[user.id] = user; done(null, user.id); }); ! passport.deserializeUser(function (id, done) { var user = users[id]; ! if (user) { done(null, user); } else { done("user is not exists"); } });
  37. 37. Express + Passport server.js (app = express() の次の行に記述) // session settings app.use(session({ name: "sess-id", cookie: { path: "/", httpOnly: true, maxAge: null }, secret: "secret" })); ! // passport middleware app.use(passport.initialize()); app.use(passport.session());
  38. 38. Express + Passport server.js (ルートの一部) // 認証ページ app.get("/auth", passport.authenticate("google")); ! // 認証コールバックページ app.get("/auth/callback", passport.authenticate("google", { successRedirect: "/auth/success", failureRedirect: "/auth/fail" }));
  39. 39. Express + Passport server.js (ルートの一部) // 認証成功ページ app.get("/auth/success", function (req, res) { res.send("認証に成功しました。"); }); ! // 認証失敗ページ app.get("/auth/success", function (req, res) { res.send("認証に失敗しました。"); });
  40. 40. 起動して http://localhost:3000/auth をブラウザで開く
  41. 41. 余裕があれば Hogan.js で 美しい HTML を出力しよう
  42. 42. 終わり
  • Suzaku183

    Nov. 7, 2015

北海道科学大学電子計算機研究部ネットワークチーム講座資料

Views

Total views

489

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

2

Shares

0

Comments

0

Likes

1

×