- 首页
- 其他开发
- 谷歌 recaptcha nodejs 应用程序
谷歌 recaptcha nodejs 应用程序
[英] google recaptcha nodejs app
本文介绍了谷歌 recaptcha nodejs 应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好的，所以我正在尝试将 Google Recaptcha 实施到我的应用程序的注册页面中.只要加载页面，前端的所有内容似乎都可以正常工作，当我单击我不是机器人"时，它会要求我验证图像，然后……当我单击提交"时，它告诉我请选择验证码" 并将我重定向回注册页面.如果有人没有选择验证码复选标记，我就是这样设置代码的，但我无法弄清楚为什么它不会继续并创建用户.这是代码...
//处理注册逻辑router.post("/register", function(req, res) {if(req.body.captcha === undefined || req.body.captcha === "" || req.body.captcha === null){req.flash("错误", "请选择验证码");返回 res.redirect("/注册");}//密钥var secretKey = process.env.CAPTCHA;//验证网址var verifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${req.body.captcha}&remoteip=${req.connection.remoteAddress}`;//请求验证 URLrequest(verifyURL, (err, response, body) => {//如果不成功if(body.success !== undefined && !body.success){req.flash("错误", "验证码失败");返回 res.redirect("/注册");}//如果成功上传(请求，资源，功能(错误){如果(错误){控制台日志(错误消息)；req.flash("错误", err.message);返回 res.redirect("/注册");}var newUser = 新用户({用户名:req.body.username，名字:req.body.firstName，姓氏:req.body.lastName，电子邮件:req.body.email，生物:req.body.bio});if(typeof req.file !== "undefined") {newUser.avatar = '/uploads/userImg/' + req.file.filename;} 别的 {newUser.avatar = '/uploads/userImg/no-image.png';}控制台日志(新用户)；if(req.body.adminCode === process.env.ADMINCODE) {newUser.isAdmin = true;}if(req.body.answer !== process.env.SECRET){req.flash("错误", "回答问题");返回 res.redirect("返回");} 别的 {User.register(newUser, req.body.password, function(err, user){如果(错误){控制台日志(错误消息)；return res.render("注册", {error: err.message});}passport.authenticate("local")(req, res, function(){req.flash("success", "Welcome to Let's Camp" + user.username);res.redirect("/露营地");});});}});});});<% 包括 ./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">注册</h1>
<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">名字</label><input id="firstName" class="form-control" type="text" id="firstName" name="firstName" placeholder="First Name*" required>
<div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"><div class="form-group"><label for="lastName">姓氏</label><input id="lastName" class="form-control" type="text" id="lastName" name="lastName" placeholder="Last Name*" required>
<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">电子邮件</label><input id="email" class="form-control" type="email" id="email" name="email" placeholder="Email*" required>
<div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"><div class="form-group"><label for="avatar">头像图片 URL</label><input id="avatar" class="form-control" type="file" name="avatar">
<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">用户名</label><input id="username" class="form-control" type="text" id="username" name="username" placeholder="Username*" required>
<div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"><div class="form-group"><label for="password">密码</label><input id="password" class="form-control" type="password" id="password" name="password" placeholder="Password*" required>
<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="写一段简短的自我介绍以及您喜欢露营的地方."><;/textarea>
<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">管理代码</label><input id="adminCode" class="form-control" type="text" name="adminCode" placeholder="管理代码">
<div class="col-md-4 col-md-offset-0 col-xs-8 col-xs-offset-2"><div class="form-group"><label for="number">输入:Answer</label><input id="number" class="form-control" type="text" id="answer" name="answer" placeholder="Answer*" required>
<div class="row"><div class="col-md-4 col-md-offset-4"><div class="g-recaptcha form-group" data-sitekey="6LduxzsUAAAAAAoten8FA_zg12PjA3QfSjF5vFvY"></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">注册！</button>
<a href="/campgrounds">返回</a></表单>
<div class="row"><div class="col-md-12 col-xs-8 col-xs-offset-2"><p class="text-center"><strong>*</strong></p> 表示必填字段.
<% 包括 ./partials/footer %>
解决方案
不是req.body.captcha
您似乎没有正确阅读教程.
从 本教程 看到这样的例子:
app.post('/submit',function(req,res){//g-recaptcha-response 是浏览器在表单提交时生成的密钥.//如果它的空白或 null 表示用户没有选择验证码，则返回错误.if(req.body['g-recaptcha-response'] === undefined || req.body['g-recaptcha-response'] === '' || req.body['g-recaptcha-response'] === 空) {//未通过验证}
来自这个文件 在 52 行看到这样的代码:
if(req.body && req.body['g-recaptcha-response']) response = req.body['g-recaptcha-response'];
两者都证明了在req.body['g-recaptcha-response']
下可以访问invisible"字段
这里是修复:
这个:
const captcha = req.body['g-recaptcha-response'];如果(！验证码){req.flash("错误", "请选择验证码");返回 res.redirect("/注册");}
还有这个:
//验证网址var verifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${captcha}&remoteip=${req.connection.remoteAddress}`;
或者只是创建简单的中间件 catchReCaptcha 并附加到路由器:
//捕获 g-recaptcha-response 并放入 req.body.captcha 的中间件const catchReCaptcha = (req, res, next) =>{if(req.body && req.body['g-recaptcha-response']) {req.body.captcha = req.body['g-recaptcha-response'];}下一个();};//附加中间件来注册路由router.post("/register", catchReCaptcha, (req, res) => {
但请记住，您将在解析 multipart/form-data 时遇到冲突，因为 upload 方法还负责解析该内容类型的请求正文.
Ok so I am trying to implement Google Recaptcha into my register page for my app. Everything on the front end seems to work as far as it loads the page and when I click "I am not a robot" it asks me to verify images and then... when I click submit, It tells me to "Please select captcha" and it redirects me back to the register page. Thats how I have the code setup if someone doesn't select the captcha checkmark but I cannot figure out why it won't continue and create the user. Here is the code...
// 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 %>
解决方案
It's not req.body.captcha
Seems like You've not read tutorial correctly.
From this tutorial is see such example:
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
}
And from this file is see such code at line 52 :
if(req.body && req.body['g-recaptcha-response']) response = req.body['g-recaptcha-response'];
Both of them proves that "invisible" field is accessible under req.body['g-recaptcha-response']
HERE IS THE FIX:
this:
const captcha = req.body['g-recaptcha-response'];
if(!captcha){
req.flash("error", "Please select captcha");
return res.redirect("/register");
}
and this:
// Verify URL
var verifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${captcha}&remoteip=${req.connection.remoteAddress}`;
or just create simple middleware catchReCaptcha and attach to router:
// 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) => {
but keep in mind You'll have conflicts of parsing multipart/form-data since upload method responsible also for parsing body of request for that content-type.
这篇关于谷歌 recaptcha nodejs 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
