1

フォーム内の recaptcha をカスタマイズしようとしていますが、javascript エラーしか発生しません。作成できますか、それとも Flask-WTF コードを自分で変更する必要がありますか?

4

3 に答える 3

2

bbenne10 の例は、1 つの小さな詳細を除いて、ほぼそれをtheme: 'custom'実行します: config に入れるだけでなく、custom_theme_widget: 'recaptcha_widget'. または、実際の画像が挿入されるコンテナのIDになり、もちろんコンテナがhtmlに存在する必要があります。

したがって、最終的な構成は次のようになります。

RECAPTCHA_PUBLIC_KEY = 'key'
RECAPTCHA_PRIVATE_KEY = 'secret'
RECAPTCHA_OPTIONS = dict(
    theme='custom',
    custom_theme_widget='recaptcha_widget'
)

つまり、文書化されていないオプションでオーバーライドできるハードコードされたテンプレートがあるということです。RECAPTCHA_TEMPLATEそこに好きなものを入れると、recaptcha がサポートするすべてのテーマのベースとして使用されます。

もう 1 つのオプションは、 HTML を構成にハードコーディングする代わりに、好きなテンプレートを使用してカスタムに指示できるように、カスタムから拡張しRecaptchaFieldて使用することです。RecaptchaWidgetflask.render_template()

于 2015-02-18T15:44:35.537 に答える
1

実際、これを非常に簡単に行うことができます。RECAPTCHA_OPTIONSまず、ディクショナリに設定 (または拡張)して{'theme': 'custom'}(そして、実行または類似していることを確認して)、テンプレートに、ここapp.config.from_object(__name__)にあるカスタム テーマ セクションで指定された必要な DOM 要素がすべて含まれていることを確認します。

最近のサイトの例:

# IN YOUR MAIN PYTHON FILE 
RECAPTCHA_OPTIONS = {'theme': 'custom'}
RECAPTCHA_PRIVATE_KEY = 'private_key'
RECAPTCHA_PUBLIC_KEY = 'public_key'
app = Flask(__name__)
app.config.from_object(__name)


# IN THE TEMPLATE (THIS USES TWITTERBOOTSTRAP'S FORM FORMATTING)
<div class='control-group' id='recaptcha_wrapper'>
<label class='control-label'>Enter the words above:</label>
<div class='controls'>
    <input type='text' id='recaptcha_response_field'></input>
    <a id="recaptcha_reload" class="btn" href="javascript:Recaptcha.reload()"><i class="icon-refresh"></i></a>
    <a class="btn recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">
        <i title="Get an audio CAPTCHA" class="icon-headphones"></i></a>
    <a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">
        <i title="Get an image CAPTCHA" class="icon-picture"></i></a>
    <a class="btn" href="javascript:Recaptcha.showhelp()"><i class="icon-question-sign"></i></a>
    # This causes wtf-forms to drop in the js that populates the above elements
    {{ form.recaptcha() }}
</div>
</div>
于 2013-10-01T15:02:01.220 に答える