标签: react-google-recaptcha

我正在尝试在类型脚本项目中reCaptcha从react-google-recaptcha中实现不可见

我添加了包的类型

yarn add @types/react-google-recaptcha

但是当我想实现该组件时，我在这里收到类型脚本错误

  <ReCAPTCHA
        ref={recaptchaRef} // IN HERE
        size="invisible"
        sitekey="Your client site key"
      />

这是错误的内容

 Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<ReCAPTCHA> | undefined'.''
 Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<ReCAPTCHA>'.
 Types of property 'current' are incompatible.

Run Code Online (Sandbox Code Playgroud)

当表单验证失败时，我需要重置验证码，否则我似乎无法再次提交表单。但是，当调用重置时，我收到错误“无法读取 null 的属性‘样式’”

import ReCAPTCHA from "react-google-recaptcha";

const MyComponent = () => {
  const recaptchaRef = React.useRef();
  const onSubmit = async (data) => {
     const token = await recaptchaRef.current.executeAsync();
    try {
      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/tour`,
        {
          firstName: data.firstName,
          lastName: data.lastName,
          token: token,
        }
      );
      if (response.status === 201) {
        router.push("../thank-you");
      }
    } catch (err) {
      recaptchaRef.current.reset();
      setError(err.response.data);
    }
  }
}

我正在尝试将 reCAPTCHA 包含在我正在开发的 React 应用程序中，并使用 Next.js 作为服务器端功能。

我认为我从根本上对 reCAPTCHA Enterprise 感到困惑。

以前使用 reCAPTCHA 注册域的“免费”方式是为用户提供一个公共 reCAPTCHA 密钥和一个用于后端的私有 reCAPTCHA 密钥。这是通过使用 Google 的 reCAPTCHA v3 通过“管理员”在https://www.google.com/recaptcha/admin/create注册的。

鉴于我有 GCP 帐户，我会被重定向到 reCAPTCHA Enterprise API。这里只有一把钥匙可用。reCAPTCHA Enterprise 中是否没有可使用的密钥？

如果是这样，如何使用它？现在没有私钥了吗？

我正在react-google-recaptchaNext.js 上使用一个简单的联系表单。可以使用一个按钮来切换应用程序主题，该按钮触发一个函数，将“dark”作为类附加到 html 并在 localStorage 中添加一个变量。我如何才能更新验证码？

问题是要检查暗模式，我需要访问以window检查 html 附加类或localStorage检索我在主题开关上附加的暗模式值。这意味着我只能使用componentDidMount仅触发一次的生命周期方法。(SSR)

我需要一些可以在上述任何一个值发生更改并重新安装组件时动态注入主题字符串的东西。这是Captcha.jsx我要导入到我的contact.jsx页面中的组件。

import React, { Component } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export default class Captcha extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'light',
    };
  }

  componentDidMount() {
    const darkmode = document.querySelector('html').classList.contains('dark');
    if (darkmode) {
      this.setState({ theme: 'dark' });
    } else {
      this.setState({ theme: 'light' });
    }
  }

  render() {
    return <ReCAPTCHA theme={this.state.theme} />;
  }
} …

使用react-google-recaptcha-v3执行

await executeRecaptcha("contact");

某些浏览器上的超时。我不确定根本原因是否在存储库（问题）或上游，因为它只在某些浏览器配置中失败。非常感谢任何帮助。

我们目前面临 Google reCaptcha V3 隐身实施的问题。它在标准浏览器模式下运行良好。

问题是，当您在隐身模式下填写表单时，Recaptcha 分数始终低于 0.5，因此 Recaptcha 不允许\xe2\x80\x99 提交表单。如果我们在 \xe2\x80\x9cnormal\xe2\x80\x9d 模式下使用浏览器，则表单将毫无问题地提交。我们想知道隐身模式是否会对 ReCaptcha 构成机器人威胁，并且会给填写表单的用户带来低分。

我们试图解决的两个问题

\n
1. 这是隐身浏览器模式下 reCaptcha 的标准功能吗？
\n
2. 还有其他解决方法可以解决这个问题吗？
\n

任何帮助，将不胜感激。谢谢。

React-google-recaptcha 版本：2.0.0-rc.1

我在重置验证码时遇到问题

我正在使用功能组件

代码摘录如下

// imports etc.. here
const Login: NextPage = (props:any) => {

// othere initializations here...

const recaptchaInputRef:any = React.createRef();

const handleSubmit = async (event) => {

      // some if condition
     // and else
     // and inside there
     recaptchaInputRef.current.reset();

}

return (
        <React.Fragment>

               <form onSubmit={e => handleSubmit(e)}>

               // other components and elements

              <ReCAPTCHA
                 ref={recaptchaInputRef}
                 sitekey={props.recaptchaKey}
                 onChange={ onChange }
                 onExpired={ onExpired }
                 />

              <Button type="submit">Sign In</Button>
              </form>
        </React.Fragment>
);

现在的问题是，我得到 - Cannot read property 'reset' of null …

我想在我的 vuetify 项目中添加 google recaptcha 3

谷歌 recaptcha 3 像这样：

我从这里得到参考：https : //www.npmjs.com/package/vue-recaptcha-v3

第一：我跑 npm install vue-recaptcha-v3

第二：我像这样修改我的 main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.config.productionTip = false
Vue.use(VueReCaptcha, {
  siteKey: '<site key>',
  loaderOptions: {
    useRecaptchaNet: true
  }
})

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  methods: {
    recaptcha() {
      this.$recaptcha('login').then((token) => {
        console.log(token) // …

react-recaptcha-google我已按照此处的示例安装并添加到我的应用程序： https://medium.com/codeep-io/how-to-use-google-recaptcha-with-react-38a5cd535e0d

但什么也没有出现，没有错误，什么也没有。

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { ReCaptcha } from 'react-recaptcha-google';

class MyComponent extends Component {
    constructor(props, context) {
        super(props, context);

    componentDidMount() {
        this.getProducts();

        if (this.captchaDemo) { // <- this is getting skipped
            console.log("started, just a second...")
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    onLoadRecaptcha() {
        if (this.captchaDemo) {
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    verifyCallback(recaptchaToken) {
        // Here you will get the final recaptchaToken!!!  
        console.log(recaptchaToken, "<= your recaptcha token")

    render() {
        return (
            <div …

我正在尝试让隐形的react-google-recaptcha、Formik和yup一起工作。文档说我们应该调用recaptchaRef.current.execute()表单提交，但是如果我们同时使用 Formik 和 yup，只有在所有字段都通过验证模式后才会触发提交逻辑。

基本上，我们需要调用该execute方法，更新验证码值并使用相同的触发事件提交表单。我的问题正是这样：我必须使用两个事件（一个用于方法execute并更新验证码+一个用于提交表单）。

检查此沙箱：https://codesandbox.io/s/keen-mahavira-ont8z? file=/src/App.js

正如您所看到的，只有第二次单击提交按钮才能提交表单...

我正在使用库react-google-recaptcha-v3将 reCAPTCHA v3 集成到我的 React 应用程序中，该应用程序也使用 Next。

自述文件中有以下示例向用户介绍该useGoogleReCaptcha挂钩：

import {
  GoogleReCaptchaProvider,
  useGoogleReCaptcha
} from 'react-google-recaptcha-v3';

const YourReCaptchaComponent  = () => {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const token = executeRecaptcha("login_page");

  return (...)
}

ReactDom.render(
  <GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
    <YourReCaptchaComponent />
  </GoogleReCaptchaProvider>,
  document.getElementById('app')
);

我很困惑我应该如何使用const token = executeRecaptcha("login_page"). 我目前不明白开发人员应该如何使用它token。是否没有与此令牌关联的“分数”，从而禁止潜在的机器人使用该页面？

如何验证此令牌并使用它？任何帮助表示赞赏。

我正在使用 ReCAPTCHA 版本 V2。在回调函数（即data-callback）上，我收到以下错误消息。

ReCAPTCHA 找不到用户提供的函数：函数（响应）

现在，我在网上看到的大多数帖子/解决方案都与本地回调函数相关，当在g-recaptcha div 的data-callback属性中引用时，该函数不会被调用。但是，就我而言，即使是内联函数也不会被调用。请看下面的图片。

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="function (response) { alert('working: ', response);}"></div>

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="Window.alert('hi');"></div>