IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Google / はてなブログの Googleフォームに reCaptcha を導入

はてなブログの Googleフォームに reCaptcha を導入

2020/02/13 Google, はてなブログ

当サイトには Googleフォームを利用したフォームメールを設置していますが、最近スパムメールが多くなってきましたので何か対策が必要になってきました。

お問い合わせ – IMUZA.com

  • はてなブログに Googleフォームを設置
  • Google reCaptcha
  • フォームに reCaptcha ウィジェットをレンダリング
  • クライアントサイトでバリデーション
  • サーバー側(Google Apps Script)

はてなブログに Googleフォームを設置

Googleフォームのテーマではなく、はてなブログで使用しているテーマ内にフォームを設置する方法の記事です。

  • Google Form を自前のフォームで実装(はてなブログで完全カスタマイズ可)
  • Google Form ブログ実装のためのバリデーションを考える
  • Google Form に自動返信スクリプト実装 Google Apps Script
  • はてなブログのお問い合わせフォームに hidden 型追加

Google reCaptcha

「私はロボットではありません」にチェックするように促されるアレです。

reCAPTCHA: Easy on Humans, Hard on Bots

上のは v2 ですが、現在は v3 になっているようです。v3 がどういうものかわかっていませんので v2 でやってみます。

reCaptcha の考え方は、事前に発行されたサイトキーを使ったトークンをサーバーに送り、サーバーでは事前に発行されたシークレットキーを使ってトークンをチェックするということになります。

ですので、サーバー側の実装が必須になり、はてななどブログサービスでは実質的には使うことができません。ただ、クライアント(ブログ)側でトークンが発行されたかどうか、つまりボットかどうかをチェックすることだけは可能です。

効果があるかどうかはわかりませんが、一度やってみましょう。

まず、サイトキーとシークレットキーを取得します。

reCAPTCHA: Easy on Humans, Hard on Bots に行き、右上の+アイコンをクリックしサイトを登録します。

フォームに reCaptcha ウィジェットをレンダリング

reCaptcha のサイトにドキュメントがあります。

reCAPTCHA v2  |  Google Developers

<html>
<head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>

https://www.google.com/recaptcha/api.js を読み込み、フォーム内に <div class="g-recaptcha" data-sitekey="your_site_key"></div> の htmlコードを入れるだけです。ただし、はてなの場合はデフォルトで api.js が読み込まれていますので htmlコードを挿入すればそれだけで reCaptcha ウィジェットがレンダリングされます。

クライアントサイトでバリデーション

reCaptcha ウィジェットが作成したトークンはクライアント側でも grecaptcha.getResponse() で取得することができます。この値は reCaptcha の認証を通っていない場合は空になりますので、送信ボタンをクリックした時にこの値をチェックすればいいことになります。

reCaptcha を導入した Googleフォームのコードはこうなります。もちろん、name属性、action属性、サイトキーはご自身のものに差し替えてください。

<script>
function showThxMessage(){
   var email = document.myForm.elements['entry.94116415'].value;
   if(email !== ''){
       var thxDiv = document.getElementById('thxMessage');
       thxDiv.getElementsByTagName('span')[0].innerHTML = email;
       document.myForm.reset();
       document.getElementById('formWrapper').style.display = 'none';
       thxDiv.style.display = 'block';
   }
}
function checkRecaptcha() {
  var response = grecaptcha.getResponse();
  if(response.length == 0) { 
    //reCaptcha 未認証
    document.getElementById('recaptcha-error').innerHTML = "reCaptchaにチェックを入れてください";
    return false;
  }
  else { 
    //reCaptch 認証済み
    document.myForm.submit();
  }
}
</script>
<div id="formWrapper">、
<form action="https://docs.google.com/forms/d/e/1FAIpQLSf34P577G_wSnWra6sfde0xGEirpor-Opk_EsDs4Z5CSYa6ng/formResponse" method="post" name="myForm" target="dummyIframe" onsubmit="return checkRecaptcha();">
<label>メールアドレス</label>
<p style="font-size:.8em;color:#999;">※配信可能なメールアドレスを入力してください. 自動返信メールがエラーとなる場合はサイト管理人へも配信されません.</p>
<input type="email" name="entry.94116415" value="" required pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" />
<label>お問い合わせ内容</label>
<textarea required name="entry.1106124689"></textarea>
<div class="g-recaptcha" data-sitekey="6LcZdtgUAAAAAIAhLVgmFuc97NQfRmrsILG9daWw"></div>
<div style="margin-top:10px; color:red;" id="recaptcha-error"></div>
<input style="margin-top:10px;" type="submit" value="送信">
<iframe name="dummyIframe" style="display:none;" onload="showThxMessage();"></iframe>
</form>
</div>
<div id="thxMessage" style="display:none;">
お問い合わせありがとうございました。<br />
<span style="color:red;"></span> 様あてのメールでお答えいたします。<br /><br />
また自動返信メールをお送りいたしましたのでご確認ください。<br />
メールが届いていない場合はお答えメールも届きませんので、迷惑メールとなっていないかなどご確認ください。<br /><br />
--<br />
IMUZA.com
</div>

サーバー側(Google Apps Script)

サーバー側での認証は次の記事にあります。

www.imuza.com

Joomla! 3.9.15 セキュリティ & バグフィックスがリリースされています
AdSenseサイト運営者ポリシー違反レポート
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com