カテゴリー: Web開発

• Python の CGI で reCAPTCHA v2 を使う

以前に reCAPTCHA v2 の導入記事を書きましたが、今回は reCAPTCHA v3 です。v2 の画像選択が手間になってきて、よりシンプルに扱える v3 に更新しようと思ったのがきっかけです。

チェックボックスにチェックする v2 と異なり、v3 はフォームに埋め込むものがありません。JavaScript で token を取得するところまでは一緒なのですが、その token を自分でフォームに埋め込む必要があります。

reCAPTCHA への登録の仕方は v2 も v3 も同じなので、前回の記事に譲ります。

クライアントサイド

head 要素内に次のコードを埋め込みます。

<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>

SITE_KEY の部分は各々発行されたものに置換えてください。

次に、どこでも良いので次のコードを埋め込みます。head 要素内でも良いですし、body の最後でも問題ありません。

<script>
grecaptcha.ready(function() {
  grecaptcha.execute('SITE_KEY', {action: 'action_name'})
  .then(function(token) {
    document.getElementById('g-recaptcha-response').value = token;
  });
});
</script>

‘action_name’ は名前分けしておくと、admin console で分析が行えるようです。

最後に、フォーム要素の中に次の隠し要素を埋め込んでおきます。

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">

先ほどの JavaScript が実行されると、token がこの要素の value に入ります。

サーバーサイド (Python2)

今回はお手軽さで cgi.FieldStorage() と urllib を使います。

import cgi
import urllib, urllib2
import json

# フォームの取得
form = cgi.FieldStorage()

# g-recaptcha-responseの値を取得
response = form.getfirst('g-recaptcha-response', '')

# APIに照合を行う
params = urllib.urlencode({'secret': SECRECT_KEY, 'response': response})
req = urllib2.Request('https://www.google.com/recaptcha/api/siteverify', params)
result = json.loads(urllib2.urlopen(req).read())

返ってくる json には次の値が含まれています。

{u'action': u'action_name', u'score': 0.9, u'hostname': u'kuratsuki.net', u'challenge_ts': u'2018-12-06T06:51:20Z', u'success': True}

success

True|False 正しい token が送られたかどうかの判定

score

0.0-1.0 bot(0.0) に近いか人間(1.0)に近いかを数値で表します

action

string action 名

challenge_ts

yyyy-MM-dd’T’HH:mm:ssZZ タイムスタンプ

hostname

string reCAPTCHA が行われたホスト名

error-codes

[] エラーがあったときのエラーのリスト

サーバーサイドではこの score を用いて処理を分岐させれば良いようです。

参考

• reCAPTCHA v3  | reCAPTCHA
• php – How to Verify Google Recaptcha V3 Response – Stack Overflow

$ localectl
   System Locale: n/a
       VC Keymap: n/a
      X11 Layout: us
       X11 Model: pc105
$ localectl list-locales
C.UTF-8
en_US.utf8
$ sudo localectl set-locale LANG=en_US.UTF-8
$ localectl
   System Locale: LANG=en_US.UTF-8
       VC Keymap: n/a
      X11 Layout: us
       X11 Model: pc105

Python の WSGI プログラムで出力をするたび

yield '<h1>テスト</h1>'.encode('utf-8')
yield '<p>あいうえお</p>'.encode('utf-8')

と encode(‘utf-8’) を付けていましたが、どう考えてもこれは手間だし無駄な気がします。Flask を使えばいいと言われたらお終いなので、何か手はないかと考えてみました。

Python にはデコレータ(decorator) という仕組があって、任意の関数の前後に好きな処理を追加することができます。関数も第一級オブジェクトである Python の特性をうまく利用した素敵機能ですね。

yield を扱った decorator の例があまり見つからなくてやや苦戦しましたが、次のような decorator で実際に動作することを確認しました。

def encode_utf8(func):
	def wrapper(*args, **kwargs):
		for r in func(*args, **kwargs):
			yield r.encode('utf-8')
	return wrapper

前回の WSGI でフォームを扱うプログラムに適用させてみたのが次のコードです。

# coding: utf-8

from urllib.parse import parse_qsl

def encode_utf8(func):
	def wrapper(*args, **kwargs):
		for r in func(*args, **kwargs):
			yield r.encode('utf-8')
	return wrapper

@encode_utf8
def application(env, res):
	res('200 OK', [('Content-type', 'text/html; charset=utf-8')])

	# Form
	yield '<form method="get" accept-charset="UTF-8"><p><input type="text" name="get" value=""><input type="submit" value="GET"></form>'
	yield '<form method="post" accept-charset="UTF-8"><p><input type="text" name="post" value=""><input type="submit" value="POST"></form>'

	# Request method
	method = env.get('REQUEST_METHOD')
	yield '<p>Method: {}</p>'.format(method)

	# Get query string
	if method == 'POST':
		wsgi_input = env['wsgi.input']
		query = wsgi_input.read(int(env.get('CONTENT_LENGTH', 0))).decode('utf-8')
	else:
		query = env.get('QUERY_STRING', '')
	yield '<p>Query: {}</p>'.format(query)

	# Output form fields
	form = parse_qsl(query)
	for k, v in form:
		yield '<p>{} = {}</p>'.format(k, v)

行数は変らないのでぱっと見の変化少ないですが、書き忘れて Internal Server Error をもらう率は少し減りますね。

TL; DR

POST

query = env['wsgi.input'].read(int(env.get('CONTENT_LENGTH', 0))).decode('utf-8')

GET

query = env.get('QUERY_STRING', '')

parse and split

# dictionary
form = urllib.parse.parse_qs(query)
# list
form = urllib.parse.parse_qsl(query)