google recaptcha nodejs app

Question

私のアプリの登録ページにGoogle Recaptchaを実装しようとしています。フロントエンドのすべてがページをロードする限り動作するように見えます。「私はロボットではありません」をクリックすると、イメージを確認するように求められます。その後、投稿をクリックすると、「captchaを選択してください"それは私をレジスタページにリダイレクトします。どのように誰かがcaptchaのチェックマークを選択しない場合、私はコードの設定を持っているが、私はなぜそれが続かず、ユーザーを作成するのか分からない。ここで

// handle signup logic 
router.post("/register", function(req, res) { 
    if(req.body.captcha === undefined || req.body.captcha === "" || req.body.captcha === null){ 
     req.flash("error", "Please select captcha"); 
     return res.redirect("/register"); 
    } 
    // secret key 
    var secretKey = process.env.CAPTCHA; 
    // Verify URL 
    var verifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${req.body.captcha}&remoteip=${req.connection.remoteAddress}`; 
    // Make request to Verify URL 
    request(verifyURL, (err, response, body) => { 
     // if not successful 
     if(body.success !== undefined && !body.success){ 
     req.flash("error", "Captcha Failed"); 
     return res.redirect("/register"); 
     } 

     // if successful 
     upload(req, res, function(err) { 
     if(err){ 
      console.log(err.message); 
      req.flash("error", err.message); 
      return res.redirect("/register"); 
     } 
     var newUser = new User({ 
     username: req.body.username, 
     firstName: req.body.firstName, 
     lastName: req.body.lastName, 
     email: req.body.email, 
     bio: req.body.bio 
     }); 

     if(typeof req.file !== "undefined") { 
     newUser.avatar = '/uploads/userImg/' + req.file.filename; 
     } else { 
     newUser.avatar = '/uploads/userImg/no-image.png'; 
     } 
     console.log(newUser); 
     if(req.body.adminCode === process.env.ADMINCODE) { 
     newUser.isAdmin = true; 
     } 

     if(req.body.answer !== process.env.SECRET){ 
     req.flash("error", "answer the question"); 
     return res.redirect("back"); 
     } else { 
     User.register(newUser, req.body.password, function(err, user){ 
      if(err){ 
      console.log(err.message); 
      return res.render("register", {error: err.message}); 
      } 
      passport.authenticate("local")(req, res, function(){ 
      req.flash("success", "Welcome to Let's Camp " + user.username); 
      res.redirect("/campgrounds"); 
      }); 
     }); 
     } 
    }); 
    }); 

}); 

<% include ./partials/header %> 

<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <form id="register" action="/register" method="post" enctype="multipart/form-data"> 
     <h1 class="text-center">Sign Up</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="firstName">First Name</label> 
      <input id="firstName" class="form-control" type="text" id="firstName" name="firstName" placeholder="First Name*" required> 
     </div> 
     </div> 
     <div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="lastName">Last Name</label> 
      <input id="lastName" class="form-control" type="text" id="lastName" name="lastName" placeholder="Last Name*" required> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="email">Email</label> 
      <input id="email" class="form-control" type="email" id="email" name="email" placeholder="Email*" required> 
     </div> 
     </div> 
     <div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="avatar">Avatar Image URL</label> 
      <input id="avatar" class="form-control" type="file" name="avatar"> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="username">Username</label> 
      <input id="username" class="form-control" type="text" id="username" name="username" placeholder="Username*" required> 
     </div> 
     </div> 
     <div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="password">Password</label> 
      <input id="password" class="form-control" type="password" id="password" name="password" placeholder="Password*" required> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="bio">Bio</label> 
      <textarea id="bio" class="form-control" type="bio" name="bio" rows="5" placeholder="Write a short description of yourself and what you enjoy about camping."></textarea> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="adminCode">Admin Code</label> 
      <input id="adminCode" class="form-control" type="text" name="adminCode" placeholder="Admin Code"> 
     </div> 
     </div> 
     <div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <label for="number">Enter: Answer</label> 
      <input id="number" class="form-control" type="text" id="answer" name="answer" placeholder="Answer*" required> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
     <div class="g-recaptcha form-group" data-sitekey="6LduxzsUAAAAAAoten8FA_zg12PjA3QfSjF5vFvY"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
     <div class="form-group"> 
      <button class="btn btn-lg btn-primary btn-block">Sign Up!</button> 
     </div> 
     <a href="/campgrounds">Go Back</a> 
     </form> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 col-xs-8 col-xs-offset-2"> 
      <p class="text-center"><strong>*</strong> indicates a required field.</p> 
     </div> 
    </div> 
    </div> 

<% include ./partials/footer %> 

Answer 1

それはあなたが正しくチュートリアルを読んでいたようなreq.body.captcha

は思えないのです...コードです。 "目に見えない" フィールドはreq.body['g-recaptcha-response']

の下にアクセス可能であることを証明している

if(req.body && req.body['g-recaptcha-response']) response = req.body['g-recaptcha-response']; 

それらの両方を：this fileから

app.post('/submit',function(req,res){ 
    // g-recaptcha-response is the key that browser will generate upon form submit. 
    // if its blank or null means user has not selected the captcha, so return the error. 
    if(req.body['g-recaptcha-response'] === undefined || req.body['g-recaptcha-response'] === '' || req.body['g-recaptcha-response'] === null) { 
    // not passed validation 
    } 

とはライン52でそのようなコードを参照してくださいです：this tutorialから

は、このような例を見ています

HERE

FIX IS：

この：

const captcha = req.body['g-recaptcha-response']; 
if(!captcha){ 
    req.flash("error", "Please select captcha"); 
    return res.redirect("/register"); 
} 

と、この：

// Verify URL 
var verifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${captcha}&remoteip=${req.connection.remoteAddress}`; 

または単純なミドルウェアcatchReCaptchaを作成して、ルータに接続：

// middleware that catches g-recaptcha-response and puts in req.body.captcha 
const catchReCaptcha = (req, res, next) => { 
    if(req.body && req.body['g-recaptcha-response']) { 
    req.body.captcha = req.body['g-recaptcha-response']; 
    } 
    next(); 
}; 

// attached middleware to register route 
router.post("/register", catchReCaptcha, (req, res) => { 

が、心に留めておいてください。uploadメソッドは、そのコンテンツタイプの要求本体を解析するためにも責任があります。