feat: support reCAPTCHA v3 captcha provider (#3160)

* feat: support reCAPTCHA v3 captcha provider

* fix: modify the implementation of row component style in CaptchaModal.js
This commit is contained in:
ZhaoYP 2001
2024-09-02 22:15:03 +08:00
committed by GitHub
parent 9b33800b4c
commit d4c8193357
4 changed files with 43 additions and 3 deletions

View File

@ -27,7 +27,8 @@ export const CaptchaWidget = (props) => {
useEffect(() => {
switch (captchaType) {
case "reCAPTCHA": {
case "reCAPTCHA" :
case "reCAPTCHA v2": {
const reTimer = setInterval(() => {
if (!window.grecaptcha) {
loadScript("https://recaptcha.net/recaptcha/api.js");
@ -42,6 +43,32 @@ export const CaptchaWidget = (props) => {
}, 300);
break;
}
case "reCAPTCHA v3": {
const reTimer = setInterval(() => {
if (!window.grecaptcha) {
loadScript(`https://recaptcha.net/recaptcha/api.js?render=${siteKey}`);
}
if (window.grecaptcha && window.grecaptcha.render) {
const clientId = window.grecaptcha.render("captcha", {
"sitekey": siteKey,
"badge": "inline",
"size": "invisible",
"callback": onChange,
"error-callback": function() {
const logoWidth = `${document.getElementById("captcha").offsetWidth + 40}px`;
document.getElementsByClassName("grecaptcha-logo")[0].firstChild.style.width = logoWidth;
document.getElementsByClassName("grecaptcha-badge")[0].style.width = logoWidth;
},
});
window.grecaptcha.ready(function() {
window.grecaptcha.execute(clientId, {action: "submit"});
});
clearInterval(reTimer);
}
}, 300);
break;
}
case "hCaptcha": {
const hTimer = setInterval(() => {
if (!window.hcaptcha) {

View File

@ -115,7 +115,7 @@ export const CaptchaModal = (props) => {
} else {
return (
<Col>
<Row>
<Row justify={"center"}>
<CaptchaWidget
captchaType={captchaType}
subType={subType}