javascript - 如果 recaptcha 成功,则启用回调按钮(Google recaptcha v2)
问题描述
我有一个简单的页面,其中有一个链接变量链接到它的按钮,我想向页面添加一个 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>
解决方案
如果您使用 Javascript 呈现 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 来显示按钮。
推荐阅读
- c++ - qtvars_Win32_Debug.props。什么是以及如何停止自动生成
- python - 不会出现空闲设置窗口
- javascript - Echarts - 从工具提示中排除系列
- node.js - 提交登录表单时无法对未安装的组件执行 React 状态更新
- javascript - 需要 Node js Query 来删除 Mongodb 中的重复项
- bash - 云外壳终端中的 gcp bash 脚本
- bash - How to execute WSL command with preloaded ".bash_aliases" from powershell
- java - How to terminate Camunda running process?
- three.js - 使用单个 AnimationClip 从网格(GLTF/FBX)管理动画
- python - TensorFlow 2.5 Mac M1 - 安装与 NumPy 库/Conda env 的兼容性问题