recaptcha - 如何使用reCAPTCHA v3设置徽章位置？

Question

我想在v3中使用嵌入式徽章，但是没有关于v3徽章位置的文档。

Answer 1

您可以仅使用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>

Example

Source

注意: 'badge'的有效值为 'inline'， 'bottomleft'， 'bottomright'和 'bottom'。 'bottom'和 'bottomright'是同义词。