подтвердите Google recaptcha в приложении для входа в систему - PullRequest
Новая
       4

подтвердите Google recaptcha в приложении для входа в систему

1 голос
/ 06 января 2020

У меня есть приложение реагирования, в котором я использую Google Recaptcha в компоненте Login. Я не хочу, чтобы пользователи входили в систему без проверки Recaptcha «Я не робот». Я использую состояние, но я не так успешен, так как состояние никогда не меняется, как я могу это сделать? У меня есть код ниже. 

export default class Login extends Component {

constructor(props) {
    super(props);
    this.state = {
        captcha: false,
    }

}

callBack = () => {
    console.log("something inside re captcha");
}

verifyBack = (response) => {
    if (response) {
        this.setState({
            captcha: true,
        });
    }
}

onSubmit = () => {

    //  checking if captcha state is true to log in but not successful. 
    // log in only after checking the I'm not a robot box (assuming username/password matches).
}

render() {
    return (
        <div>
            <div class="container">
                <label for="uname"><b>Username</b></label>
                <input type="text" placeholder="Enter Username" name="uname" required />

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required />

                <button type="submit" onClick={this.onSubmit}>Login </button>
                <label>
                    <input type="checkbox" checked="checked" name="remember" /> Remember me
                </label>
            </div>
            <div class="container" style="background-color:#f1f1f1">
                <button type="button" class="cancelbtn">Cancel</button>
                <span class="psw">Forgot <a href="#">password?</a></span>
            </div>
            <div className="row invisible-recaptch">
                <ReCAPTCHA
                    sitekey="6Lf8zsgUAAAAAHV1_VcrNDHfWuYAXw1tUSLnexQg"
                    render="explicit"
                    onloadCallback={this.callBack}
                    verifyCallback={this.verifyBack}
                />
            </div>
        </div>
    );
}}

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

  • Ваша проблема решится. Внутри функции verifyBack у вас нет доступа к ней, так что setState не работает. Привязка к этой функции поможет вам сделать это.

0 голосов
/ 06 января 2020

Основываясь на вашем коде, я думаю, вам нужно связать вашу verifyBack функцию в конструкторе. 

constructor(props) {
    super(props);
     ...

   this.verifyBack = this.verifyBack.bind(this);
}
...