Google NoCaptcha ReCaptcha仅在刷新时显示在Angular SPA中 [英] Google NoCaptcha ReCaptcha only shows up on refresh in Angular SPA
问题描述
我注意到我的新ReCaptcha仅在有时"出现，所以我试图对其进行追踪.
I noticed that my new ReCaptcha only showed up "sometimes" so I tried to track it down.
我有一个使用Angular的SPA，并且在"/联系人"页面上加载时，出现ReCaptcha.如果我加载到任何其他页面上并尝试导航到"/contact"页面，则ReCaptcha不存在，但是如果我在该页面上刷新，它将再次出现.导航并返回此页面将使其再次消失.
I have a SPA using Angular and when loading on the "/contact" page, the ReCaptcha shows up. If I load into any other page and try to navigate to the "/contact" page the ReCaptcha is not there, but if I refresh on that page, it appears again. Navigating away and returning to this page will cause it to disappear again.
我的设置类似于以下内容:
My setup is similar to the following:
index.html
<html ng-app="App">
<head>
<meta charset="UTF-8">
<base href="/">
<title>...</title>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="dist/css/style.min.css" />
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
...
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" ng-controller="MainController">
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<!-- FOOTER -->
<footer id="footer" ng-controller="FooterController">
<div class="text-center">
{{ footer }}
</div>
</footer>
<!-- SCRIPTS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ReCaptcha -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- APP -->
<script src="dist/js/app.min.js"></script>
</body>
</html>
contact.html
<div class="jumbotron">
<h1 class="text-center">Contact Page</h1>
<p class="text-center">{{ message }}</p>
<div data-ng-controller="ContactController" id="contact-form">
<div>
<div ng-show="sent" class="alert alert-success">
<strong><span class="fa fa-send"></span> Success! Message sent.</strong>
</div>
<div ng-show="error" class="alert alert-danger">
<strong><span class="fa fa-exclamation-circle"></span> Error! Please check the inputs.</strong>
</div>
</div>
<form name="contactForm" role="form" method="post">
<div class="well well-sm">
<span class="fa fa-asterisk"></span><strong> Required Field </strong>
</div>
<div class="form-group">
<label for="InputName">Your Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" data-ng-model="Name" required>
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Your Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" data-ng-model="Email" required>
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
</div>
</div>
<div class="form-group">
<label for="InputSubject">Subject</label>
<div class="input-group">
<select class="form-control" id="InputSubject" name="InputSubject" data-ng-model="Subject" ng-options="subject.type for subject in subjects"></select>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" data-ng-model="Message" required></textarea>
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
</div>
</div>
<div class="g-recaptcha" data-sitekey="[my_site_key]"></div>
<button name="submit" id="submit" class="btn btn-info pull-right" data-ng-click="submit(contactForm)">Submit</button>
</form>
</div>
</div>
这是目前似乎仅影响ReCaptcha的两个区域.如果我可以提供更多信息，请告诉我.
These are the only two areas that seem to affect the ReCaptcha at this point. If I can provide anymore info, please let me know.
我浏览了Google ReCaptcha API文档，并尝试实现其中的一些示例，但似乎没有任何效果.我也到处寻找SO，以及其他站点，看看是否还有其他人遇到此问题，但是到目前为止，我的搜索仍然没有结果.我会继续寻找.
I've looked through the Google ReCaptcha API Docs and tried to implement some of their examples but nothing seemed to work. I've also looked around SO, as well as other sites to see if anyone else was having this issue, but my search has been fruitless so far. I'll keep looking.
推荐答案
我最终使用了 vc-recaptcha 使其正常工作.
I ended up using vc-recaptcha to get this working.
设置非常简单，并且会定期进行更新.
Setup is pretty simple and it is updated fairly regularly.
这篇关于Google NoCaptcha ReCaptcha仅在刷新时显示在Angular SPA中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
