かずきち。の日記

サーバサイドエンジニアのつぶやき

無料版はてなブログにGoogleタグマネージャーでGoogle reCAPTCHAを設置する方法


reCAPTCHAの時代遷移

ウェブサイトであなたは本当に人間ですか?と聞かれたことはありませんか?
このパズルを完成させてください、この象形文字を読んでくださいなどとユーザに要求してくるやつです。
インターネットをしている人なら一度は経験をしたことがあるでしょう。
昔はあらゆるアクセスについて、「人間かロボットか」の確認をしていました。


引用;
https://www.homemate-research-convenience-store.com/useful/glossary/convenience-store/1433601/

これはある種、コンビニで未成年がお酒やタバコを買うときに年齢確認の表示が出るように…

「あなたは20歳以上?未成年?」

と聞いてきます。
この方法は例えどうみても20歳以上の60代などにも表示がされる仕様です。
どう見ても20歳以上ならコンビニで年齢確認するのは無駄です。
同様にどう見ても人間によるアクセスの場合に「あなたは本当に人間?」と聞くことは大変不毛です。
おじいさんがビールを買うなら、免許証の確認をスキップするのが普通でしょう。

話は戻って、いつからかインターネットでパズルを解いたり、文字を読む認証がなくなったと思いませんか?


引用:
https://www.okta.com/uk/identity-101/captcha/

昔はインターネットのいたるところで、人間かロボットかのチェックが行われていたと思います。
これはウェブサイトが人間によるアクセスか、コンピュータによるアクセスかを見極められなかったので
文字を読ませたり、パズルを解かせています。

CAPTCHAはv3(バージョン3)からチャレンジ方式に変更

v3からはどう見ても人間のアクセスだよねというものにはパズルの要求をしません。
ちょっと機械か人間か判断がつかないときにチャレンジします。

サッカーのチャレンジと同じで、1試合に何回かVAR(バーチャルアシスタントレフリー)判定の要求できるように
ウェブサイトが閲覧者にチャレンジします。
今回はそんな人間かロボットかのチャレンジをするCAP TCHAをはてなブログにGoogleタグマネージャーで設定していきます。

まずはGooglereCAP TCHAにアクセスして、reCAPTCHAの登録をする

www.google.com
引用:
https://www.google.com/recaptcha/admin/

ここにクセスしたら、右上の「+」ボタンからサイトの登録をします。

歯車マークを押すとreCAPCHAのサーバー側のシークレットコードが表示されます。

developers.google.com

このコードをサイトに埋め込んでサイト読み込み時に認証をかけます。
しかし今回はGoogleタグマネージャーを使って、CAP TCHAを設置していくことが目標です。

Googleタグマネージャーにアクセスする

tagmanager.google.com
引用:
https://tagmanager.google.com/

ここで今回はreCAPTCHAを設置しに行くので、ALLPageトリガーで新規タグを設置します。
新規タグ→カスタムHTML→AllPagesのトリガーで

このようなjavascriptを記入します。
モザイクになっている箇所は自身のreCAPTCHAのシークレットIDを埋め込んでください。

タグの準備ができたら、発火の準備

発火の準備というのはコードを発動させる「きっかけ」を設定することです。
きっかけとは簡単に言えば、

朝7:00になったら、朝ごはんを食べるという事象において、
「朝7:00になったら」はトリガーに該当します。

同様に
自動車の燃料タンクのゲージが10%を下回ったら、ガソリンスタンドに行くと言う事象に置いて、
「ガソリンタンクのゲージが10%を下回ったら」がトリガーに該当します。

なので、今回は誰かがウェブサイトにサクセスしたらreCAPCHAを発動させたいので
トリガーを「AllPages」に設定します。

トリガーを作るのは世の中からルールを見出す操作をコンピュータに教え込むこと

冷蔵庫に卵がなくなったら、スーパーマーケットに卵を買いに行くのは
冷蔵庫にセンサーを設置して、卵の在庫がなくなったらAmazonFreshに自動発注すればよいし

トイレペーパーがなくなったら、ドラックストアに買いに行くのも
トイレにセンサーを設置して、トイレットペーパーの在庫がなくなりそうなら自動で注文をすればよいのです。

これと似たことをウェブページに誰かからアクセスがあったら、本人の挙動から人間の可否をチャレンジすればよいのです。
Googleタグマネージャーには時間トリガーやウェブページの閲覧割合トリガー、閲覧元IPトリガーなど様々な仕掛けを作ることができるので面白いです。
課長がアクセスしてきたら、この条件が揃ったらこの仕掛けを走らせるということが作れます。

注目記事