😊

Rails recaptcha v3をシンプルに導入

に公開
Turbo
Rails 7
reCAPTCHA
tech

Turboを含むRailsアプリケーションを作成している。
Turboはbodyタグのリンクやフォームを送信をキャッチして非同期で置換する。
reCAPTCHAの読み込みとスクリプトをheadタグ内に書いていた。
そのためページ遷移や送信失敗時にreCAPTCHAがうまく動作せず躓いた。
修正にそこそこ時間がかかった。

前回書いた記事よりも簡単にreCAPTCHAを導入することができたので共有します。

Gemfile

gem 'recaptcha'

ビュー

スクリプトをheadタグに含めないので簡単です。
reCAPTCHAを実行するタイミングをカスタマイズするべきか悩んだ結果、
必要ありませんでした。

<%= form_with model: @model, url: パス, class: 'form' do |f| %>
    フォームの入力欄...
    <%= f.submit 'Submit', class: 'g-recaptcha', data: { sitekey: Rails.application.credentials[:recaptcha_client], callback: 'onSubmit', action: アクション } %>
<% end %>

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
  function onSubmit(token) {
    document.querySelector(".form").submit();
  }
</script>

コントローラ

@model = Model.new(ストロングパラメータ)
success = verify_recaptcha(model: @model, name: 'g-recaptcha-response', minimum_score: 0.9, secret_key: Rails.application.credentials[:recaptcha_backend])
if success && @model.save
  flash[:success] = '送信が成功しました。'
  redirect_to root_path
else
  flash.now[:alert] = '送信が失敗しました'
  render :new, status: :unprocessable_entity
end

Discussion