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
});

然后可以正常发送电子邮件而无需重新验证的路线......

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 是一个派发到我们的节点路由的函数，如上所示。在我控制台记录用户响应的那条路线中，我变得不确定。我认为这似乎是这里的主要问题。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 应用程序收到以下错误

{成功：假，'错误代码'：['无效输入响应']}

似乎我没有将 recaptcha 数据推送到 this.state.form 中，但我不确定需要将哪个对象推送到其中，或者这是否是问题所在。

有人对此有任何见解吗？有没有更简单的方法来验证不可见的验证码？几乎没有文档或工作示例与节点和反应在这里采取的每一步。希望有人可以帮助我和其他类似情况的人吗？

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

根据 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“未指定默认引擎，也未提供扩展名。”

4

1 回答 1

1

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

于 2018-01-18T19:45:34.750 回答