webワーカーライフ

技術

迷惑メール対策でreCAPTCHAを入れた

投稿日:

案件で設置したメールフォームに無茶苦茶たくさん迷惑メールが届いてたまらんからなんとかならんやろか?という相談が来て対応をしたのでその備忘録。

ワードプレスならプラグインで防げる

ワードプレスでフォームを作っているのならプラグインを使えば結構簡単に迷惑メール対策は可能。

迷惑メールの大半は海外からの攻撃で日本語ではない言語の場合がほとんどということで日本語が本文に含まれていないメールは弾くというようなスパムメール対策プラグインを私は使っている。

他にもたくさんあるので好きなものを導入すればいいだろう。

ただ、今回はワードプレスで作ったフォームではなかったため別のやり方でやることになった。

メーラーで防げる

迷惑メールは基本メーラーで弾くことが出来る。マックやウインドウズ標準のものでも迷惑メールフィルタの設定で防ぐことは出来る。

私はもうgmailのブラウザでメールをずっとやり取りしているがメーラーなんていらないぐらい高性能なので助かっている。

しかし今回はクライアントがどんなメーラーを使っているかとかよくわからないし使い方を説明するほうがめんどくさそうで金にならないのでメーラーで防げるってことは言わずにフォームを変更することにした。

googleのreCAPTCHAを導入

上司からGoogleのreCAPTCHAを導入するのが簡単なんじゃない?みたいに言われてやったことがなかったので調べてみることにした。

これに関してはグーグルのAPIを使ってロボットか人間かを判別する事ができる高性能なシステムが簡単に導入できるものでTwitterなど色々なところで使われている。

ただ、導入はワードプレスならこれもプラグイン入れるだけで簡単に出来るものの普通のフォームに入れるとなると若干手間がかかる。私のイメージでは15分で終わるイメージだったのだが理解するのに時間がかかり、結局30分以上かかってしまった。

導入手順は以下のサイトを参考にした。

手順としては以下の通りだ。

  1. APIのキーを取得
  2. 表側の実装
  3. 裏側の実装

APIのキーを取得する方法以下の通り

グーグルのサイトにアクセスして必要事項を入力する。
すると「サイトキー」と「シークレットキー」が表示される。

表側の実装は以下の通り

ヘッドタグの中にグーグルAPI読み込み用のタグを入れる。

そしてreCAPTCHAを表示させたい箇所に以下のコードを入れる。

参考サイトでちょっと悩んだのがボタンのdisableについての箇所で、うちのサイトにはsubmitボタンが無く、JSで確認画面を表示させている。なので参考サイトのコードを使い回せなかった。

これが確認画面へのボタンのコードだ。

どうやってdisable化しようか悩んだ結果、ボタン自体を非表示にしてしまうことにした。今の人はreCAPTCHAぐらい普通知っていてこれをクリアすれば送信できる様になるんだなってことぐらいわかると思うのでボタンは最初見えなくてもいいということにした。

CSSでこのように設定する。

jsを追加して動くようにする。

これで表側の実装は出来た。

裏側の実装は以下の通り

裏側の実装をしないとreCAPTCHAの威力は発揮できないので裏側も設定する。phpの場合、参考サイトにある以下のコードをそのまま使おう。php以外の言語を使っている場合はそれに合わせてこのソースを作り変える。

これで迷惑メールは届かなくなる。

簡単だけど5分では出来ないような気がするreCAPTCHA導入の話でした。一番詰まったのはGoogleのAPI取得画面が新しくなっていて参考サイトの説明が使えないところだったような気がする。グーグルはすごい勢いで色々変わるので注意が必要だろう。

落ち着いて考えればちゃんと出来るので頑張って設置しよう。

\SNSでシェアしてね/

人気の記事

1

毎朝「いらっしゃいませー」とみんなで大声で復唱するような普通の店舗での販売員だった私が、職業訓練を3ヶ月受けて社内WEBデザイナーになった話を紹介してみます。

2

今はいろいろな働き方があってWebデザイナーでもアルバイトや派遣社員などの非正規雇用で働いている人も多い。 実際のところ派遣社員でWebデザイナーをするのはどんな感じなのか?派遣社員でWebデザイナー ...

3

Web制作の仕事で生活していこうと思うといろいろな職種がある。 Webデザイナー フロントエンドエンジニア コーダー プログラマー Webディレクター WebデザイナーやWEBディレクターはデザインや ...

-技術

Copyright© Webワーカーライフ , 2021 AllRights Reserved.