Как интегрировать recaptcha enterprise в React?

Question

[GaserV]

Такая проблема. Не могу понять как правильно интегрировать recaptcha enterprise в React. Ошибки самые разные:

1. Invalid key
2. reCAPTCHA has already been rendered in this element

Кто имел опыт с этим? Как правильно интегрировать?

P.S. там еще что то с бэкендом связано. Нужно ли еще на бэкенде настраивать что либо?

Answer 1

[Артем]

https://www.npmjs.com/package/react-google-recaptcha

Comments

[GaserV]

React component for Google reCAPTCHA v2.

[GaserV]

P.S. Invalid key

[GaserV]

И да. Я пробовал его уже. Если перейти на другую страницу и вернуться назад то каптча уже не работает. Другими словами после анмаунта каптча в будущем уже не работает. Только после пэйдж релоада

[Артем]

GaserV, Все там работает. Нужно правильно использовать.

Где-то в компоненте:

const [ reCaptchaState, setReCaptchaState ] = useState( {
        callback: 'not fired',
        value: false,
        load: false,
        expired: false,
        recaptchaLoaded: false,
        siteKey: getCaptchaSiteKey(),
        delay: 300
    } )
    const reCaptchaRef = useRef();
    const reCaptchaHandler = {
        onChange: ( e ) => {
            console.log( 'reCaptcha onChange', e );
        },
        asyncScriptOnLoad: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    callback: "called!",
                    recaptchaLoaded: true,
                }
            } )
            console.log( "scriptLoad - reCaptcha Ref-", reCaptchaRef );
            console.log( "scriptLoad - reCaptcha e", e );
        },
        execute: () => {
            // reCaptchaRef.current.execute();
        },
        executeAsync: ( submitFormCallback ) => {
            reCaptchaRef.current.executeAsync()
                .then( value => {
                    if ( value ){
                        setReCaptchaState( ( prev ) => {
                            return {
                                ...prev,
                                value: value
                            }
                        } )
                        submitFormCallback( value )
                        console.log( "executeAsync promise - Captcha value:", value );
                    } //
                    else{
                        console.log( "executeAsync promise error:", value );
                    }
                } )
                .catch( err => {
                    console.log( "executeAsync error", err );
                } );
        },
        onExpired: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    expired: true
                }
            } )
            console.log( 'reCaptcha expire ' );
        },
        onErrored: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    error: true
                }
            } )
            console.log( 'reCaptcha error' );
        }
    }

...

useEffect( () => {
        let isMounted = true
        setTimeout( () => {
            if ( isMounted ){
                setReCaptchaState( ( prev ) => {
                    return {
                        ...prev,
                        load: true
                    }
                } )
            }
        }, reCaptchaState.delay )
        return () => {
            isMounted = false
        }
    }, [] )

...

{ !reCaptchaState.recaptchaLoaded && <Preloader/> }
...

{ reCaptchaState.load &&
            <div className='recaptchaContainer'>
                <ReCAPTCHA
                    ref={ reCaptchaRef }
                    theme="dark"
                    size="invisible"
                    sitekey={ reCaptchaState.siteKey }
                    onChange={ reCaptchaHandler.onChange }
                    onExpired={ reCaptchaHandler.onExpired }
                    onErrored={ reCaptchaHandler.onErrored }
                    asyncScriptOnLoad={ reCaptchaHandler.asyncScriptOnLoad }
                />
            </div>
            }

Пишу с мобилы, могут быть ошибки в скобках.
Это вырезано с рабочего проекта. Так что все работает.

[GaserV]

Артем, спасибо. Я щас заюзал @matt-block/react-recaptcha-v2 и там заработало. Но думаю что дело было не в пакете. Просто первый e-key который создал - создал без "allow checkbox". А когда создал новый ключ с "allow checkbox" то все завелось. Ну и да, с этим пакетом кода практически нет)