The latest articles on DEV Community by Yalinhua (@yalinhua). https://dev.to/yalinhua https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1104984%2Fb46ff2b5-d7be-4324-a090-59dad1f8797b.jpg https://dev.to/yalinhua en Yalinhua Tue, 19 Mar 2024 11:37:08 +0000 https://dev.to/yalinhua/easy-way-to-implement-recaptcha-v3-in-ruby-on-rails-419g https://dev.to/yalinhua/easy-way-to-implement-recaptcha-v3-in-ruby-on-rails-419g <h2> The difference between reCAPTCHA v2 and v3 </h2> <p>You probably remember the tons of "I am not a robot" checkboxes you clicked on. If you were lucky you got passed through, if not you get a little riddle, where you can find all the cars, or stairs or whatever. </p> <p>Thats reCAPTCHA v2 - a user interaction based verification that the user is not a bot. </p> <p>reCAPTCHA v3 is a pure JavaScript API which you implement to your rails project. It returns a score and gives you the ability to take action in the context of your site. <br> With reCAPTCHA v3 there is no user interaction needed.<br>  <br> Since i am over all the "I am not a robot" verifications i wanted to implement reCAPTCHA v3 to my latest rails project.</p> <h2> How to implement reCAPTCHA v3 in rails </h2> <p><strong>STEP 1: Add needed Ruby Gems to your Rails Project</strong></p> <p>If you don't already have these gems in your gem file, add them and don't forget to run bundle install after you added them. </p> <p><code>gem "dotenv-rails"</code><br> <code>gem "recaptcha", require: "recaptcha/rails"</code></p> <p><strong>STEP 2: Create your CAPTCHA API Keys</strong></p> <p>Go on <a href="https://www.google.com/recaptcha/admin/create">https://www.google.com/recaptcha/admin/create</a> and create your API Keys for the domain you want to add the reCAPTCHA for.</p> <p><strong>STEP 3: Store your CAPTCHA API Keys</strong></p> <p>Create a .env file in your project's root and store your API Keys in it. </p> <p>!! Naming convention: If you name your keys exactly like below then they will be read automatically by the gem.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>RECAPTCHA_SECRET_KEY=******************************** RECAPTCHA_SITE_KEY=******************************** </code></pre> </div> <p>If your working with github, don't forget to add your .env file to .gitignore so that you don't upload the keys to github.</p> <p><strong>STEP 4: Adjust your method to call the reCAPTCHA verification</strong></p> <p>Since you are using a contact form which you have already implemented in your project, you should already have a method for the logic for handling your contact form. In my example the method is called contact_send which has a post route connected to it, so the contact form can communicate with it. </p> <p>In your reCAPTCHA verification you want to define the parameters for a positive verification and what actions should be executed if these parameters are not met.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>unless verify_recaptcha(action: 'checkout', minimum_score: 0.8) Rails.logger.error "WARNING: illegal contact form request from \"#{request.remote_ip}\", score: #{recaptcha_reply['score']}, agent: \"#{request.user_agent}\"" flash[:status] = "invalid-recaptcha" render :contact return 0 end </code></pre> </div> <p>To make your reCAPTCHA verification work properly you have to pass it an action (<a href="https://cloud.google.com/recaptcha-enterprise/docs/actions-website">Checkout the google actions here</a> and a minimum score. </p> <p>Based on several tests I made, i came to the conclusion that if you don't pass a minimum score, the captcha uses the full range of 0.1–1.0, which makes your CAPTCHA useless.</p> <p>I also implemented a Rails.logger to see more details about the error if the captcha does not verify a user and a flash status which will appear and inform the user that the verification was invalid.</p> <p><strong>STEP 5: Adjust your form .html.erb</strong></p> <p>In your .html.erb file you add the following line right above your submit button.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;%= recaptcha_v3(action: 'checkout') %&gt; </code></pre> </div> <p>If you added a flash, you would have to implement it in your .html.erb too.</p> <p>I'll upload an article for effectively testing reCAPTCHA V3 soon, so make sure you follow.</p> <p>Happy Rails riding ❤</p> webdev ruby rails beginners