首页 文章

使用node.js验证google隐形recaptcha

提问于
浏览
0

我正在使用npm recaptcha验证插件:https://www.npmjs.com/package/recaptcha-verify

在我的反应应用中,我正在使用https://www.npmjs.com/package/react-google-invisible-recaptcha

在我的节点应用程序代码的顶部:

var Recaptcha = require('recaptcha-verify');
var recaptcha = new Recaptcha({
    secret: 'secret_key',
    verbose: true
});

然后工作正常的路线发送电子邮件没有recaptcha ...

router.post('/mailer/recaptcha', function(req, res) {

   var userResponse = req.query['g-recaptcha-response'];
   console.log("user response: ", userResponse)

   recaptcha.checkResponse(userResponse, function(error, response){
       if(error){
        // an internal error? 
        res.status(400).render('400', {
            message: error.toString()
        });
        return;
    }
    if(response.success){
        res.status(200).send('the user is a HUMAN :)');
        // save session.. create user.. save form data.. render page, return json.. etc. 

    }else{
        res.status(200).send('the user is a ROBOT :(');
        // show warning, render page, return a json, etc. 
    }
});

在表单中,使用react插件,我也试图按照文档,它目前看起来像这样 .

<Recaptcha
  ref={ ref => this.recaptcha = ref }                                  
  sitekey="site_key"
  onResolved={ this.testRecaptcha } />

onResolved函数尝试验证Recaptcha . this.testRecaptcha是一个调度到我们的节点路由的函数,如上所示 . 在那条路线中,我在console.log中的userResponse,我得到了未定义 . 我想这似乎是这里的主要问题 . req还会将我表单中的所有项目作为req.body的一部分注销,但没有任何内容表明recaptcha字段实际存在 .

testRecaptcha(e) {

    let myObject = Object.assign({}, this.state.form, { sentFrom: 'contact', sendTo: this.state.sendTo });
    this.props.dispatch(actions.sendTestToMailer(myObject));
}

当我检查从recaptcha组件输出的代码时,它看起来像这样:

<div style="display: none;"><div class="grecaptcha-badge" style="width: 256px; height: 60px; transition: right 0.3s ease; position: fixed; bottom: 14px; right: -186px; box-shadow: gray 0px 0px 5px;"><div class="grecaptcha-logo"><iframe src="https://www.google.com/recaptcha/api2/anchor?k=sitekey&amp;co=aHR0cDovL2xvY2FsaG9zdDo4MDgx&amp;hl=en&amp;v=v1514934548259&amp;size=invisible&amp;cb=oh5n23icp55m" width="256" height="60" role="presentation" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><div class="grecaptcha-error"></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea></div></div>

(其中sitekey是实际的密钥 - 而不是文本'sitekey)

但是,我从node.js应用程序收到以下错误

{success:false,'error-codes':['invalid-input-response']}

我似乎并没有将recaptcha数据推送到this.state.form,但是我不确定需要将哪个对象推入到那个或者甚至是问题 .

有没有人对此有任何见解?有没有更简单的方法来验证隐形的recaptcha?几乎没有文档或工作示例,每个步骤都可以通过节点和响应来实现 . 希望有人可以帮助我和其他任何类似的人吗?

-------编辑------------------------------------------ -------------

根据trixn的反馈,做出这些改变,它几乎正在......

testRecaptcha(e) {

        let recaptchaResponse = this.recaptcha.getResponse();

        let myObject = Object.assign({}, this.state.form, { sentFrom: 'contact', sendTo: this.state.sendTo, recaptchaResponse:recaptchaResponse });
        this.props.dispatch(actions.sendTestToMailer(myObject));
    }

和...

在节点后端:

var userResponse = req.body.recaptchaResponse;

recaptcha.checkResponse(userResponse, function(error, response){ etc..});

但是......我现在收到这个错误 . 解析对象的响应时出错 . AND'未指定默认引擎且未提供扩展名 . '

1 回答

  • 1

    您需要通过访问 onResolved 回调中的 this.recaptcha.getResponse() 获取已解决的reCaptcha的响应令牌,然后将其添加到POST数据并在节点后端验证 .

相关问题