javascript - 在反应登录应用程序中验证 Google recaptcha
问题描述
我有一个反应应用程序,我在登录组件中使用了谷歌 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>
);
}}
解决方案
根据您的代码,我认为您需要verifyBack
在构造函数中绑定您的函数。
constructor(props) {
super(props);
...
this.verifyBack = this.verifyBack.bind(this);
}
推荐阅读
- java - 如何修复每次选择组件时发生的 Android Studio 中的“发生 IDE 内部错误”?
- prometheus - 计算大于某个值的时间元素
- android - 当我用 Kotlin 测试 Retrofit API 时的 NPE
- keras - 如何使用转录本的 mfcc 向量和相应的词嵌入向量作为输入和输出数据,为 ASR 构建 seq2seq 模型?
- android - 我怎样才能找出 android google 在创建其 google 笔记时使用了哪些功能?
- apache - Apache 在 HTML 文件中添加 Javascript
- node.js - 在验证完全有效的对象时,我不断收到 ($__ is not allowed) 错误
- r - 当包裹在 Trycatch 或安全时,Broom 无法处理嵌套的 lm 模型列表
- mysql - MySQL更新匹配某个值的行之后的所有行的值
- javascript - 保留默认的 tickSize 但添加一个刻度