MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


Google reCAPTCHA の導入方法 site key secret key(公開鍵 秘密鍵)の入手方法

WordPressのフォームやコメントプラグインの中にはGoogle reCAPTCHAに対応しているものがあるので、site key secret key(公開鍵 秘密鍵)の導入フローの参考にして頂ければと思います。

WordPressに限らず、WEBサイトのフォーム水面下ではスパムとの戦いが繰り広げられているわけですが、Akismetなど、対策プラグインを利用していればほとんど気になることはありません。
Akismet

そして、スパムを防ぐものの一つにCAPTCHA(キャプチャ)がありますが、今回はGoogleで提供している「Google reCAPCHA」についてです。

Google reCAPCHAの導入

まずはGoogle reCAPTCHAのページにアクセス。

Google reCAPTCHA
https://www.google.com/recaptcha/intro/index.html

【Get reCAPTCHA】をクリックしましょう。

Google reCAPTHA 00

Googleにログインしていなければ、ログイン画面になるかと思います。

サイトと関連あるアカウントでログインしましょう。

キャプチャの種類

Googleで提供しているキャプチャで、reCAPTCHA V2とinvisible reCAPTCHAについて。Androidはアプリ用だと思うので試していません。

まずはreCAPTCHA V2から。

こちらは一般的なキャプチャですが、画像を選んだりするわけでもなく、チェックするだけ。

Google reCAPTHA デモ

reCAPTCHA V2 DEMO
https://www.google.com/recaptcha/api2/demo

次にinvisible reCAPTCHAですが・・・

Google reCAPTHA invisible

invisible reCAPTCHA DEMO
https://www.google.com/recaptcha/api2/demo?invisible=true

invisible(見えない)に至ってはチェックすらしないという!!

もはやキャプチャと言わないのでは!?

ドメインの設定

ラベル(管理上の名前)を入力し、キャプチャの種類(前述)を選択。

ラベル入力

ドメインを設定して送信。

ドメイン入力

Site Key , Secret Key (公開鍵 秘密鍵)が表示されます。

キーの表示

使い方

キーが欲しかっただけなのでコードまでは利用しませんが、使い方も至ってシンプルなのですね。

スクリプトを読み込んで、

<script src='https://www.google.com/recaptcha/api.js'></script>

利用したい部分に以下のコードを貼るだけ。(実際にはform要素の中で使われることになるでしょう)

<div class="g-recaptcha" data-sitekey="ここにsitekey"></div>

こんな感じ↓

むかしは見づら~い画像文字を目を凝らして「ん?h?n??」なんてやってたもんです。

ちょっとご年配の友人に至ってはロボットでもないのにキャプチャを突破できず、Googleアカウントを作ることを断念した人までいたものです・・・

入力しなくても良いどころではなく、「そもそも見えない」なんて、ロボットを判別する技術も進化しているということですね。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA