hCaptchaとは?
とあるWebサービスを利用しようとしたら、こんな画面が出ました。
GoogleのreCAPTCHAだろうと思ったのですけど、ちょっと違う。よく見ると「hCaptcha」と書かれています。
ともかく、「私は人間です」にチェックをれてみたところ、
これまた見慣れたものとはちょっと違う画面です。
そこで、「hCaptcha」についてちょっと検索してみたところ、こんな記事が見つかりました。
どうやら、GoogleのreCAPTCHって有料化の動きがあるんですね。全然知りませんでした。とはいえ、この情報は一年半以上前のもので、今の所は有料化されたとかされるとか聞かないので、もしかしたら立ち消えになったのかもしれません。単に延期されているだけで、そのうち有料化されるのかもしれませんけど。
それとは別に、reCAPTCHって非常に重く、導入するとPagespeed Insightsでのスコアが非常に悪くなるのが悩みです。ですので、もし、hCaptchaが軽いのならその点からも乗り換えのメリットがありそうです。
ということで、WordPressにhCaptchaを導入して確認してみます。
WordPressにhCaptchaを導入
では、実際に導入していきます。
インストール ~ 公式プラグインあり
hCaptchaをWordPressにインストールするのは簡単です。公式プラグインがありましたので。
管理画面にログインし、プラグインの新規インストールページで「hCaptcha」を検索すれば見つかります。「今すぐインストール」を押して、「有効化」すればインストール自体は終りです。他の通常のプラグインと同じですね。
設定
hCaptchaの設定画面を開きます。
「hCaptchaに登録してサイトキーとシークレットキーを取得せよ」とのことです。「here」のリンクをクリックします。
hCaptchaにサインアップ
ありがたいことに日本語です。「サインアップ」をクリックします。
日本語なんですけど、英語の直訳で日本語の言い回しとは違って意味が分かりづらいです。英語表示にしたりして、ようやく理解しました。
「個人向け」に騙されずに(?)、「企業やウェブサイトの場合」の方を使います。
「サービスにhCaptchaを追加する(無料)」だけを信じれば大丈夫です。ボタンには「出版社向け~」などとあって、これも理解を難しくしています。ここでは「サイト運営者」というような意味合いだと思います。ですので、このボタンは「hCaptchaを私のウェブサイトに追加します」というくらいの解釈でOKでしょう。
ということで、このボタンを押します。
いくつかの登録方法がありますが、私はEメールで登録してみました。
メールアドレス入力し、国名を選択。「私は人間です」にチェックを入れて「参加する」を押します。
いきなりサイトキーなどが表示されました。びっくりです。ここに表示されたものを使います。
「Sitekey」がサイトキー、「秘密の」がシークレットキーです。日本語が不完全ですが、そこは推測で。
WordPress側の設定
では、WordPressに戻って設定を続けます。
hCaptchaにサインインして取得したサイトキーとシークレットキーをそれぞれ「Site Key」と「Secret Key」にコピペします。
テーマやサイズは、とりあえずそのままで。
この下に、何をhCaptcha認証の対象にするかの選択肢が並んでいます。
一番上は、ログイン中はオフにするという選択。
二番目は、reCAPTCHA互換機能をオフにする設定。reCAPTCHAと併用する場合にチェックするもののようです。reCAPTCHAは使わない(置き換え)の場合はこのまま(チェックなし)。
三番目以降が、各機能・ページとの連携です。ログイン画面、パスワード忘れ画面、コメントフォームにだけhCaptchaを付けるようにしてみました(それ以外は使っていないので)。
最後に「Save hCaptcha Settings」を押します。
これで設定完了のはずです。
動作確認
では、実際に動作するか確認します。
まず、コメントフォーム。
hCaptchaのチェックボックスが付いていますから大丈夫でしょう。
続いて、ログイン画面。
ユーザ名とパスワードを入れて、hCaptchaの「私は人間です」にチェックを入れます。
reCAPTCHAの場合と同じように該当する画層にチェックを入れていきます。認証が通るとチェックボックスにチェックマークが入ります。
大丈夫ですね。
もう一つ、「パスワードを忘れた」の画面。
これにもhCaptchaがちゃんとついています。
以上で、確認終了。他にも連携させたページ/機能があればそちらも確認しておきます。
エラー(Invalid Captcha)
上に書いたとおり、ログイン画面などにhCaptchaの認証が表示されるので良いだろうと思ったのですが実際にログイン操作を行ったところ、問題が起きました。
このように、hCaptchaのテストは通過して緑のチェックマークが入るのですが、ログインボタンを押すと「Invalid Captcha」というエラーが表示されてログインできません。
そこで、一旦、hCaptchaを無効化してログインしました。こういう場合の無効化の方法はFTPでサーバに接続して、プラグインを削除(または、名称変更)します。具体的な方法はこちらのreCAPTCHAのトラブルのページをご覧ください。
管理画面に入って、ログインの履歴をチェックしました。
このように「invalid_hCaptcha」と記録されており、hCaptchaでの認証エラーだということが分かります。このログイン履歴にはCrazy Boneというプラグインを使っています。
あれこれ調べた結果、なんと、このCrazy Boneが原因でした。このプラグインを無効化したら、hCaptchaで認証を行った後に無事ログインできました。
もし、Crazy Boneをお使いで同様のトラブルに遭遇したらチェックしてみてください。
hCaptchaのアカウント設定等
これまでの作業でhCaptchaにサインアップしましたが、その際にはパスワード等の設定は求められませんでした。その辺りを対処しておきます。
パスワードの設定
サインアップした際に入力したメールアドレス宛に、確認のメールが届いていました。
これをクリックしてみます。
パスワードの設定が求められました。「数字、記号を使用して」とありますので、それに沿うように英数字(大文字も)と記号を使ってパスワードを設定してみたのですが…
「もっと強力なパスワードにせよ」とのことです。9文字だったのですけど、それでダメと言われたので10文字にしてみたところ、今度は通りました。
シークレットキーの確認
サインアップした際にシークレットキーは表示されましたが、あんな長いものは覚えていられません。「きっと、どこかで確認できるはず」と思い、探してみました。
こちらが、hCaptchaの管理画面にログインした様子です。
右端の人間のアイコンをクリックするとメニューが開きます。
「設定」を選択します。
「秘密鍵」としてシークレットキーが表示されます。コピーボタンがあるので、簡単にクリックボードにコピーできます。
サイトの登録
続いて、サイト情報を登録しておきます。先程のこの上部メニューから「サイト」を選択します。
サイトの一覧が表示されます。まだ、サインアップしただけですので、サイトは一つだけです。
右端の「設定」をクリックします。
サイトキーが表示されます。これもコピーボタンがあるのでコピーは簡単です。
上の方に「このサイトキーの名前または目的」という項目があり、鉛筆アイコンがついています。
この鉛筆アイコンをクリックします。
入力枠が開くので、適当に入力します。ここではサイト名(ブログタイトル)を入れてみました。Enterで確定です。
下の方にはホスト名を入力する欄があります。入れなくてもいいかなとも思いましたが、一応、入れてみました。
上の方にある「保存する」ボタンを押せば、入力した内容が保存されます。
先程設定した名称が反映されていました。これならどのサイトかわかりやすいですね。
hCaptchaのパフォーマンス(速度)
hCaptchaを試してみようと思ったきっかけの一つが、GoogleのreCAPTCHAがものすごく重いこと。PageSpeed Insightsのスコア悪化の要因の一つですから。
そこで、hCaptchaなら、その辺りが良かったりしたいいなと思うわけです。
では、実際にPageSpeed Insightsで計測してみます。
CAPTCHAなし
まずは、比較基準のためにreCAPTCHAもhCaptchaも入れていない状態です。
単純に、パフォーマンスの総合スコアだけを見ていきます。モバイルで45、PCで89です。
reCAPTCHA
続いて、Google reCAPTCHAを入れた状態。
モバイルで43、PCで82です。 思ったより落ちていません。前はもっとがツンと落ちたように思うのですが…。改善されたんでしょうかね?
hCaptcha
モバイルで46、PCで89です。 最初のCAPTCHAなしのスコアと同じですね。返っていいくらいですが、この辺は誤差の範囲でしょう。
このテストの結果を見る限りでは、hCaptchaをWordPressに導入しても重くなったりなどといったパフォーマンスの低下はなさそうです。
ということで、このままhCaptchaを使ってみようと思います。