将Invisible reCAPTCHA添加到现有联系表单中

时间:2017-04-26 07:25:25

标签: javascript html recaptcha

美好的一天!

要添加安全功能,我想将Invisible reCAPTCHA添加到我现有的表单中,在这种情况下是联系表单。

请参阅现有代码:

Traceback (most recent call last):
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\exception.py", line 39, in inner
    response = get_response(request)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\base.py", line 187, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\base.py", line 185, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\reversion\revisions.py", line 296, in do_revision_context
    return func(*args, **kwargs)
  File "C:\Users\Nurzhan\PycharmProjects\RMS\project\views.py", line 603, in requirement_add
    requirement.save()
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\db\models\base.py", line 796, in save
    force_update=force_update, update_fields=update_fields)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\db\models\base.py", line 833, in save_base
    update_fields=update_fields, raw=raw, using=using)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\dispatch\dispatcher.py", line 191, in send
    response = receiver(signal=self, sender=sender, **named)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\reversion\revisions.py", line 302, in _post_save_receiver
    add_to_revision(instance, model_db=using)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\reversion\revisions.py", line 212, in add_to_revision
    _add_to_revision(obj, db, model_db, True)
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\reversion\revisions.py", line 193, in _add_to_revision
    object_repr=force_text(obj),
  File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\utils\encoding.py", line 76, in force_text
    s = six.text_type(s)
TypeError: __str__ returned non-string (type __proxy__)
[26/Apr/2017 13:17:43] "POST /ru/account/dashboard/projects/cdecbd12-80d3-4ecd-9c08-8edef5d7f850/requirement_add/ HTTP/1.1" 500 18847

我试图从googlw re验证码网站插入代码,但它无法正常工作:

<script>
var blogId = '12345678901';
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>

<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>


<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

我是否需要在回调上指明函数或者我是否需要配置类和id ??

请帮忙!

1 个答案:

答案 0 :(得分:1)

您不应直接致电sendEmailMsg()。如Google documentation中所述,您必须在回调中调用您的函数:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
  function onSubmit(token) {
    sendEmailMsg();
  }
</script>

调用onSubmit功能,移除您的点击事件,并将Google所需的课程和数据放入您现有的提交按钮中:

<input class='g-recaptcha contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' data-sitekey='your site key' data-callback='onSubmit()'/>

以下是您的完整代码:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
  function onSubmit(token) {
    sendEmailMsg();
  }
</script>
<script>
  var blogId = '12345678901';
  var contactFormMessageSendingMsg = 'Sending...';
  var contactFormMessageSentMsg = 'Your message has been sent.';
  var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
  var contactFormEmptyMessageMsg = 'Message field cannot be empty.';
  var contactFormInvalidEmailMsg = 'A valid email is required.'

  var widgetLoaded = false;

  function sendEmailMsg() {
    if (widgetLoaded == false) {
      _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {
        'contactFormMessageSendingMsg': contactFormMessageSendingMsg,
        'contactFormMessageSentMsg': contactFormMessageSentMsg,
        'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg,
        'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg,
        'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg,
        'title': 'Contact Form',
        'blogId': blogId,
        'contactFormNameMsg': 'Name',
        'contactFormEmailMsg': 'Email',
        'contactFormMessageMsg': 'Message',
        'contactFormSendMsg': 'Send',
        'submitUrl': 'https://www.blogger.com/contact-form.do'
      }, 'displayModeFull'));
      widgetLoaded = true;
      document.getElementById('ContactForm1_contact-form-submit').click();
    }
    return true;
  }
</script>
<form name='contact-form'>
    <div>Your Name :</div>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' />
    <div>Your Email: <em>(required)</em></div>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' />
    <div>Your Message: <em>(required)</em></div>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
    <p></p>

    <input class='g-recaptcha contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' data-sitekey='your site key' data-callback='onSubmit()'/>


    <div style='text-align: center; max-width: 450px; width: 100%'>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
</form>