Rechaptcha

.eslintrc.json

@@ -1,14 +1,14 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true,
-        "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "rules": {
-    }
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {}
 }

app/controllers/concerns/verify_recaptcha.rb

@@ -0,0 +1,20 @@
+module VerifyRecaptcha
+  extend ActiveSupport::Concern
+
+  private
+
+  def verify_recaptcha_v2(model)
+    verify_recaptcha(
+      model: model,
+      secret_key: Rails.application.credentials.recaptcha_v2[:secret_key],
+    )
+  end
+
+  def verify_recaptcha_v3(action)
+    verify_recaptcha(
+      action: action,
+      minimum_score: 0.3,
+      secret_key: Rails.application.credentials.recaptcha_v3[:secret_key],
+    )
+  end
+end

app/controllers/inquiries_controller.rb

@@ -1,24 +1,27 @@
 class InquiriesController < ApplicationController
+  include VerifyRecaptcha
+
   def new
     @inquiry_form = InquiryForm.new
   end
 
   def create
     @inquiry_form = InquiryForm.new(inquiry_params)
-    recaptcha_valid = verify_recaptcha(action: 'inquiry', minimum_score: 0.3,
-                                       secret_key: Recaptcha.configuration.secret_key)
-    if @inquiry_form.valid? && recaptcha_valid
+    @recaptcha_valid = verify_recaptcha_v3('inquiry') || verify_recaptcha_v2(@inquiry_form)
+
+    if @recaptcha_valid && @inquiry_form.valid?
       @inquiry_form.save
-      redirect_to root_path, notice: '送信しました！'
+      redirect_to notice: '送信しました！'
     else
+
       if recaptcha_reply&.dig('error-codes')
         error_codes = recaptcha_reply['error-codes'].join(', ')
         Rails.logger.warn("
           An inquiry from #{@inquiry_form.name} was denied because of recaptcha error-codes: #{error_codes}
         ")
         flash.now[:alert] = error_codes
       end
-      render :new, status: :unprocessable_entity
+      # render :new, status: :unprocessable_entity
     end
   end
 

app/javascript/controllers/recaptcha_v2_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static values = { siteKey: String };
+
+  initialize() {
+    // eslint-disable-next-line no-undef
+    grecaptcha.render("recaptchaV2", { sitekey: this.siteKeyValue });
+  }
+}

app/views/inquiries/_form.html.slim

@@ -0,0 +1,34 @@
+= turbo_frame_tag inquiry_form do |f|
+  = form_with model: inquiry_form, url: inquiry_path, class: 'form' do |f|
+    - if f.object.errors.any?
+      ul
+        - @inquiry_form.errors.full_messages.each do |message|
+          li= message
+    .form-group
+      .form-label
+        .flex.items-center
+          = f.label :name
+          p.required
+            | 必須
+      = f.text_field :name, required: true, class: 'text-field'
+    .form-group
+      = f.label :email, class: 'form-label'
+      = f.email_field :email, class: 'text-field'
+    .form-group
+      .form-label
+        .flex.items-center
+          = f.label :about
+          p.required
+            | 必須
+      = f.select :about, ['ご意見・ご要望', '不具合・バグ', 'その他'], { required: true, prompt: 'お問い合わせ内容を選択してください' }, class: 'select-box'
+    .form-group
+      .form-label
+        .flex.items-center
+          = f.label :description
+          p.required
+            | 必須
+      = f.text_area :description, class: 'text-field h-24'
+    = turbo_frame_tag 'recaptcha' do
+      = recaptcha_v3(action: 'inquiry', site_key: Recaptcha.configuration.site_key)
+    .form-group
+      = f.submit '送信する', class: 'btn btn-indigo'

app/views/inquiries/create.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.replace dom_id(@inquiry_form), partial: 'inquiries/form', locals: { inquiry_form: @inquiry_form } %>
+
+<% unless @recaptcha_valid %>
+  <%= turbo_stream.replace 'recaptcha' do %>
+    <div
+      class='mb-2'
+      id='recaptchaV2'
+      data-controller='recaptcha-v2'
+      data-recaptcha-v2-site-key-value="<%= Rails.application.credentials.recaptcha_v2[:secret_key] %>"></div>
+  <% end %>
+<% end %>

app/views/inquiries/new.html.slim

@@ -1,34 +1,3 @@
 - set_meta_tags title: 'お問い合わせ'
 
-= form_with model: @inquiry_form, url: inquiry_path, class: 'form' do |f|
-  - if f.object.errors.any?
-    ul
-      - @inquiry_form.errors.full_messages.each do |message|
-        li= message
-  .form-group
-    .form-label
-      .flex.items-center
-        = f.label :name
-        p.required
-          | 必須
-    = f.text_field :name, required: true, class: 'text-field'
-  .form-group
-    = f.label :email, class: 'form-label'
-    = f.email_field :email, class: 'text-field'
-  .form-group
-    .form-label
-      .flex.items-center
-        = f.label :about
-        p.required
-          | 必須
-    = f.select :about, ['ご意見・ご要望', '不具合・バグ', 'その他'], { required: true, prompt: 'お問い合わせ内容を選択してください' }, class: 'select-box'
-  .form-group
-    .form-label
-      .flex.items-center
-        = f.label :description
-        p.required
-          | 必須
-    = f.text_area :description, class: 'text-field h-24'
-  .form-group
-    = recaptcha_v3(action: 'inquiry', site_key: Recaptcha.configuration.site_key)
-    = f.submit '送信する', class: 'btn btn-indigo'
+= render 'form', inquiry_form: @inquiry_form

config/credentials/development.yml.enc

@@ -1 +1 @@
-v/Gvo9UiAqfU51t8XxTArl2W2fOV3g2XnEDgMNI++DRroqgMGMC6WMMeFugj7K90bX7N7V7Vk76av6lYuhOsSoMY4BPd4McwtvluZHjJMOwsJ9AipSvTqHavuMLK004M8DkoxOCclhKNqR4cVuKU/as2ijothv2ANzmJvK1++LhHyNh0Rk+iPZk/skRimtpqGsNpmKnf0VNjIOW6vx6Q2ZiNOfX2pcnBNf1rTvx52hW8sU3Hxsi1DQA1t9XIj7EFZTJ0mYzlwlsn0C3Gqx/lxm6J34TVqqlArMPS2Nt6YejsLqsOrygF+WGaXYpRzD3oZ9ytV0pN+QMoVz/4BfO+gIO0L3ZOItzaMXsUJXUHuQlkYuYj8IOdQVEg/k8j1eXG7jLmfj7oPVRIm/u9R95Hq7eJ+m/Z6fYH8GIlknqVMFs71cIPmsQ74zZov43h0ttAFkJPb6Z+qMmFiegIcZrEdQo0d5SPuw2A/M9DWtvrNUsaTANXTEQxvF7EFM7Q9t06JUj1LSnXPtzuhIZRfI9USmtNyjr9lps9Dmv8NrR0oF9RQlNRTPh81ofHRzaDjkjJ4n1anf+G9OpWSO/PCSAZnXbmueeg6SIYHxzlctVUmyAiC+WsksDfnPppm0VwobmsPVV4pViGjw8qG+qElmP96vGAF9TOkLJe1s6ur9Wrypd5FSmJo/7tRvfHIcCd1GfX5oxUGlL7dAOSkarNZzZ/fkJCjd62rby38NJeWzTNkV9RsdO6fDAD2mu3LfnMH2c2sq8bF8Le4D37heYg--xHoye4/GQ0J6Lwdf--Hd99iDtGNZFh98sys6H3qQ==
+DKBSxFwnhHBGQa9RcTPPq4f+PBmxGJ+aH5BXV8RJ9T6S6cw5PQ6XIyokbTpAG/ZeODVmYKIgEL+bm8dC3wG0XIcZ7362gLjy8yVuRqrUvJMkMi7pF3IAusay0plQ2PFaHGQ43YwPvES7r43YaCzK+UAVZotqEeBcm5R3GbaJs/TW2p+JzNT0PHiMOg/Bmf3VG5QqRC1rNlfGhgl+blwVxpiYdk5tUQcOYXruY4jFRUST9nxsYzIM1Vi4LVFCOiIPgvH0KC6JQo2XwRAFK2a8VBzg9fIppBvgY29sWFWzD1WXkNdkNPw0D70i36tvoLEmy7eGPxG9lmDgmB+eiJYxq2Gdk0eyTHGsNOCYGPAseM+B8U4eK1MQDimpRHIRX7LgmbOLIps4J3UJBwq3quaCpkhQZdXt/pu2GnqHFyjgEj3GrBkw803Z0fBdgJD1tk1s3IfQwJPE/39WnmoHIj/Bt8ZvD2t+XqHfjLVVKjxAreBZ3QguMtR/hMoMenl5lohT5FzIh648qDmyIQ/7tqtdDtufhZagaivF7sfuM5X5snYRNsXORyYVBwGX3JLKpJsIvGMcdp768Z934ZhiqY/GhCxLzio9GkIpc63nww0eQSF9UrtqL/zw8qwsopy+rXkWOYsPiob9lRHxoqoiiuiJKNuTDTDuPSqTVNmQSJ9hfB2RKfhd8D2011bjLp0lvpjzQo8RW3nXckGtw4e10btu/OjGvRHQFyN9O9cdf7n/bL1mQHI9kpDuwPZ8Nx3CVq0lMlYr4rfmFDOdj1EXHNmkrVG+XkYCgTguBVB5XqYPyA3YcY+MbEWHDD/Djx11zI1egELIMh3aY3AxPQVTkI8onzKQd8RBfH/qcePoE1KTM5smbtnySfRNjdJpGP+eRmsJ00cEaEEjuP/hDE0T54PCSFSs6hqgLgc/dDKdANrDypcr2YVUKPjZ--l1x757oqpU9+jDlk--DPQFrOZDr7ohUx4ymVhYOw==

config/credentials/production.yml.enc

@@ -1 +1 @@
-tR6ycYyxVYdPzvsJJROKfxicUYKwOEDKRnQCtvtSzfPStSPm9wIN1MrPYjp9IX9b6OYh/vPHDWvUx/lcInAi17lnGJH6PRAb2EwZ4gsjLlCDALiKuqnen2U6YH9bD/PTFjjZ3+ATFn858btE5iyHNhya4uTlTScwCE9FCq5hyXC6UpfzhqdVROcawKRLWxcTvDIrrPqIyNywbBp1mgqXv5QYg8P/+w/XND8ifMz9M66EGZhv9hkjplk3NaftZGhBKqgoBEICcNLbaeMtrrldU0SHTH0dlupBoi2w6usBh0PPVjviXOT4ihfHgFBDDNUY9XdKPuXtG7AU3pXeY09i3XoIK1ebjmirM+zByR6JUDZk28DZ/8UgcqSOEPfjg3gzeAnQCSHaqDmEGfNj5UR8Eab36jtek7LR1kO7MBN3PR0/cigpJ/w8QF3SQ399ifWoRH33MrnElMaYJLYfudrHXIIigzyK2u/pQmU8Ft7IVJO1JSSuGKXsqlvNiWD559uxHXTfXgWQWzHARCd7pa1mNL3jYPz1ImjAzgwDMWEFYoXwUaGK4GGj6KaegB5qsJ/ewLmzQUnDYw66ivY8V2QBDzsDNeMSF8dy88Ur8v6XAhvaP4NnUpGFSQnUQd42gmCpwQjEthq9M/3NJjmZfYE9jH9fs5tE8o7nlj8pFxOEKXWOSrGNcCVwmIXDSy/rxYWOKWGpOj6VkDcsb+YeeXh3DvuyoeIMg+kFUNL35w3cfVaugJF5DTC9ra3til5mVqcaGobUithOOtRkj6WEaoT31Rgp1ammF+soeiD0XQ/0xN7SF8YeGDJlGlj6OpSNk079RbEEB79p3z6xKuYRhVE3NwqJCMaDZPhFyhDLZa7j69VxXIILUW7PpWrbg7wfw9+YzflO2Gcw9xinqtiQQAaRWU63OSMAsXnPU0kGHocptQlfTrtW06cgkPLmJmaPrjMMw7VBuLkpbbJIt9pTLoHy366fjTcSSws57XEFBxU+wiF4I8744VNXndR7BCEyi5tQsSdiRNDjB73ZtmS4bJCG4YiySEMBZrM/PULMk+a7GoTV0eq35VUzkfAsHKoYdSKdxMBCTg9RLmOyv3g3NQTgqr/a+dSGprca/h4++gh6QXwAudzFnB8ldq0lWR44sD1exJSyYhIdVr8+qBIS3YPQt3x/dHFBzr0t--fWhSTMjt5Z7CmrGT--8mfRKYlT2XYPEtguALA0wA==
+py03D84WlfKugShZKi9QZ88ycg3MyIsDnbHAzLhArFWyfoAjVCX5uzT2ic2QfbzThSgAKJdPOZWIsYZC5bTrzZN1u7gLPgb7l2Es1I1ZmQ5KgWq/GRtL1L8/A0XT8P4lwwlrqinyltt3yGSBcamfyzECiOdNBAojrwEqFb3eN5k2OdB18KNXnC53IvSnS84kKf32FmspXtALZRTc77d+j9VKbtGq5vgVjoQC2IQPNCGCLsvkw9gPfyPYJ6pkflEUYdQnc29xLS/jWIaH7O7R7Rm31CG6+d9BW0KHERX5p7GiBxYcJsInabOd9HenVOuDqWRYERORDMFGyxxV6LMDy2pN0DxNokVo7VPlel/QEg9eqs3WvgEKyrBYQdoDldpijMiW9aPph1oJNcZ3muRWniWALUctwY95iApfDOIODwsIP/xHKqjLWRhO8IhFlhM42PLau33cFxWiM+ZdTuVIT84HF2MJpheobUgSxKy2tR2FKwf24kShHhZJPWUDq5gC6kNYmClwMFvzP39Hv4uHr0l3C54TLbrpJ1kZUzGgUf1EUJFbYlYnQIYTLIGeY4jx//nJ1POavbTnYCsWcUBc35Qn67F4zO6EFoUZAypw8VyGLEgP7862jiVYIsq9P7uok8bunTQOIMn0HXDiZRUcRBWtDN4a4l72rI+k5cN3jvbnMNC1eqEXTTX+7n3r/nfYi6DkBheq3pysN0U9okLuFhvRRmKAPXCRFDpHSYhlrm5S/kq45lUE+hsgmssbeEJQwdpZWhkOme59Y6pt8KN8mZxdyOxj/uCrlct/drlOx+i58IxkGMlR/hZOKMLJBVg6JcM+DK/kI5JczQqD0COBqvu6iAF1GZn2AUyBKXPoyDNFCZ+bvzgJn88OY7TpvSt85IbuRwC+bE0e4S1vK8WW3GvRgWDuxMHKjx1cHTMvnyPi3tIoUlr+KLniMCe/dYfUrdvRCugE/T4BvqhP8cLgbyFL38+E170Wv2cZv/y+6xOZvJEszRC34iGjQb7HrW7w8fEmYr+eKIUlJCaV2pAUNzV7mi93keYrTyOJcEgmuTi+ESlkCxX564CGAqxcP7f9FnPx7CjVhpVMSx64ORkEWFPhLJ4dk2fDSUFwhDooP1xXv7gVEplKO6Q3Dsv/LsfnP8TcPYAwdKpKXRfmnFKEGv58dlWc+0fT0xTQPKknQhfHwoL3yuXFt4Lucb9PDNiXI5h9LLFyjz81rCCXeaREiay+Nx9cpxVZCUe4fDRvAGAMKINAcm/d7o4SGsaGaf+HM2UUyw4zvNIucMvg7AEHJe5NE0948KDcTcx6YxiDc5gW6nchz3lrIuhMno3MIzY3IWU=--oze3IhAtdiEXyX5H--edBghWIjQiH3mKhM0jGctA==

package.json

@@ -15,6 +15,7 @@
   },
   "version": "0.1.0",
   "devDependencies": {
+    "@babel/eslint-parser": "^7.19.1",
     "eslint": "^7.29.0",
     "eslint-loader": "^4.0.2",
     "webpack-dev-server": "^3.11.2"