Featured image of post nodejs入門、暑いからexpress3でメモアプリを作ろうその2 ログイン編

nodejs入門、暑いからexpress3でメモアプリを作ろうその2 ログイン編

Twitter ツイート Hatena Bookmark ブックマーク

どうもこんばんは。
さてさて今回はログイン認証周りのお話をしたいと思います。

予定としてはこんな感じです
url: /account
ログインフォームページ

url: /account/login
ログイン認証

エラーだった場合は/accountに戻ってきます。

ということで順を追って説明します。

まずはログインん周りのroutesファイルを用意しよう

場所:routes/account.js

まずは処理を記述する為のaccount.jsを用意しいましょう
中身は以下のようになっています。

1
2
3
4
5
// ログインフォーム
exports.index = function(req, res){
  if (req.session.isLogin) res.redirect('/');
  res.render('account/index', { title: 'Express' });
};

とりあえずはこれで大丈夫です。

viewファイルを用意しよう

場所:views/account/index.jade

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
extends ../layouts/base.jade

block content
  form(method="post",action="/account/login")
    fieldset
      legend login
      div.form-group
        label(for="exampleInputEmail") email
        input.form-control#exampleInputEmail(type="text",placeholder="your email address...")
      div.form-group
        label(for="exampleInputPassword") password
        input.form-control#exampleInputPassword(type="password", placeholder="passowrd..")
      button.btn.btn-default(type="submit") login

最後にapp.jsに追記するよ!

先ほど、用意したroutes/account.jsを読み込ませる処理をまずは記述しましょう。

1
2
3
4
5
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , account = require('./routes/account')
....

こんな感じに記載してあげましょう。
次にroutesの設定をします。

1
2
app.get('/', routes.index);
app.get('/account',account.index);

全体を通してみるとこんな感じです。
app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , account = require('./routes/account')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
  app.locals.pretty = true;
});


app.get('/', routes.index);
app.get('/account',account.index);


http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

これで準備おk、あとはブラウザでアクセスしてみましょう。
あ、ちなみにnode-devを使ってない人はnodeを再起動させましょう。

http://localhost:3000/account

これでログインページが表示できたと思います。
さて、ここでログインボタンを押すと

1
Cannot POST /account/login

って表示されるかと思います。これはある意味正常処理です。

ログイン処理を書いてみよう

routes/account.jsを修正していきましょう。
ここからはmongodbを使いますので起動しておくのを忘れないように注意してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/memo');

// ユーザースキーマの作成
var UserSchema = mongoose.Schema({
  name: String,
  email: String,
  password: String
});

// ユーザーモデルの作成
var User = mongoose.model('User',UserSchema);

// ログイン画面を表示
exports.index = function(req, res){
  if (req.session.isLogin) res.redirect('/');
  res.render('account/index', { title: 'Express' });
};

// ログイン処理
exports.login = function(req, res) {
  if (req.session.isLogin) res.redirect('/');
  User.findOne({email:req.body.email,password:req.body.password},function(err,doc){
    if (doc) {
      req.session.isLogin = true;
      req.session.user = doc;
      res.redirect('/');
    } else {
      res.render('account/index', { title: 'Express' });
    }
  });

}

まず最初にmongooseを使っていますよね。
流れとしてはスキーマを定義して、モデルを生成するって処理の流れです。
まあここにmongoose周りの処理を記述するのはぶっちゃけ微妙だとは思っていますが、とりあえずサンプルなので、あとでリファクタリングしていきますw

で、ログイン処理ですが、フォームからpostされたデータがreq.bodyの中にはいっているので、そいつを使ってmongoから参照しているだけです。
ちなみにmongooseのモデルもfindとかfindOneとかfindByIdとかつかえますよー!

mongo側にはmemoというデータベースとusersというコレクションをあらかじめ用意しておいてくださいw
これで基本的なログインの処理は書けたかと思います。

次回はログインに関しての表示周りを細かく作ろうと思います!

comments powered by Disqus
Built with Hugo
テーマ StackJimmy によって設計されています。