Question

我正在使用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
});

然后可以正常发送电子邮件的路线没有重新接收...

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？几乎没有文档或工作示例，每个步骤都可以通过节点和响应来实现。希望有人可以帮助我和其他任何类似的人吗？

------- EDIT --------------------------------------- ----------------

根据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'未指定默认引擎且未提供扩展名。'

Answer 1

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

无法使用node.js验证google隐形重新访问

1 个答案: