More Related Content
More from Takenori Nakagawa (12)
後期02
- 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. 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 データ
- 7. HTML の生成
server.js (ルートの一部)
app.get("/", function(req, res){
// HTML のレンダリング (生成)
res.render("template", {
title: "template example",
list: ["node.js", "express", "hogan"]
});
});
- 9. コマンドプロンプト
(cmd.exe) で実行
必要なモジュールのインストール
> npm install express hogan-express
!
サーバの起動
> node server.js
!
!
停止する時は Ctrl + C を入力。
コードの修正を反映させるためには、毎回起動し直す。
- 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. HTTP Header
• User-Agent: クライアントのアプリケーション
を情報が含まれている。
PC/スマホの判定に使われる。
• X-Powered-By: サーバのアプリケーション情
報が含まれている事がある。
PHP/5.4.22 など。
- 20. Passport.js
Node.js で OAuth や OpenID を簡単に扱う
ためのライブラリ。
Google, Twitter, Facebook などに対応して
いる。
!
http://passportjs.org/
- 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. 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"
}
モジュールが列挙される
- 26. npm install --save
> npm install --save passport passport-google
!
このように --save というオプションを付けると package.json に追記されます。
!
> npm i --save passport passport-google
!
※ install は i と略記できます。
- 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"
}
}モジュールが追加された
- 30. もし session が無いと
毎回リクエスト毎 (ページが変わる度) に、
・ログイン情報 (ID, Password)
・入力途中のデータ
をサーバに送信しなければならない。
- 34. Express + Passport
フレームワークの Express と OAuth/OpenID の
ライブラリ Passport を組み合わせると、
簡単に Google/Twitter/Facebook の認証が実装
できる。
!
http://passportjs.org/guide/google/
- 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. 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. 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. Express + Passport
server.js (ルートの一部)
// 認証ページ
app.get("/auth", passport.authenticate("google"));
!
// 認証コールバックページ
app.get("/auth/callback", passport.authenticate("google", {
successRedirect: "/auth/success",
failureRedirect: "/auth/fail"
}));
- 39. Express + Passport
server.js (ルートの一部)
// 認証成功ページ
app.get("/auth/success", function (req, res) {
res.send("認証に成功しました。");
});
!
// 認証失敗ページ
app.get("/auth/success", function (req, res) {
res.send("認証に失敗しました。");
});
