Я хотел бы использовать встроенный значок с v3, но нет документации по позиции значка для v3.
Как установить положение значка с помощью reCAPTCHA v3?
Ответ 1
Вы можете сделать значок встроенным в V3 только с помощью Javascript, который пока не задокументирован.
Установите explicit
параметр render
и добавьте параметр onload
для обратного вызова, например, onRecaptchaLoadCallback
.
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script>
Затем настройте свой обратный вызов следующим образом, и не забудьте ввести узел id/DOM, в который вы хотите поместить свой значок, в этом случае идентификатор - 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>
Ответ 2
Я просто изменяю CSS для класса grecaptcha-badge следующим образом:
.grecaptcha-badge {
bottom:25px !important;
}
Ответ 3
РЕДАКТИРОВАТЬ1: Смотрите ответ, используя параметры 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>
Ответ 4
После выполнения вы можете переместить значок с помощью Javascript. Это исправит ошибку тайм-аута recaptcha в браузерах Firefox и Chrome.
grecaptcha.ready(function() {
grecaptcha.execute('sitekey', {actienter code hereon: 'loginpage'}).then(function(token) {
/* Move Google Badge to your Div ID */
jQuery('.grecaptcha-badge').appendTo("#g-badge-newlocation");
});
});
Ответ 5
Вы можете включить это в свой 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;
}
Ответ 6
Просто установите его в разделе div
<div vc-recaptcha
badge="bottomleft"
>
</div>