{"id":392,"date":"2019-10-14T16:45:25","date_gmt":"2019-10-14T16:45:25","guid":{"rendered":"https:\/\/avantutor.com\/blog\/?p=392"},"modified":"2023-02-26T21:48:56","modified_gmt":"2023-02-26T21:48:56","slug":"add-recaptcha-v3-to-devise-rails","status":"publish","type":"post","link":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/","title":{"rendered":"Stop Robot Sign Ups on Your Devise Rails Application Using Google&#8217;s reCAPTCHA v3"},"content":{"rendered":"\n<p>Let&#8217;s see if I remember the exact steps I took to add <em>reCAPTCHA v<\/em>3 to my rails application&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Local Development<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Gemfile<\/h3>\n\n\n\n<p>Add &#8216;recaptcha&#8217; gem <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gem \"recaptcha\"<\/code><\/pre>\n\n\n\n<p>Run bundle install<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bundle install<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">.env <\/h3>\n\n\n\n<p>I am setting my environment variables using .env. <\/p>\n\n\n\n<p>Oh yeah, if you haven&#8217;t done so already make sure to get your key and secret from Google before continuing. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>development:\n  ...\n  RECAPTCHA_SITE_KEY: 6L**************************************Bc-\n  RECAPTCHA_SECRET_KEY: 6L***********************************3hE\n  ...\nproduction:\n  ...\n  RECAPTCHA_SITE_KEY: 6L**************************************Bc-\n  RECAPTCHA_SECRET_KEY: 6L**************************************Bc-\n  ...\n<\/code><\/pre>\n\n\n\n<p>Don&#8217;t forget the possible dash (-) at the end of the site key!  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">View <\/h3>\n\n\n\n<p>Add the following line to your devise sign up form. In my case it was in app\/views\/users\/registrations\/new.html.erb<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;%= form_for(resource, as: resource_name, url: registration_path(resource_name),  html: { class: \"form-horizontal\"}) do |f| %>\n\n  &lt;%= recaptcha_v3(action: 'registration') %>\n  ...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"> Controller<\/h3>\n\n\n\n<p>Add the following code to your &lt;Model>::RegistrationController  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Users::RegistrationsController &lt; Devise::RegistrationsController\n\n    def create\n       recaptcha_valid = verify_recaptcha(model: @user, action: 'registration')\n      if recaptcha_valid\n        super\n      else\n        flash.now[:error] = \"Recaptcha Human Check Failed\"\n        redirect_to new_user_registration_path\n      end\n    end\n...<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Heroku<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Config Vars <\/h3>\n\n\n\n<p>If you are hosting your app on heroku &#8211; make sure to add the key and secret to your heroku config vars.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1025\" height=\"672\" class=\"wp-image-394\" style=\"width: 700px;\" src=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM.png\" alt=\"Heroku Config Vars Screenshot\" srcset=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM.png 1025w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM-300x197.png 300w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM-768x504.png 768w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM-1024x671.png 1024w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM-945x620.png 945w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM-600x393.png 600w\" sizes=\"(max-width: 1025px) 100vw, 1025px\" \/> <\/p>\n\n\n\n<p>One you have clicked on Reveal Config Vars you can enter your key and secret  values. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"694\" height=\"204\" src=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.26.39-AM-1.png\" alt=\"Screenshot of heroku config vars input boxes. \" class=\"wp-image-396\" srcset=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.26.39-AM-1.png 694w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.26.39-AM-1-300x88.png 300w, https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.26.39-AM-1-600x176.png 600w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><figcaption>Heroku Config Vars<\/figcaption><\/figure>\n\n\n\n<p>I ran into a problem when I did this step.  I had not realized that I did not copy the full key.  I was missing a dash (-) at the end of my key!  So double check your key and secret. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sign Ups are now Protected by Google reCAPTCHA v3<\/h3>\n\n\n\n<p>I hope I didn&#8217;t forget any of the steps.  Please let me know if I did.  I would hate to give out bad information.  <\/p>\n\n\n\n<p>As always, feel free to <a href=\"https:\/\/avantutor.com\">reach out to me<\/a> if you have any coding question or post on <a href=\"https:\/\/www.newbstack.com\">newbstack.com<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s see if I remember the exact steps I took to add reCAPTCHA v3 to my rails application&#8230; Local Development Gemfile Add &#8216;recaptcha&#8217; gem Run bundle install .env I am setting my environment variables using .env. Oh yeah, if you&#8230; <a class=\"more-link\" href=\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[7],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Stop Robot Sign Ups on Your Devise Rails Application Using Google&#039;s reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding<\/title>\n<meta name=\"description\" content=\"Here is a quick straight to the point post on how to add Google&#039;s reCAPTCHA v3 to your devise rails sign up forms.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stop Robot Sign Ups on Your Devise Rails Application Using Google&#039;s reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"og:description\" content=\"Here is a quick straight to the point post on how to add Google&#039;s reCAPTCHA v3 to your devise rails sign up forms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T16:45:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-26T21:48:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM.png\" \/>\n<meta name=\"author\" content=\"avansardar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"avansardar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\",\"url\":\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\",\"name\":\"Stop Robot Sign Ups on Your Devise Rails Application Using Google's reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"isPartOf\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#website\"},\"datePublished\":\"2019-10-14T16:45:25+00:00\",\"dateModified\":\"2023-02-26T21:48:56+00:00\",\"author\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\"},\"description\":\"Here is a quick straight to the point post on how to add Google's reCAPTCHA v3 to your devise rails sign up forms.\",\"breadcrumb\":{\"@id\":\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avantutor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stop Robot Sign Ups on Your Devise Rails Application Using Google&#8217;s reCAPTCHA v3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avantutor.com\/blog\/#website\",\"url\":\"https:\/\/avantutor.com\/blog\/\",\"name\":\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"description\":\"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avantutor.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\",\"name\":\"avansardar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"caption\":\"avansardar\"},\"url\":\"https:\/\/avantutor.com\/blog\/author\/avansardar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Stop Robot Sign Ups on Your Devise Rails Application Using Google's reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"Here is a quick straight to the point post on how to add Google's reCAPTCHA v3 to your devise rails sign up forms.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/","og_locale":"en_US","og_type":"article","og_title":"Stop Robot Sign Ups on Your Devise Rails Application Using Google's reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","og_description":"Here is a quick straight to the point post on how to add Google's reCAPTCHA v3 to your devise rails sign up forms.","og_url":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/","og_site_name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","article_published_time":"2019-10-14T16:45:25+00:00","article_modified_time":"2023-02-26T21:48:56+00:00","og_image":[{"url":"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-14-at-9.22.21-AM.png"}],"author":"avansardar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"avansardar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/","url":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/","name":"Stop Robot Sign Ups on Your Devise Rails Application Using Google's reCAPTCHA v3 - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","isPartOf":{"@id":"https:\/\/avantutor.com\/blog\/#website"},"datePublished":"2019-10-14T16:45:25+00:00","dateModified":"2023-02-26T21:48:56+00:00","author":{"@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e"},"description":"Here is a quick straight to the point post on how to add Google's reCAPTCHA v3 to your devise rails sign up forms.","breadcrumb":{"@id":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avantutor.com\/blog\/add-recaptcha-v3-to-devise-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avantutor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Stop Robot Sign Ups on Your Devise Rails Application Using Google&#8217;s reCAPTCHA v3"}]},{"@type":"WebSite","@id":"https:\/\/avantutor.com\/blog\/#website","url":"https:\/\/avantutor.com\/blog\/","name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avantutor.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e","name":"avansardar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","caption":"avansardar"},"url":"https:\/\/avantutor.com\/blog\/author\/avansardar\/"}]}},"_links":{"self":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/392"}],"collection":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":1,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions\/397"}],"wp:attachment":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}