Loading...

No image

簡単操作でサクサク導入。reCAPTCHA導入で認証強化!

どうも、こだまです。 みなさん、こういうやつよく見かけませんか?

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-8-58-54

これ、申し込みフォーム等で機械による自動入力を防ぐためのものなんですが、率直に言って面倒ですよね。そんな悩みをGoogle大先生が解決してくれました。それがこれ。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-9-01-17

見たことある方もいるのではないでしょうか? こいつ、reCAPTCHAと言いまして、目的としては上のものと同じで、機械による自動操作を防ぐためのものなんです。

reCAPTCHAとは

Googleが提供する不正操作の防止を行うための機能です。 今までは機械等のbot操作やスパムなどから守るために数字や文字を入力して人間による操作かどうかを判断していましたが、より簡単に人間による操作と判断することができないかと考えた末、たったワンクリックで識別できるようになりました。 これは後述するシークレットをGoogleのAPIに送ることで、認証が済んでしまうというとてもシンプルかつ信頼性が高いものです。

余談ですが、reCAPTCHAの紹介動画がかわいいのでオススメです。笑 https://developers.google.com/recaptcha/

ではさっそく導入手順をなぞっていきましょう。

事前準備

必要な情報は以下の2つです。 ・site-key ・secret-key これらを取得するために、まずはこちらのサイトからreCAPTCHAを使用するための情報を登録します。 http://www.google.com/recaptcha/admin %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-9-13-29 Labelは導入する箇所の名前等を書いておくと良いでしょう。 Domainsには実際に導入するサイトのドメインを書きます。こことても大事です。 そしてRegisterをクリック。すると以下の画面に遷移します。 ここの情報を使って、画面の実装を行っていきます。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-9-16-24

画面を作る

<!DOCTYPE html>
<html>
<head>
    <title>sample source</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
    <form method="post">
        <p>
            <input type="text" name="username">
            <input type="password" name="password">
            <div class="g-recaptcha" data-sitekey=”[ここにsite-keyを入力する]”></div>
        </p>
        <div>
            <input type="submit" value="送信">
        </div>
    </form>
</body>
</html>

はい、これだけ。これで以下の画面が作れました。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-9-30-28 ちなみにめっちゃ怒られていますが、わざとです。先ほど登録の際にDomainsを指定したと思いますが、今回はhtmlファイルをただ開いただけなので、「そこDomainsに入っていないぞ!!」ってことです。実際にはちゃんと指定したドメインでの使用が必須となります。 本来はこうなります。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-16-9-10-05

reCAPTCHAを認証する

画面に出すことはできましたが、これだけでは機能としては不十分。このreCAPTCHAの認証処理を行ってやる必要があります。先ほどの画面でreCAPTCHAのチェックボックスをクリックすると以下の情報が画面から送られてきます

g-recaptcha-response=JGFSWO49273_SADJBIRAUNGD98AU3-AJHDGN………

めちゃくちゃ長いresponseコードが送られてきます。ちなみに、もしチェックを入れなかった場合、空文字がresponseコードとして渡されます。このresponseコードをGoogleのAPIに送ることでGoogle大先生が認証を行ってくれます。アクセスするURLは以下のように。 https://www.google.com/recaptcha/api/siteverify?secret=[reCAPTCHA登録時のsecret-keyを入れる]&response=[画面から渡されたresponseコードを入力] これにアクセスすると、以下の形式でJSONが戻ってきます。

{
  "success": true|false,
  "challenge_ts": timestamp, 
  "hostname": string,      
  "error-codes": [...]        
}

認証成功か失敗かを判断するなら”success”のtrue/falseを判定すれば良いです。 ちなみに、error-codesには以下の種類があります。

error-code 原因
missing-input-secret APIにsecretを送っていない場合
invalid-input-secret APIに送ったsecretに誤りがあった場合
missing-input-response responseコードを送っていない場合
invalid-input-response APIに送ったresponseコードに誤りがあった場合

よくあるのが、チェックを入れ忘れてmissing-input-responseになることです。これでreCAPTCHAの認証完了です。こんなに簡単に実装ができるんです。

reCAPTCHAの各種設定

他にもreCAPTCHAは細かい設定があります。 例えば、以下のようにdata-themeを指定すると背景が黒くなったり

<div class="g-recaptcha" data-theme=dark data-sitekey=”[ここにsite-keyを入力する]”></div>

data-typeを指定することで画像じゃなくて音声で認証を行ったり

<div class="g-recaptcha" data-type=audio data-sitekey=”[ここにsite-keyを入力する]”></div>

他にもKey SettingのAdvanced Settingsでは認証機能の強弱を設定できたりします。 reCAPTCHAは、はじめのうちはチェックするだけで済むのですが、なんども失敗すると、画像の選択等が必要になったりと認証方法の強化が発生します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-02-15-9-51-54 こんな感じで非常に簡単に導入できるので、認証の脆弱性にお困りのあなた、ぜひ導入してみませんか。

それではこれにて、ではでは。

情報戦略テクノロジー