reactjs - React recaptcha google 根本没有显示
问题描述
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 className="row">
<ReCaptcha
ref={(el) => { this.captchaDemo = el; }}
size="normal"
render="explicit"
sitekey="our correct key"
onloadCallback={this.onLoadRecaptcha}
verifyCallback={this.verifyCallback}
/>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById('myComponent'));
componentDidMount()
也正在跳过中的条件。
我已经不知道该怎么做才能让它发挥作用。有什么建议么?
我也试过:
react-recaptcha
(< - 这个是一样的 - 什么都不显示)和react-google-recaptcha
(<- 这会产生错误)
我们的密钥 100% 正确,因为我们将它用于同一站点上的其他验证码(用 Razor 编写)。
解决方案
我刚刚想通了-我失踪了
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
在页面上,添加并显示验证码。
推荐阅读
- xaml - 关于 UWP 中复制模板创建的 Xaml Visualstate 的几个问题
- r - 搜索并格式化字符串
- ios - 如何删除从重量结果产生的文本?
- javascript - 在服务器上选择文件路径并在客户端使用此路径
- docker - 构建 docker 镜像时的最佳实践
- laravel - 如何在 laravel 中查找无效文本表示的列名 7 错误无效的整数输入语法?
- spring-boot - 启动多个 Spring Boot 应用程序进行测试
- docker - 如何在 Aptible ssh 登录时显示自定义消息
- routing - DHT 路由表 - 为什么使用存储桶而不是地图?
- mongodb - 使用聚合、匹配和查找在 MongoDB 中一次查询多个集合