reCAPTCHA 정보

recaptcha는 봇 등에 의한 악성 액세스로부터 웹 사이트를 보호하는 기능입니다.
이번에는 RubyOnRails 환경에서 reCAPTCHA V2를 추가해 보겠습니다.
(※최신은 V3입니다만, 이번은 익숙한 것이 있다고 하는 점과 실장하기 쉬웠기 때문에 V2로 했습니다.)

로그인 화면 등에서 자주 보는 이런군요.

그럼,
GooglereCAPTCHA 에서 Google 계정으로 등록합시다.

1. Adomin console 버튼을 클릭합니다.
2. ➕ 버튼을 클릭합니다.
3. 라벨에 app명 등 입력.
4. reCAPTCHA 타입 선택. (이번에는 V2)
5. 도메인 등록. app의 도메인, IP 주소 등, 사용하고 싶은 것을 등록. (개발에서도 사용할 경우 localhost도 등록.)
((➕➕) 버튼으로 추가, "✖️"버튼으로 삭제)
6. 소유자 등록. 사용자의 이메일 주소 입력. 복수 가공동 개발자등도 등록.
7. 체크 박스에 체크.
　-[×]reCAPTCHA 이용 조건에 동의한다. 필수
- [×] 경고를 소유자에게 보냅니다. 임의
8. 송신 버튼을 눌러 등록 완료.

이것으로 등록 완료입니다.
기어 마크를 눌러 설정으로 가서 reCAPTCHA 키를 클릭합니다.
그러면 "site_key"와 "secret_key"와 등록 정보 등을 확인할 수 있습니다.

계속해서,
Rails에 통합해 가자.

1. 설치

Gemfile

 gem 'recaptcha'

 bundle install

2. site_key 및 secret_key 추가

다음 파일 추가

config/initializers/recaptcha.rb

Recaptcha.configure do |config|
  config.site_key = ENV['RECAPTCHA_PUBLIC_KEY']
  config.secret_key = ENV['RECAPTCHA_PRIVATE_KEY']
end

3. Devise 등록 화면에 통합

app/views/devise/registrations/new.html.erb

  <%= recaptcha_tags %>

등록 양식의 아무 곳에나 추가
haml의 경우= recaptcha_tags

4. Devise 등록시 reCAPTCHA 검증을 통합

여기를 참고로 Devise의 RegistrationsController를 상속한 컨트롤러를 추가하고 create 메소드에 reCAPTCHA 검증을 포함

app/controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  prepend_before_action :check_captcha, only: [:create]
  prepend_before_action :customize_sign_up_params, only: [:create]

  private
  def customize_sign_up_params
    devise_parameter_sanitizer.permit :sign_up, keys: [:username, :email, :password, :password_confirmation, :remember_me]
  end

  def check_captcha
    self.resource = resource_class.new sign_up_params
    resource.validate
    unless verify_recaptcha(model: resource)
      respond_with_navigational(resource) { render :new }
    end
  end
end

5. reCAPTCHA 에러 메시지의 i18n 대응

다음 파일 추가

config/locales/ko.yml

  recaptcha: 
  errors: 
  verification_failed: 'reCAPTCHA認証に失敗しました。' 

세세한 설정 등은 app에 따라 다르다고 생각합니다만, 나는 이 흐름에서 reCAPTCHA를 도입했습니다.
실수나 불동작 등이 있으면 죄송합니다.
reCAPTCHA 의 GitHub를 확인하십시오.