Reactjs 反应并重新捕获TCHA v3

在react中有没有简单的方法可以使用reCAPTCHA v3？做了谷歌搜索，只能找到v2的组件。对于v3，只使用react-recaptcha-v3

但是，当我尝试使用该组件时，我收到一个错误：站点密钥无效或未加载到api.js中。

试试这个！

---

npm安装react-google-recaptcha-v3

嘿，你不需要软件包，它只是一个你不需要的不必要的软件包。 我写了一篇关于为什么不应该使用它和另一个软件包的文章。 不要依赖某个包裹！改用谷歌：）

const handleload=\u=>{
window.grecaptcha.ready（=>{
window.grecaptcha
.execute（“\u reCAPTCHA\u site\u key”，{action:“homepage”}）
。然后（令牌=>{
// ...
})
})
}
useffect（（）=>{
//添加reCaptcha
常量脚本=document.createElement（“脚本”）
script.src=”https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"
script.addEventListener（“加载”，手动加载）
document.body.appendChild（脚本）
}, [])
返回(
)

我正在自学React+TypeScript，这就是我为实现recaptcha v3而想到的

我想要一个简单的解决方案，使我能够：

• 仅在提交表单时动态获取令牌，以避免超时和重复令牌错误
• 出于隐私原因（例如登录、注册、忘记密码），仅在某些组件上使用recaptcha，而不是在index.html中全局定义recaptcha api.js
• 需要尽可能少的代码在组件中实现

reCAPTCHA.ts

declare global {
    interface Window {
        grecaptcha: any;
    }
}

export default class reCAPTCHA {
    siteKey: string;
    action: string;

    constructor(siteKey: string, action: string) {
        loadReCaptcha(siteKey);
        this.siteKey = siteKey;
        this.action = action;
    }

    async getToken(): Promise<string> {
        let token = "";
        await window.grecaptcha.execute(this.siteKey, {action: this.action})
            .then((res: string) => {
                token = res;
            })
        return token;
    }
}

const loadReCaptcha = (siteKey: string) => {
    const script = document.createElement('script')
    script.src = `https://www.recaptcha.net/recaptcha/api.js?render=${siteKey}`
    document.body.appendChild(script)
}

并在表单提交中获取需要传递到后端的令牌：

let token: string = await this.recaptcha.getToken();

要在后端验证令牌，请执行以下操作：

recaptcha.ts

const fetch = require("node-fetch");
const threshold = 0.6;

export async function validateRecaptcha(recaptchaToken: string, expectedAction: string) : Promise<boolean> {
    const recaptchaSecret = process.env.RECAPTCHA_SECRET_KEY;
    const url = `https://www.recaptcha.net/recaptcha/api/siteverify?secret=${recaptchaSecret}&response=${recaptchaToken}`;
    let valid = false;
    await fetch(url, {method: 'post'})
        .then((response: { json: () => any; }) => response.json())
        .then((data: any)=> {
            valid = (data.success && data.score && data.action && data.score >= threshold && data.action === expectedAction);
        });
    return valid;
}

const fetch=require（“节点提取”）；
常数阈值=0.6；
导出异步函数validateRecaptcha（recaptchaToken:string，expectedAction:string）：承诺{
const repactchasecret=process.env.repactcha\u SECRET\u KEY；
常量url=`https://www.recaptcha.net/recaptcha/api/siteverify?secret=${repactchasecret}&response=${repactchatoken}`；
设有效=假；
等待获取（url，{method:'post'}）
.then（（response:{json:（）=>any；}）=>response.json（））
。然后（（数据：任意）=>{
有效=（data.success&&data.score&&data.action&&data.score>=阈值&&data.action==预期操作）；
});
返回有效；
}

---

我在JS/TS和React方面的经验非常有限，但这个解决方案确实适合我。我欢迎任何关于改进此代码的意见。

您能发布您的实现代码吗？谢谢-我正在尝试在没有软件包的情况下实现此功能。但是，不清楚如何实现您在这里发布的内容。这个代码到哪里去了？何时调用它，如何验证表单？您的代码中没有表单，我无法理解此代码在没有表单的情况下是如何执行任何操作的。我的理解是v3也需要服务器端调用，我在这里看不到这些。你能解释一下吗？很好的回复和帖子。很多时候，你会发现有人只是在链接一个npm包——通常自己做一些事情是最好的选择。谢谢你的代码示例。是的，你完全正确。在这种情况下，npm包真的是不必要的。是否可以分享关于如何使用此组件（看起来像您概述了一个组件）的更多详细信息？例如：它如何与每个表单提交集成，比如登录或其他表单相关提交？我假设每种形式都有不同的作用？

let token: string = await this.recaptcha.getToken();

const fetch = require("node-fetch");
const threshold = 0.6;

export async function validateRecaptcha(recaptchaToken: string, expectedAction: string) : Promise<boolean> {
    const recaptchaSecret = process.env.RECAPTCHA_SECRET_KEY;
    const url = `https://www.recaptcha.net/recaptcha/api/siteverify?secret=${recaptchaSecret}&response=${recaptchaToken}`;
    let valid = false;
    await fetch(url, {method: 'post'})
        .then((response: { json: () => any; }) => response.json())
        .then((data: any)=> {
            valid = (data.success && data.score && data.action && data.score >= threshold && data.action === expectedAction);
        });
    return valid;
}