reCaptcha 不显示在我的单页网站上

Question

我在加载验证码时遇到了一些问题。

我试图将我的旧网站之一重新制作和现代化为带有php，javascript和ajax的单页网站(没有jquery！

一切都很好，但是重新验证。我使用以下方法。

1. index.php包含 HTTPRequest 函数的"主框架"和目标div。

2. 使用 AJAX，我将 PHP 页面模板加载到主目标div。

但是当我的 PHP 模板文件看起来以下内容以显示带有验证码的注册最后一页时：

<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">&laquo; Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
';
echo $template;

我将其加载到我的一个div中，尚未显示 reCaptcha。我尝试了一些方法和技巧，但它不起作用。

我的页面上根本没有表格和提交部分。我用javascript和ajax来做这件事。

为什么我不能让它工作？
是否可以绕过表单>提交>发布方法来使 reCaptcha 处于活动状态？
还是单页的方式错误？

Answer 1

我不太了解你，但由于我无法发表评论，我无论如何都会尝试回答。

您不必使用 php 来回显 html 代码，以防万一您不知道，您可以这样做。

<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">&laquo; Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>

我将其加载到我的一个div中，尚未显示reCaptcha。我 尝试了一些方法和技巧，但它不起作用:(

很难从您提供的信息中看出为什么没有显示它

我的页面上根本没有表格和提交部分。我用 JavaScript 和 Ajax。

如果您的registration_page_2.php和registration_validate.php没有回显当前显示.php中的模板，那么它肯定不会出现在您的页面上

为什么我不能让它工作？是否有可能绕过 表单>提交>发布方法以使 reCaptcha 生效？或者是单页 错误的方式？

我想你只是在中间做错了什么。您所说的方式是"表单>提交>发布"是正确的方法。

你能帮我找到解决方案吗？

使用浏览器检查或查看页面的源代码。(对于谷歌浏览器，热键是CTRL + SHIFT + I(尝试在页面中找到元素，看看它们是否已加载，但由于 css 或类似内容而隐藏。之后，您应该提供更多详细信息。

Answer 2

通过添加IDrecaptcha更新您的验证码块

<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>

在页面加载中添加以下代码

<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>

Answer 3

你可以用php请求来做到这一点

<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>