Question

我有一个简单的页面，该页面上有一个链接了链接变量的按钮，我想在该页面上添加一个Recaptcha验证，以使按钮只有在Recaptcha验证后才可见

<a id="cl-link" class="cl-link-button" href="<?php echo esc_url($url); ?>" rel="nofollow"><span></span></a>

完整代码：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>" />
        <meta name="robots" content="noindex">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src='https://www.google.com/recaptcha/api.js'></script>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel='stylesheet' id='link-single'  href='<?php echo DOO_URI,'/css/cl.css'; ?>' type='text/css' media='all' />
    </head>
    <body>  
	
	
    <a id="cl-link" class="cl-link-button" href="<?php echo esc_url($url); ?>" rel="nofollow"><span></span></a>


	
	
	
	</body>
</html>

Answer 1

如果您使用Java脚本渲染Recaptcha组件，则在成功验证Recaptcha后将触发一个函数。

因此，对于Recaptcha v3：

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
  grecaptcha.ready(function() {
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
         $("#cl-link").show();
      });
  });
</script>

或者，如果您使用的是Recaptcha v2和html，则可以使用属性data-callback向组件添加回调函数。

<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="xxxxx"></div>

在您的Javascript中：

<script type="text/javascript">
    function recaptcha_callback(){
      $('#cl-link').show();
    }
</script>

我假设您的网页中有用于显示按钮的JQuery。如果没有，则应使用本机Javascript显示按钮。

如果Recaptcha成功，则在回调上启用按钮（Google Recaptcha v2）

1 个答案: