我根据官方文档为登录页面实现了recaptcha v2。 我在head标签的末尾插入了脚本,并在表单中添加了一个recaptcha div。 代码类似于:
...
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body ng-app="myApp" ng-controller="main">
....
<div class="g-recaptcha" data-sitekey="mykey"></div>
</form>
当我打开登录页面时,验证码应该有一些空间,但验证码不存在(可见)。 如果我在chrome中打开元素检查器,然后重新加载页面,则会出现验证码。 在重新加载之前和之后将页面与元素检查器进行比较,这是我在重新加载之前得到的:
<div class="row text-center captcha_row">
<div class="col-sm-12">
<div class="form-group">
<div class="g-recaptcha" data-sitekey="mykey"></div>
</div>
</div>
</div>
重新加载后,它看起来像这样:
<div class="row text-center captcha_row">
<div class="col-sm-12">
<div class="form-group">
<div class="g-recaptcha" data-sitekey="mykey">
<div style="width: 304px; height: 78px;">
<div>
<iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=mykey..." width="304" height="78" role="presentation" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox">
#document...
</iframe>
</div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
</textarea>
</div>
</div>
</div>
</div>
</div>
在这两种情况下完成的请求列表也不相同。
我确定钥匙是正确的。我不知道还有什么要检查。测试是使用谷歌浏览器完成的。在控制台部分,我没有看到任何错误。