google recaptcha使用

Posted 2023-05-03

参考技术A 3.2. 如果你是在模块化的的项目中使用。可以按需动态加载recaptcha 脚本。并手动渲染验证码

运行结果

验证通过

遗留了一个问题：
这个验证通过客户端完全可以做了。但是我们用验证码的目的是为了防止api攻击。这里只是介绍了客户端使用google recaptcha展示验证码的功能，具体服务端提供的api如何校验，需要客户端和服务端再协商。
比如：验证码校验通过后,把验证通过的g-recaptcha-token传给服务端并保存，然后在调用api的地方把该token带上，给服务端做校验。这才能体现出验证码的作用来。【这只是我个人的建议方案。有更好的解决方案欢迎在留言里分享。感谢】

html Google Recaptcha - 应该使用此网站密钥在任何pagedemo.co页面上工作。示例：http：//recaptcha.pagedemo.co/

<!-- START code for captcha HTML- Header -->
<style type="text/css">
#RecaptchaField1 {
  transform:scale(1.00);
  -webkit-transform:scale(1.00);
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
</style>

<script>
    var label = 'Recaptcha';
    
    $(document).ready(function() {
        $('input[name="' + window.btoa(label) + '"]').val('0');
        console.log($('input[name="' + window.btoa(label) + '"]').val());

        ijQuery.validator.addMethod('captcha', function(value, element) {
            if (value.match('1')) {
                return true;
            } else {
                return false;
            }
        });
        ijQuery('form [name="' + base64_encode(label) + '"]').addClass('captcha');
        ijQuery.extend(ijQuery.validator.messages, {
            captcha: 'field: Please submit captcha first.'
        });
    }); //ready

    var recaptchaCallback = function() {
        $('input[name="' + window.btoa(label) + '"]').val('1');
        console.log($('input[name="' + window.btoa(label) + '"]').val());
    };

    var widgetId1;
    var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.

        widgetId1 = grecaptcha.render('RecaptchaField1', {
            'sitekey': '6Lcf4yQTAAAAAGDuW4gvzahRiaFXadFUQHhcdvJc',
            'callback': recaptchaCallback,
            'theme': 'light'
        });
    };
</script>
<!-- END code for captcha HTML- Header -->

<!-- START code for captcha HTML- Footer -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<!-- END code for captcha HTML- Footer -->

<div id="RecaptchaField1"></div>

<style type="text/css">
#RecaptchaField1 {
  transform:scale(1.20);
  -webkit-transform:scale(1.20);
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
  #RecaptchaField2 {
  transform:scale(1.20);
  -webkit-transform:scale(1.20);
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
</style>

<script>
	$( document ).ready( function() {
    	$( ".email-form .dynamic-button.btn" ).attr( "disabled", " " );
	}); //ready

  	var recaptchaCallback = function() {
    	console.log('calling back');
    	$( '.dynamic-button.btn' ).removeAttr( 'disabled' );
    };
  
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        
      widgetId1 = grecaptcha.render('RecaptchaField1', {
          'sitekey' : '6Lcf4yQTAAAAAGDuW4gvzahRiaFXadFUQHhcdvJc',
          'callback' : recaptchaCallback,
          'theme' : 'light'
        });
        
      widgetId2 = grecaptcha.render('RecaptchaField2', {
          'sitekey' : '6Lcf4yQTAAAAAGDuW4gvzahRiaFXadFUQHhcdvJc',
          'callback' : recaptchaCallback,
          'theme' : 'light'
        });
      };

</script>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>


<div id="RecaptchaField1"></div>


<div id="RecaptchaField2"></div>

<style>
    .g-recaptcha {
        transform:scale(0.90); //customise width
        transform-origin:0 0;
      	z-index: 11500000 !important; //z-index for pop-up
    }
</style>

<script>
	$( document ).ready( function() {
    	$( ".email-form .dynamic-button.btn" ).attr( "disabled", " " );
	}); //ready
  
  	function recaptchaCallback() {
    	console.log('calling back');
    	$( '.dynamic-button.btn' ).removeAttr( 'disabled' );
    }
</script>

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

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6Lcf4yQTAAAAAGDuW4gvzahRiaFXadFUQHhcdvJc"></div>