Google NoCaptcha ReCaptcha появляется только при обновлении в Angular SPA

Я заметил, что мой новый ReCaptcha появился только «иногда», поэтому я попытался его отслеживать.Google NoCaptcha ReCaptcha появляется только при обновлении в Angular SPA

У меня есть SPA, использующий Angular, и при загрузке на странице «/ contact» появляется сообщение ReCaptcha. Если я загружу на любую другую страницу и попытаюсь перейти на страницу «/ contact», ReCaptcha там не будет, но если я обновляюсь на этой странице, она появится снова. Переход на другую страницу и возвращение на эту страницу приведет к ее исчезновению снова.

Моя установка аналогична следующей:

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 в этот момент. Если я могу предоставить больше информации, пожалуйста, дайте мне знать.

Я просмотрел документы API Google ReCaptcha и попытался реализовать некоторые из их примеров, но ничего не работало. Я также огляделся вокруг, а также на других сайтах, чтобы узнать, есть ли у кого-то еще эта проблема, но до сих пор мой поиск был бесплодным. Я буду продолжать смотреть.

источник

2014-12-24 McTalian

Изменение состояния удаляет и добавляет элементы в DOM. Когда вы вернетесь в одно и то же состояние '/ contacts', div с recaptcha загружается в DOM, но recaptcha js этого не знает. Взгляните на эту [реализацию] (https://github.com/mllrsohn/angular-re-captcha/blob/master/angular-re-captcha.js) Angular-recaptcha за идеи о том, как исправить (или использовать библиотека как есть). Я не использовал recaptcha или эту библиотеку, поэтому не рассматривайте это предложение как подтверждение. –

@NewDev Несколько подобных вопросов также приводят к этому ресурсу. Сама библиотека использует более старую версию recaptcha, но, возможно, я ее разблокирую и предлагаю запрос на перенос с использованием новой версии. Похоже, это не должно быть так сложно. Спасибо, что подтвердил свою уверенность в том, что это, вероятно, способ пойти и в конечном итоге заставить меня попробовать. – McTalian

Я закончил использовать vc-recaptcha, чтобы получить эту работу.

Настройка довольно проста и регулярно обновляется.

источник

2015-03-09 12:44:57 McTalian

Этот ответ работает для меня с новой ReCaptcha (я не робот)

в Html (не забудьте вставить его в виде тега):

<recaptcha></recaptcha>

Директива Код

angular.module('app').directive('recaptcha',['$window','$compile',function($window, $compile) { 
    return { 
    replace: true, 
    link: function(scope, elem){ 
     var key = 'xxxxxxxxxxxxxxxxxxxxx';   <--<your public key 
     activate(); 
     function activate(){ 
     if (angular.isDefined($window.grecaptcha)) {   
      $window.grecaptcha.render(elem[0],{ 
      'sitekey': key 
      });   
     } else { 
      activate(); **<- no good -> use some kind of promise here, just for testing** 
     } 
     } 
    }   
    }; 
}]);

В старом recpatche это своего рода

$window.grecaptcha.render(elem[0], key);

Проверьте документацию API.

Проверить здесь: http://www.codedodle.com/2014/12/google-new-recaptcha-using-javascript.html

источник

2015-11-24 20:00:44

Google NoCaptcha ReCaptcha появляется только при обновлении в Angular SPA

ответ

Смежные вопросы