Invisible reCAPTCHA を試してみる

reCAPTCHA v2 ではバッジを非表示にする Invisible reCAPTCHA が提供されていることを知ったので、試しにローカル環境で動かしてみる。

By default only the most suspicious traffic will be prompted to solve a captcha.

通常のトラフィックではユーザーの操作を伴わないが、疑わしいと判定された場合のみ画像認証によるチャレンジを要求するみたい。reCAPTCHA v3 と似ているが、v3 がスコアに基づいてリクエストを検証するのに対して、チャレンジでの検証方法も提供したい事情がある場合などに選択するといいかもしれない。既存の送信ボタンを押してから検証が行われるので、トークンの有効期限を意識せずに実装できるところも便利に感じた。

サイトの登録画面で reCAPTCHA v2 の「非表示 reCAPTCHA バッジ」を選択して API キー（サイトキーとシークレットキー）を発行する。ローカル環境の場合、ドメインには「localhost」を登録する。Ruby on Rails の Web アプリケーションへの導入を検討しているので、yasslab/sample_apps のサンプルアプリケーションと ambethia/recaptcha の Gem をお借りする。

# .env
RECAPTCHA_SITE_KEY=***
RECAPTCHA_SECRET_KEY=***

# config/initializers/recaptcha.rb
Recaptcha.configure do |config|
  config.site_key = ENV['RECAPTCHA_SITE_KEY']
  config.secret_key = ENV['RECAPTCHA_SECRET_KEY']
end

# app/controllers/sessions_controller.rb
def create
  user = User.find_by(email: params[:session][:email].downcase)
  recaptcha_valid = verify_recaptcha
  if recaptcha_valid
    if user && user.authenticate(params[:session][:password])
      # ログイン成功
    else
      # ログイン失敗
    end
  else
    render 'new'
  end
end

# app/views/sessions/new.html.erb
<%= form_with(url: login_path, scope: :session, local: true) do |f| %>
  …
  <%= invisible_recaptcha_tags ui: :input, text: 'Log in', class: "btn btn-primary" %>
<% end %>

f:id:ryoma123:20220221005031p:plain — Invisible reCAPTCHA の表示例（画像認証は疑わしい場合のみ表示される）

f:id:ryoma123:20220221004707p:plain — Invisible reCAPTCHA の表示例（画像認証は疑わしい場合のみ表示される）

Invisible reCAPTCHA | Google Developers のドキュメントによると data-size="invisible" 属性を利用してプログラム的に検証を行う方法も紹介されていた。 JavaScript のコールバック関数を独自に用意して検証後の処理を走らせる実装になる。アプリケーションの事情にあわせてこちらも利用してみたい。

ryoma123.hatenablog.com

ryoma's note

マイペース ੯•́ʔ̋ ͙͛͛ ͙͛͛ ͙͛̋و

Invisible reCAPTCHA を試してみる