Recently, a client of ours, gympass.ca was having trouble with spam listings, as the site allows fitness facility owners to upload their locations without first creating an account.

To stop this problem from occurring we decided to implement Google’s invisible reCaptcha on the registration form.

To accomplish this, the first thing we needed to do was register and obtain a reCaptcha key, by visiting Google’s reCaptcha website: google.com/recaptcha.


Google reCaptcha example

Once this step is complete, you will need to copy your site key and your secret key, to use in your application.

Next, you will need to install the reCaptcha and Figaro Gem.

You could also use the Dotenv Gem instead of Figaro.

Gem Install:


gem "figaro"
gem "recaptcha", require: "recaptcha/rails"

bundle install

Figaro Setup

Using the command line, run “bundle exec figaro install”. This will create a new file: “config/application.yml”, and it will be automatically added to your .gitignore file.

Now, open this file and add your reCaptcha keys


config/application.yml

RECAPTCHA_SITE_KEY  = '6Lc6BAAAAAAAAChqRbQZcn_yyyyyyyyyyyyyyyyy'
RECAPTCHA_SECRET_KEY = '6Lc6BAAAAAAAAKN3DRm6VA_xxxxxxxxxxxxxxxxx'

The next step is to create a new initializers file called recaptcha.rb


config/initializers/recaptcha.rb

Recaptcha.configure do |config|
  config.site_key = Rails.application.secrets.recaptcha_site_key
  config.secret_key = Rails.application.secrets.recapcha_secret_key
end

Once complete, open and edit config/secrets.yml.

You will just be adding the reCaptcha site and secret key for development and production.


# Be sure to restart your server when you modify this file.

# Your secret key is used for verifying the integrity of signed cookies.
# If you change this key, all old signed cookies will become invalid!

# Make sure the secret is at least 30 characters and all random,
# no regular words or you'll be exposed to dictionary attacks.
# You can use `rake secret` to generate a secure secret key.

# Make sure the secrets in this file are kept private
# if you're sharing your code publicly.

development:
  Secret_key_base: "your secret key"

recaptcha_site_key: <%= ENV["RECAPTCHA_SITE_KEY"] %> # Added line
recaptcha_secret_key: <%= ENV["RECAPTCHA_SECRET_KEY"] %> # Added line

test:
  Secret_key_base: "your secret key"

# Do not keep production secrets in the repository,
# instead read values from the environment.
production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

  recaptcha_site_key: <%= ENV["RECAPTCHA_SITE_KEY"] %> # Added line
  recaptcha_secret_key: <%= ENV["RECAPTCHA_SECRET_KEY"] %> # Added line

Adding reCaptcha to your form

Now let’s add reCaptcha to your submit button, by opening _form.html.erb.

<%= form_for @gym do |f| %> # using gympass.ca as an example
  <%= invisible_recaptcha_tags text: 'Register' %>
<% end %>

# Note: invisible_recaptcha will create its own button, so no need for f.submit. 

# You can style the button by using:

button.g-recaptcha {
color: #red;
etc..
}

# You can also hide the invisible reCaptcha badge with:

.grecaptcha-badge { 
display: none; 
}

Now for the controller file

 def create
    @gym = Gym.new(gym_params)
      if verify_recaptcha(model: @gym) && @gym.save # modified line
        GymMailer.new_gym(@gym).deliver  
        render 'show'
      else
        render 'new'
      end
    end

If you are running your application on Heroku, you can now run:

bundle exec figaro heroku:set -e production

# This will tell Heroku about your new reCaptcha credentials.

And that's it, you have an extra layer of protection against spammers, without the checkbox :).

Cheers, Brian