我认为“隐形”reCAPTCHA文档不够全面。在理解如何使用它之前,我不得不花费一些时间查看“可见”reCAPTCHA的代码示例和文档。
首先让我们谈谈reCAPTCHA API:
grecaptcha.render(htmlEl, options, inherit)
是JS API渲染验证码HTML的方法。默认情况下,reCAPTCHA脚本将尝试查找任何具有class="g-recaptcha"
的元素并立即渲染,但可以通过向reCAPTCHA脚本src url追加?render=explicit
查询参数来覆盖此行为。当您的reCAPTCHA .g-recaptcha
元素在DOM中附加到稍后时,您还可以使用此API按需渲染reCAPTCHA html。此API返回一个ID值,可传递给其他API方法,但如果不传递,则这些API会查找并引用页面上的第一个reCAPTCHA。
grecaptcha.getResponse(optional_id)
返回令牌。如果令牌为空字符串,则表示用户尚未通过验证码验证,即用户尚未完成验证码挑战。
grecaptcha.execute(optional_id)
api以编程方式按需触发reCAPTCHA挑战。此API仅适用于“隐形”reCAPTCHA。单击reCAPTCHA模块时,可见的reCAPTCHA挑战会被触发。
grecaptcha.reset(optional_id)
将重置挑战,即每次服务器未能使用reCAPTCHA API服务器验证令牌时都必须执行此操作(因为令牌是一次性使用),但根据您的实现,您可以随时决定重置。
现在,让我们谈谈data-callback:
data-callback
是一个属性,您可以通过该属性传递全局命名空间函数的名称,即某个作为window['nameOfFunction']可访问的函数。每次用户成功使用最终将传递给服务器的令牌值进行验证时,都会调用此回调。这与grecaptcha.getResponse()
返回的相同令牌,因此从技术上讲,您根本不需要此函数。但是,在需要更新UI或其他内容时,它可以作为回调用于让您知道用户已经通过验证。
如果由于某种原因您不希望从窗口命名空间中访问此回调,则可以将此方法作为grecaptcha.render()
中的选项对象中的callback
键传递。注意:options.callback
可以采用字符串值,该值等效于在HTML中传递data-callback
属性,即它必须是窗口命名空间中的函数。但是,options.callback
也可以采用“function”值。
现在是一些示例代码:
HTML
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
JS
window.onScriptLoad = function () {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: '6Lck',
size: 'invisible',
callback: window.onUserVerified
};
var inheritFromDataAttr = true;
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};
window.onUserVerified = function (token) {
alert('User Is verified');
console.log('token=', token);
};
function onSubmitBtnClick () {
var token = window.grecaptcha.getResponse(recaptchaId);
if (!token) {
window.grecaptcha.execute(recaptchaId);
return;
}
var xhrData = {
'g-recaptcha-response': token
};
}
data-badge
属性或grecaptcha.render()
中的options.badge
选项。尝试options.badge =“inline”
。一旦内联,您可以尝试应用自己的CSS进行配置。否则,您可以使用值bottomright
将该图标移动到相反的角落。 - codneto