Recaptcha v3 not working

[datapolitical]

I've attempted to configure recaptcha v3 support after getting v2 working but I end up with the form redirecting to my staticman instance with a success message.

Here's the v3 code, which is live on my site: https://github.com/datapolitical/contrast/

the relevant files are assets/js/main.js and _includes/comments.html and comment.html and comment_form.html.

I've included more details in the comment below.

Any help is greatly appreciated.

[datapolitical]

Okay I figured out my initial problem (and edited the comment). The site key that's live on my website needed to match the request I was submitting.

But now the code I have is submitting properly but not interfacing with the existing main.js file. The only thing I've changed is switching the button code to this:

    <button class="button g-recaptcha" id="comment-form-submit"
        data-sitekey="{{ site.reCaptcha.siteKey }}"
        data-callback='onSubmit'
        data-action='submit'>
      Submit
    </button>

</form>

<script>
  function onSubmit(token) {
    document.getElementById("new-comment").submit();
  }
</script>

I think the problem is that new submit script code doesn't play nice with the existing main.js code, but I really don't understand how main.js works so I'm not sure what to modify.

[VincentTam]

I don't know node.js yet, but it seems to me that only reCATPCHA v2 is supported. If you want reCAPTCHA v3, you may adjust your API instance's controllers/process.js with reference to https://github.com/eduardoboucas/staticman/pull/383/files#diff-80c0fcb3f3c0e1789216e765ac223f0e327b2175d4c4cabb7d3423ced3081131 so as to get this feature.

[datapolitical]

Thanks! This is a huge help! One question: Given i deployed to Heroku by clicking the button, what’s the right way to make the change? I’ve never modified code on heroku before.

Do I just clone the repo and then change the code and then push it to heroku?

It’s a shame that PR wasn’t adopted so that V3 would be an option.

[VincentTam]

Thanks! This is a huge help! One question: Given i deployed to Heroku by clicking the button, what’s the right way to make the change? I’ve never modified code on heroku before.

You may want to refer to Heroku's docs for the deploy button. I remember something like https://git.heroku.com/.... You may try finding the right Git URL on Heroku for your app through the online dashboard.

It seems that using the implicit template in README and suitable app.json suffices.

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

Given that you've clicked the button through this repo (like I did), you might want to change the key repository in app.json to your fork if you tweak this node.js app.

The code editing is carried out locally, then push to GitHub and Heroku. It's possible to link up the two, and I encourage you to find the relevant docs through Heroku's online dashboard.

:exclamation: I've never tried the above procedures. However, you're invited to leave a feedback, so that future testers (including me) can benefit from your experience. :smiling_imp:

It’s a shame that PR wasn’t adopted so that V3 would be an option.

@alexwaibel has his reasons for closing a PR mixed with too many changes. As a maintainer for a Hugo theme, I sympathize with his decision. I've worked on that to fix bugs introduced by the owner's updates for a week. I've asked #413 for this feature.