2017-05-28 8 views
0

私は現在ログインと登録フォームを別々のタブに保存するnode.js認証サイトを作成しようとしています。Node.jsはタブとしてログインと登録フォームを表現します

私は以前、ログインと登録を管理するために2つの異なるサイトを持っていました。だから私のuser.jsファイルには、次のように見えた:

var express = require('express'); 
var router = express.Router(); 
var passport = require('passport'); 
var LocalStrategy = require('passport-local').Strategy; 

var User = require('../models/user'); 

// Register 
router.get('/register', function(req, res){ 
    res.render('register'); 
}); 

// Login 
router.get('/authenticate', function(req, res){ 
    res.render('authenticate'); 
}); 

// Register User 
router.post('/register', function(req, res){ 
    var name = req.body.name; 
    var username = req.body.username; 
    var gender = req.body.gender; 
    var email = req.body.email; 
    var password = req.body.password; 
    var password2 = req.body.password2; 

    // Validation 
    req.checkBody('name', 'Name is required').notEmpty(); 
    req.checkBody('username', 'Username is required').notEmpty(); 
    req.checkBody('gender', 'Gender is required').notEmpty(); 
    req.checkBody('email', 'Email is not valid').isEmail(); 
    req.checkBody('email', 'Email is required').notEmpty(); 
    req.checkBody('password', 'Password is required').notEmpty(); 
    req.checkBody('password2', 'Passwords do not match').equals(req.body.password); 

    var errors = req.validationErrors(); 

    if(errors) 
    { 
     res.render('register', { 
      errors: errors 
     }); 
    } 
    else 
    { 
     var newUser = new User({ 
      name: name, 
      username: username, 
      gender: gender, 
      email: email, 
      password: password 
     }); 

     User.createUser(newUser, function(err, user) 
     { 
      if(err) throw err; 
      console.log(user); 
     }); 

     req.flash('success_msg', 'Success: You are registered and you can login.'); 

     res.redirect('/users/authenticate'); 
    } 
}); 

passport.use(new LocalStrategy(
    function(username, password, done) 
    { 
     User.getUserByUsername(username, function(err, user) 
     { 
      if(err) throw err; 
      if(!user) 
      { 
       return done(null, false, {message: 'Error: Unknown User.'}); 
      } 

      User.comparePassword(password, user.password, function(err, isMatch) 
      { 
       if(err) throw err; 
       if(isMatch) 
       { 
        return done(null, user); 
       } 
       else 
       { 
        return done(null, false, {message: 'Error: Invalid Password.'}); 
       } 
      }) 
     }); 
    }) 
); 

passport.serializeUser(function(user, done) 
{ 
    done(null, user.id); 
}); 

passport.deserializeUser(function(id, done) 
{ 
    User.getUserById(id, function(err, user) 
    { 
     done(err, user); 
    }) 
}) 

router.post('/authenticate', 
    passport.authenticate('local', {successRedirect: '/', failureRedirect: '/users/authenticate', failureFlash: true}), 
    function(req, res) 
    { 
     res.redirect('/'); 
    } 
); 

router.get('/logout', function(req, res){ 
    req.logout(); 
    req.flash('success_msg', 'Success: You are logged out.'); 
    res.redirect('/users/authenticate'); 
}); 

module.exports = router; 

しかし、私は一種の混乱している、今のフォームのポストを扱う認証サイトの店舗は現在ログイン以来/タブに登録する方法。タブの

HTML:タブ付きフォームの

<!-- Tabbed form --> 
<div class="tabbable panel login-form width-400"> 
    <ul class="nav nav-tabs nav-justified"> 
     <li class="active"><a href="#basic-tab1" data-toggle="tab"><h6 class="text-semibold">Sign in</h6></a></li> 
     <li><a href="#basic-tab2" data-toggle="tab"><h6 class="text-semibold">Register</h6></a></li> 
    </ul> 

    <div class="tab-content panel-body"> 
     <div class="tab-pane fade in active" id="basic-tab1"> 
      <form method="post" action="https://stackoverflow.com/users/authenticate"> 
       <input type="hidden" name="method" value="login"> 

       <div class="text-center"> 
        <div class="icon-object border-slate-300 text-slate-300"><i class="icon-reading"></i></div> 
        <h5 class="content-group">Login to your account <small class="display-block">Your credentials</small></h5> 
       </div> 

       <div class="form-group has-feedback has-feedback-left"> 
        <input type="text" class="form-control" placeholder="Username" name="username"> 
        <div class="form-control-feedback"> 
         <i class="icon-user text-muted"></i> 
        </div> 
       </div> 

       <div class="form-group has-feedback has-feedback-left"> 
        <input type="password" class="form-control" placeholder="Password" name="password"> 
        <div class="form-control-feedback"> 
         <i class="icon-lock2 text-muted"></i> 
        </div> 
       </div> 

       <div class="form-group"> 
        <button type="submit" class="btn bg-danger-400 btn-block">Login</button> 
       </div> 
      </form> 
      <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span> 
     </div> 

     <div class="tab-pane fade" id="basic-tab2"> 
      <form method="post" action="https://stackoverflow.com/users/authenticate"> 
       <input type="hidden" name="method" value="register"> 

       <div class="text-center"> 
        <div class="icon-object border-slate-300 text-slate-300"><i class="icon-plus3"></i></div> 
        <h5 class="content-group">Create new account <small class="display-block">All fields are required</small></h5> 
       </div> 

       <div class="form-group has-feedback has-feedback-left"> 
        <input type="text" class="form-control" name="usernameRegister" placeholder="Your username"> 
        <div class="form-control-feedback"> 
         <i class="icon-user-check text-muted"></i> 
        </div> 
       </div> 

       <div class="form-group has-feedback has-feedback-left"> 
        <input type="password" class="form-control" name="passwordRegister" placeholder="Create password"> 
        <div class="form-control-feedback"> 
         <i class="icon-user-lock text-muted"></i> 
        </div> 
       </div> 

       <div class="form-group has-feedback has-feedback-left"> 
        <input type="text" class="form-control" name="emailRegister" placeholder="Your email"> 
        <div class="form-control-feedback"> 
         <i class="icon-mention text-muted"></i> 
        </div> 
       </div> 

       <button type="submit" class="btn bg-danger-400 btn-block">Register</button> 

       </br> 
       <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span> 
      </form> 
     </div> 
    </div> 
</div> 
<!-- /tabbed form --> 

スクリーンショット:

enter image description here

がどのように認証形式で掲載値を扱うことができますか?私は、レジスタやログインなどの値を格納するために2つ以上の隠し入力を送ることができると思っていましたが、javascriptの中でそれらを使用することもできました。

だから私のコードは、私がログインを登録したかどうかわからないでしょう。

答えて

0

タブのフォームの場合は、各フォームが別のルートにPOSTを送信するだけで、登録とログインを区別するための非表示フィールドは必要ありません。

ログインフォーム:

<form method="post" action="https://stackoverflow.com/users/authenticate"> 
... 
</form> 

登録フォーム:あなたのレジスタコントローラで

<form method="post" action="/register"> 
... 
</form> 

、新しいユーザーを作成した後、あなたのユーザーを認証するためにパスポートのauthenticateメソッドを呼び出すことができます、そしてあなたあなたが望む場所にリダイレクトすることができます。しかし、ルートを認証するためにリダイレクトする必要はありません。

関連する問題