後期02

電算部ネットワーク講座 Ⅱ
Node.js で Web アプリケーション開発

前回のおさらい
• テンプレートエンジン Hogan.js で HTML の
自動生成。
• Express で HTTP Header の取得、設定

テンプレート
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>
繰り返し
変数展開

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 データ

毎回スライドに server.js
全体を書くのは冗長なので

HTML の生成
server.js (ルートの一部)
app.get("/", function(req, res){
// HTML のレンダリング (生成)
res.render("template", {
title: "template example",
list: ["node.js", "express", "hogan"]
});
});

このように、今後はルートの
一部だけを抜粋して表記する

コマンドプロンプト
(cmd.exe) で実行
必要なモジュールのインストール
> npm install express hogan-express
!
サーバの起動
> node server.js
!
!
停止する時は Ctrl + C を入力。
コードの修正を反映させるためには、毎回起動し直す。

Header の取得と設定
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);
});

HTTP Header
• User-Agent: クライアントのアプリケーション
を情報が含まれている。
PC/スマホの判定に使われる。
• X-Powered-By: サーバのアプリケーション情
報が含まれている事がある。
PHP/5.4.22 など。

今回の内容
• Google アカウント認証

Google アカウント認証
Google アカウントを用いて本人確認をする
認証方法。
技術的には OAuth/OpenID が用いられて
いる。

OAuth/OpenID
OAuth はサードパーティ製アプリケーションに
パスワードを教えること無く、サービスのリソー
スを提供する仕組み。
!
※サービスのリソース：カレンダーに登録されて
いる予定、メール、連絡先などのユーザがサー
ビスに登録しているデータ。

OAuth/OpenID
OpenID はサードパーティ製アプリケーショ
ンに第三者を通して身元を証明するための仕
組み。主にログインに使われる。
!
※第三者：Google など

Passport.js
Node.js で OAuth や OpenID を簡単に扱う
ためのライブラリ。
Google, Twitter, Facebook などに対応して
いる。
!
http://passportjs.org/

依存関係が増えてくると、何の
モジュールに依存していたか
把握しきれなくなってくる

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)

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"
}
モジュールが列挙される

package.json 導入後の
npm install

npm install --save
> npm install --save passport passport-google
!
このように --save というオプションを付けると package.json に追記されます。
!
> npm i --save passport passport-google
!
※ install は i と略記できます。

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"
}
}モジュールが追加された

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 の認証が実装
できる。
!
http://passportjs.org/guide/google/

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);
}));

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");
}
});

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());

Express + Passport
// 認証ページ
app.get("/auth", passport.authenticate("google"));
!
// 認証コールバックページ
app.get("/auth/callback", passport.authenticate("google", {
successRedirect: "/auth/success",
failureRedirect: "/auth/fail"
}));

Express + Passport
// 認証成功ページ
app.get("/auth/success", function (req, res) {
res.send("認証に成功しました。");
});
!
// 認証失敗ページ
app.get("/auth/success", function (req, res) {
res.send("認証に失敗しました。");
});

起動して
http://localhost:3000/auth
をブラウザで開く

余裕があれば Hogan.js で
美しい HTML を出力しよう

後期02

More Related Content

後期02