Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
電算部ネットワーク講座 Ⅱ 
Node.js で Web アプリケーション開発
前回のおさらい 
• テンプレートエンジン Hogan.js で HTML の 
自動生成。 
• Express で HTTP Header の取得、設定
Hogan.js
テンプレート 
views/template.html 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>{{title}}</title> 
</head> 
<...
HTML の生成 
server.js 
var express = require("express"); 
var hogan = require("hogan-express"); 
var path = require("path");...
毎回スライドに server.js 
全体を書くのは冗長なので
HTML の生成 
server.js (ルートの一部) 
app.get("/", function(req, res){ 
// HTML のレンダリング (生成) 
res.render("template", { 
title: "te...
このように、今後はルートの 
一部だけを抜粋して表記する
コマンドプロンプト 
(cmd.exe) で実行 
必要なモジュールのインストール 
> npm install express hogan-express 
! 
サーバの起動 
> node server.js 
! 
! 
停止する時は ...
実行結果
HTTP Header
Header の取得と設定 
server.js (ルートの一部) 
app.get("/header", function(req, res){ 
// User-Agent の取得 
var ua = req.headers["user-a...
HTTP Header 
• User-Agent: クライアントのアプリケーション 
を情報が含まれている。 
PC/スマホの判定に使われる。 
• X-Powered-By: サーバのアプリケーション情 
報が含まれている事がある。 
PH...
復習おわり
今回の内容 
• Google アカウント認証
Google アカウント認証 
Google アカウントを用いて本人確認をする 
認証方法。 
技術的には OAuth/OpenID が用いられて 
いる。
OAuth/OpenID 
OAuth はサードパーティ製アプリケーションに 
パスワードを教えること無く、サービスのリソー 
スを提供する仕組み。 
! 
※サービスのリソース:カレンダーに登録されて 
いる予定、メール、連絡先などのユーザが...
OAuth/OpenID 
OpenID はサードパーティ製アプリケーショ 
ンに第三者を通して身元を証明するための仕 
組み。主にログインに使われる。 
! 
※第三者:Google など
Passport.js
Passport.js 
Node.js で OAuth や OpenID を簡単に扱う 
ためのライブラリ。 
Google, Twitter, Facebook などに対応して 
いる。 
! 
http://passportjs.org/
依存関係が増えてくると、何の 
モジュールに依存していたか 
把握しきれなくなってくる
package.json を使う
npm init 
対話的に答えていくと、最後に 
package.json が生成される。 
> npm init 
! 
(中略) 
! 
name: (demo) 
! 
version: (1.0.0) 
description: 
e...
package.json 
{ 
"name": "demo", 
"version": "1.0.0", 
"description": "", 
"main": "server.js", 
"dependencies": { 
} 既に依存...
package.json 導入後の 
npm install
npm install --save 
> npm install --save passport passport-google 
! 
このように --save というオプションを付けると package.json に追記されます。 
! ...
package.json 
{ 
"name": "demo", 
"version": "1.0.0", 
"description": "", 
"main": "server.js", 
"dependencies": { 
"expre...
session
session 
Web アプリケーションに於いて、 
同一のユーザを判別する仕組み。 
! 
ログイン状態の保持に利用され、 
技術的には Cookie などを用いる。
もし session が無いと 
毎回リクエスト毎 (ページが変わる度) に、 
・ログイン情報 (ID, Password) 
・入力途中のデータ 
をサーバに送信しなければならない。
非常に不便
express-session 
> npm i --save express-session 
! 
Express で session を扱うモジュールを導入する。
本題 
Google アカウント認証
Express + Passport 
フレームワークの Express と OAuth/OpenID の 
ライブラリ Passport を組み合わせると、 
簡単に Google/Twitter/Facebook の認証が実装 
できる。 ...
Express + Passport 
server.js (ファイルの先頭に記述) 
var session = require("express-session"); 
var passport = require("passport");...
Express + Passport 
server.js (前スライドの続き) 
var users = {}; 
! 
passport.serializeUser(function (user, done) { 
users[user.i...
Express + Passport 
server.js (app = express() の次の行に記述) 
// session settings 
app.use(session({ 
name: "sess-id", 
cookie:...
Express + Passport 
server.js (ルートの一部) 
// 認証ページ 
app.get("/auth", passport.authenticate("google")); 
! 
// 認証コールバックページ 
a...
Express + Passport 
server.js (ルートの一部) 
// 認証成功ページ 
app.get("/auth/success", function (req, res) { 
res.send("認証に成功しました。")...
起動して 
http://localhost:3000/auth 
をブラウザで開く
余裕があれば Hogan.js で 
美しい HTML を出力しよう
終わり
後期02
後期02
後期02
Nächste SlideShare
Wird geladen in …5
×

後期02

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

後期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. 終わり

×