我想使用v3的内联徽章,但没有关于v3徽章位置的文档。
答案 0 :(得分:12)
您可以仅使用Javascript在V3中直接内嵌徽章,
将您的render
参数设置为explicit
并为回调添加一个onload
参数,例如onRecaptchaLoadCallback
。
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script>
然后像这样设置您的回调,并且不要忘记输入您想要将徽章放置到的id / DOM节点,在这种情况下,id为inline-badge
。
<script>
function onRecaptchaLoadCallback() {
var clientId = grecaptcha.render('inline-badge', {
'sitekey': '6Ldqyn4UAAAAAN37vF4e1vsebmNYIA9UVXZ_RfSp',
'badge': 'inline',
'size': 'invisible'
});
grecaptcha.ready(function() {
grecaptcha.execute(clientId, {
action: 'action_name'
})
.then(function(token) {
// Verify the token on the server.
});
});
}
</script>
答案 1 :(得分:5)
我只是像这样更改grecaptcha-badge类的CSS:
.grecaptcha-badge {
bottom:25px !important;
}
答案 2 :(得分:1)
EDIT1 :使用render=explicit
参数查看答案。这个答案仍然有效,但是在记录此功能之前还不够完善。
我已经做到了这一点,方法是放置一个相对的盒子,然后将reCaptcha v3徽章拆下。然后对容器进行一些样式调整。
#grecaptcha-box {
width: 260px;
overflow: hidden;
position: relative;
height: 75px;
}
#grecaptcha-box .grecaptcha-badge {
box-shadow: none !important;
}
然后放置该框,然后放置JavaScript。
<form>
<!-- Rest of your form here... -->
<input type="hidden" id="recaptcha-token" name="recaptcha-token">
<input type="hidden" id="recaptcha-action" name="recaptcha-action">
</form>
<div id="grecaptcha-box"></div>
<!-- Recaptcha v3 -->
<script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script id="js-recaptcha-init">
const RECAPTCHA_PUBLIC_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
grecaptcha.ready(function() {
// Remove badge from fixed place
var gb = document.getElementsByClassName("grecaptcha-badge")[0];
gb.style.position = 'absolute';
document.getElementById('grecaptcha-box').appendChild(gb.cloneNode(true));
gb.parentNode.removeChild(gb);
// Do the normal recaptcha things...
var grecaptcha_opts = {'action' : 'custom_action'};
grecaptcha.execute(RECAPTCHA_PUBLIC_KEY, grecaptcha_opts)
.then(function(token) {
document.getElementById('recaptcha-token').value = token;
document.getElementById('recaptcha-action').value = grecaptcha_opts.action;
});
});
</script>
答案 3 :(得分:1)
只需将其设置在div部分
<div vc-recaptcha
badge="bottomleft"
>
</div>
答案 4 :(得分:0)
执行后,您可以使用Javascript移动徽章。它将修复firefox和chrome浏览器中的Recaptcha超时错误。
text classification
答案 5 :(得分:0)
您可以将其包含在sass或css中,以在左侧对齐并保持悬停功能处于活动状态。
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}