Rails 7 / Turbo : g-recaptcha-response is empty #407

jeygeethan · 2022-04-18T06:07:21Z

Whenever I am using rails 7 which is essentially saying using turbolinks for forms, my g-recaptcha-response is blank spaces " "

Version: recaptcha_v2

Solution

If I turn off the turbolinks, data: { turbo: false } in the form, it works again.

grosser · 2022-04-18T14:48:39Z

can you add this tip to the readme or make a PR to fix the issue ?

…

On Sun, Apr 17, 2022 at 11:07 PM Jey Geethan ***@***.***> wrote: Whenever I am using rails 7 which is essentially saying using turbolinks for forms, my g-recaptcha-response is blank spaces " " Version: recaptcha_v2 *Solution* If I turn off the turbolinks, data: { turbo: false } in the form, it works again. — Reply to this email directly, view it on GitHub <#407>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACYZ2YKRPY5JUAATUAJ43VFT32HANCNFSM5TVBRAAA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

byteg · 2022-05-21T20:01:55Z

Having the same issue with Rails 7.
Disabling turbolinks with data: { turbo: false } helps only for the second captcha check. The first check always returns blank g-recaptcha-response.
Any solution for this?

rzepetor · 2022-05-23T07:16:54Z

@byteg @jeygeethan if you inspect html code you can see that there are two 'g-recaptcha-response' inputs so please use
recaptcha_tags noscript: false

byteg · 2022-05-23T07:27:13Z

@rzepetor thank you so much! Now it works :)

rzepetor · 2022-05-23T09:36:19Z

@byteg I have other problem, recaptcha verify always fail and I don't know why, its render normally in form, green check icon is showing, in params I have 'g-recaptcha-response' but it always fails 😞 maybe you know why or have any clue?

bodrovis · 2022-06-21T13:29:34Z

For anyone who's having this issue with Turbo and does not want to disable it, this article should help: https://dev.to/fadrien/rails-devise-and-recaptcha-with-hotwire-turbo-and-stimulus-2hoh

Actually, I had exactly the same issue: even if Turbo is disabled, captcha was reported as invalid on every request.

Also, if you are using only recaptcha v2, make sure to include the corresponding script somewhere on your page:

<% provide :scripts do %>
  <script src="https://www.recaptcha.net/recaptcha/api.js" async="" defer=""></script>
<% end %>

grosser · 2022-06-21T15:00:43Z

some readme instructions for this would be nice, can you make a PR ?

…

On Tue, Jun 21, 2022 at 6:29 AM Ilya Krukowski ***@***.***> wrote: For anyone who's having this issue, this article should help: https://dev.to/fadrien/rails-devise-and-recaptcha-with-hotwire-turbo-and-stimulus-2hoh Also, if you are using only recaptcha v2, make sure to include the corresponding script somewhere on your page: <% provide :scripts do %> <script src="https://www.recaptcha.net/recaptcha/api.js" async="" defer=""></script> <% end %> — Reply to this email directly, view it on GitHub <#407 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACYZ42IRMDVERCI6CIF7LVQG7UVANCNFSM5TVBRAAA> . You are receiving this because you commented.Message ID: ***@***.***>

bodrovis · 2022-06-21T15:19:13Z

I'd love to. However I did some more experiments and it seems this setup is only partially working. For example:

I fully reload the login page, enter my email/password and enter the system --> everything is working, recaptcha v3 reports success
I open another page and then proceed to the login page by clicking the corresponding link (all pages have Turbo enabled) --> recaptcha verification always fails on the first form submit (it seems to be happening with both v2 and v3).

For now I haven't found a way to fix this :(

bodrovis · 2022-06-21T15:22:41Z

Actually, I might have found a potential solution. Will experiment more and if it works, I'll submit a PR

bodrovis · 2022-06-21T16:13:56Z

@grosser Yay, I think I got it working. Here's a PR with a small notice regarding Turbo/Stimulus #413

chloerei · 2022-08-07T08:37:14Z

Setting noscript: false solved my problem.

I wonder why add a textarea in noscript?

recaptcha/lib/recaptcha/helpers.rb

Lines 76 to 80 in 1ac1d61

    
                           <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;"> 
        
                           </textarea>

grosser · 2022-08-07T15:27:50Z

Can you try digging into the git history and making a fixup PR if that seems to be just an accident ?

…

On Sun, Aug 7, 2022 at 1:37 AM Rei ***@***.***> wrote: Setting noscript: false solved my problem. I wonder why add a textarea in noscript? https://github.com/ambethia/recaptcha/blob/1ac1d61ab1e00c85bf282cb662194827a4bfd957/lib/recaptcha/helpers.rb#L76-L80 — Reply to this email directly, view it on GitHub <#407 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACYZ4QE3JLK6E4DJQF4LLVX5YUJANCNFSM5TVBRAAA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

chloerei · 2022-08-07T17:32:10Z

@grosser

I found two related commits, date back to 2014.

4d30e9f
aee249b

I did some tests, when open without turbolinks, recaptcha will set the content of noscript to text. when open with turbolinks, it will not be set to text, which results in two textarea.

It should still be related to tubolinks.

grosser · 2022-08-07T18:03:16Z

is there an improvement you can suggest or maybe some better docs ?

chloerei · 2022-08-08T11:38:54Z

Currently I use this way:

Add api script in layout's head:

  <head>
    ...
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
  </head>

Do not add this script in body, it will cause the api script to be loaded repeatedly.

Tips: It can be selectively loaded using yield :head and content_for :head.

Add this element where recaptcha is required:

<div class="g-recaptcha" data-controller="recaptcha" data-sitekey="<%= ENV['RECAPTCHA_SITE_KEY'] %>"></div>

When this page is the first page visited, it will be rendered by the api script. A stimulus controller is required to handle the case of turbolinks visit.

// recaptcha_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // Skip this if grecaptcha has not been loaded or has already been rendered.
    if (window.grecaptcha && window.grecaptcha.render && this.element.childElementCount == 0) {
      grecaptcha.render(this.element, {
        'sitekey' : this.element.dataset.sitekey
      })
    }
  }
}

The above method can solve the problem of repeated loading and rendering timing in the turbolinks environment.

The noscript content is used to add a fallback validation method. But I found that this method seems to be invalid. You can turn off javascript and visit this page to test, it will prompt you to enable javascript:

https://www.google.com/recaptcha/api2/demo

But there is another page that shows it works, I don't know why:

https://www.google.com/recaptcha/api/fallback?k=6LdAvUIUAAAAAHjrjmjtNTcXyKm0WKwefLp-dQv9

bodrovis · 2022-08-08T12:27:40Z

There's no need to make it so complex. The method I've described here https://github.com/ambethia/recaptcha/wiki/Recaptcha-with-Turbo-and-Stimulus works fine with Turbo (not Turbolinks) and Stimulus. I've been using it for a couple of months already and everything seems to be okay

korolevych-b · 2024-05-09T14:28:20Z

noscript: false

Thanks!

bodrovis mentioned this issue Jun 21, 2022

Add a notice on Turbo and Stimulus #413

Merged

taylor-steve mentioned this issue Feb 6, 2024

Feedback form reCAPTCHA fails intermittently sul-dlss/SearchWorks#3873

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rails 7 / Turbo : g-recaptcha-response is empty #407

Rails 7 / Turbo : g-recaptcha-response is empty #407

jeygeethan commented Apr 18, 2022

grosser commented Apr 18, 2022 via email

byteg commented May 21, 2022

rzepetor commented May 23, 2022

byteg commented May 23, 2022

rzepetor commented May 23, 2022 •

edited

Loading

bodrovis commented Jun 21, 2022 •

edited

Loading

grosser commented Jun 21, 2022 via email

bodrovis commented Jun 21, 2022

bodrovis commented Jun 21, 2022

bodrovis commented Jun 21, 2022

chloerei commented Aug 7, 2022

grosser commented Aug 7, 2022 via email

chloerei commented Aug 7, 2022 •

edited

Loading

grosser commented Aug 7, 2022

chloerei commented Aug 8, 2022 •

edited

Loading

bodrovis commented Aug 8, 2022

korolevych-b commented May 9, 2024

Rails 7 / Turbo : g-recaptcha-response is empty #407

Rails 7 / Turbo : g-recaptcha-response is empty #407

Comments

jeygeethan commented Apr 18, 2022

grosser commented Apr 18, 2022 via email

byteg commented May 21, 2022

rzepetor commented May 23, 2022

byteg commented May 23, 2022

rzepetor commented May 23, 2022 • edited Loading

bodrovis commented Jun 21, 2022 • edited Loading

grosser commented Jun 21, 2022 via email

bodrovis commented Jun 21, 2022

bodrovis commented Jun 21, 2022

bodrovis commented Jun 21, 2022

chloerei commented Aug 7, 2022

grosser commented Aug 7, 2022 via email

chloerei commented Aug 7, 2022 • edited Loading

grosser commented Aug 7, 2022

chloerei commented Aug 8, 2022 • edited Loading

bodrovis commented Aug 8, 2022

korolevych-b commented May 9, 2024

rzepetor commented May 23, 2022 •

edited

Loading

bodrovis commented Jun 21, 2022 •

edited

Loading

chloerei commented Aug 7, 2022 •

edited

Loading

chloerei commented Aug 8, 2022 •

edited

Loading