szchenghuang / react-google-invisible-recaptcha Goto Github PK

The "protected by..." badge should be not hidden by default as it may be against Google's terms.

See:
https://tehnoblog.org/google-no-captcha-recaptcha-first-experience-results-review/
https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge/44543771

The display: none should be removed or changed to 'inline' in index.js
https://github.com/szchenghuang/react-google-invisible-recaptcha/blob/master/src/index.js

const style = { display: 'none', ...this.props.style };

If I implement your example in my project, it says that the reference stored in this.recaptcha has no execute() function. If I log the reference object, there is really no property execute and also no property reset or getResponse.

import Recaptcha from 'react-google-invisible-recaptcha';

<Recaptcha ref={ref => this.recaptcha = ref} sitekey="<mykey>" onResolved={this.onResolved.bind(this)} />

onSubmit(e) {
        e.preventDefault();
        console.dir(this.recaptcha)
        this.recaptcha.execute();
}

onResolved() {
        alert('Recaptcha resolved with response: ' + this.recaptcha.getResponse());
}

I tried this... but doesn't seem to be working:

import React from 'react';
import { useForm } from 'react-hook-form';
import { ReCaptcha, loadReCaptcha } from 'react-recaptcha-v3';

const verifyCallback = token => {
  console.log(token, 'verifycallback')
}

export const FormScreen = () => {
  const emailRegx=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  const { register, handleSubmit, errors, formState } = useForm({ mode: 'onChange' });
  const onSubmit = (data) => {
    console.log(data);
  }
  const componentDidMount = () => {
    loadReCaptcha('6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo')
  }


  return (
    <div className="widget-container">

      <div className="container pt-4">
        <div className="row">
          <div className="col-12">
            <form onSubmit={handleSubmit(onSubmit)} autoComplete="off" noValidate>
              <div className="form-row">

                <div className="col-sm-6 mb-3">
                  <label htmlFor="subject">Nombre</label>
                  <input
                    type="text"
                    id="firstname"
                    name="firstname"
                    ref={register({ required: true, minLength: 2 })}
                    className={`form-control ${errors.firstname && 'is-invalid'} form-control-lg`}
                    />
                  {
                    errors.firstname &&
                    (<div className="invalid-feedback d-block">
                      {
                        errors.firstname.type === 'required' && 'Este campo es obligatorio' ||
                        errors.firstname.type === 'minLength' && 'Debe introducir como mínimo dos caracteres'
                      }
                    </div>)
                  }
                </div>

                <div className="col-sm-6 mb-3">
                  <label htmlFor="company">Empresa</label>
                  <input
                    type="text"
                    id="company"
                    name="company"
                    ref={register({ required: false })}
                    className="form-control form-control-lg"
                    autoComplete="off"/>
                </div>

              </div>

              <div className="col-12 mt-4">  
                <div className="text-center">
                  <button
                    type="submit"
                    id="sendContactButton"
                    disabled={!formState.isValid}
                    data-sitekey="6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo"
                    data-callback='onSubmit'
                    data-action='submit'
                    className="btn btn-primary btn-lg btn-block">
                    Enviar
                  </button>
                  <ReCaptcha
                    sitekey='6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo'
                    action='submit'
                    verifyCallback={verifyCallback}
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
  );
}

Is there a event, callback when the user cancel/closes the reCaptcha modal?
I would like to create loading state when the reCaptcha is resolving
and reset the loading state when the captcha was resolved / canceled.

My code

const onRecaptchaResolved = () => {
  console.log('captcha resolved!!!')
  console.log(recaptchaInstance.getResponse())
}

...

return (
  <Recaptcha
    ref={ref => setRecaptchaInstance(ref)}
    sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
    onResolved={onRecaptchaResolved} />
)

My logs

captcha resolved!!!
Uncaught (in promise) TypeError

Version
"react-google-invisible-recaptcha": "^0.2.12"

First of all I'm trying to use it in a stateless function like so:

const Form = (props) => (
  <form>
       <Recaptcha
         ref='' //Without a ref field resolve is never called
         sitekey='someKey'
         onResolved={props.onResolved} />
  </form>
) 

But without a ref field resolved is never called. How do I solve this?

Second question:

I have another use case where I would like to call the recaptche on componentWillMount or similar and not when a user submits a form I've tried simply putting this.recaptcha.execute() in the life cycle method, but resolve never gets called and I'm actually not sure if a request to google is even made. Is what I'm trying to achieve possible?

I am trying to use invisible reCAPTCHA, when i load page it shows alert like "Cannot contact reCAPTCHA. Check your connection and try again". i am following documentation to use this. can any one help?

can I use it on react native ?

More specifically, I just want to make the popup a bit smaller since it's taking up most of the screen space on smaller mobile displays.

I know I can change the style of that badge, but not sure about the popup.

Hello @szchenghuang , I found out another issue which may be related to this PR #16 . When I unmount the component and mount it again, this happens:

Somehow the references to the container and the elements are not deleted correctly on ComponentWillUnmount. calling grecaptcha.reset() on component unmount does not seem to fix it either. However, when reloading the page the reCaptcha works as expected, any idea?

Edit: The exact same problem happened Here, and was fixed by removing the rendered DOM on unmounting

npm install -D react@16
[email protected] ../
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
└─┬ [email protected]
└── [email protected]

Can you please provide a new version pushing to the new React?

Hi @szchenghuang ,

Recently I got this error as in the title of this issue, not sure where it could be going wrong.

Here's a screenshot of the error on the page and console errors logged:

It would be great to know what could be causing this error.

Thank you.
Kind regards.

As per Google Terms of Service Don’t remove, obscure, or alter any legal notices displayed in or along with our Services. Sooo, hiding it can get you kicked from the service.

Because hiding it can be very useful, my suggestion would be to add a prop like display that can toggle the visibility.

The callbacks are undefined. Using v1.0.0-rc.0.

<Recaptcha onResolved={handleCaptchaResolve} ref={refRecaptcha} sitekey='6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' />

const onValidForm = () => refRecaptcha.current?.callbacks?.execute();
const onInvalidForm = () => refRecaptcha.current?.callbacks?.reset();
const onSubmit = handleSubmit(onValidForm, onInvalidForm);

Dear contributors,

The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

The bug appears in the "demo" link of the page.

On Safari Version 12.0 (13606.2.11)

A.

Edit: reference here google/google-api-javascript-client#397

When trying to unmount Recaptcha I get the following error:

Google Chrome - 66.0

Uncaught TypeError: Cannot read property 'style' of null
at Ei (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:129)
at Fr (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:395)
at Hr (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:395)
at zs.n.Jd (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:410)
at gp. (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:242)
at gp. (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:242)
at ff (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:64)
at bf (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:64)
at b (www.gstatic.com/recaptcha/api2/v1531117903872/recaptcha__en.js:61)

Hi,

Recently I saw in the console that there is a 404 not found error:
GET https://www.google.com/recaptcha/api2/undefined 404 (Not Found) undefined:1

Not sure what the issue could be.

Could you please assist?

Thank you.
Kind regards.

Would be ideal to be able to execute a callback if the recaptcha fails for some reason. Right now I have no way to end my loader.

Is there a possibility to pass data to onSubmit function where is captchaRef execute which can be catch in onResolved function to make there axios post method?

In the console, I am getting the following error

Hi, I went to the demo page and it seems that the demo is broken. Page is blank and console says:

Uncaught TypeError: Cannot read property 'ReactCurrentOwner' of undefined
    at bundle.js:6354
    at Object.<anonymous> (bundle.js:22741)
    at Object.<anonymous> (bundle.js:22744)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:5193)
    at Object.<anonymous> (bundle.js:5196)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:3028)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:3012)

(bundle.js:6354)

(Screenshot of the said above attached..)