Я успешно установил флажок reCaptcha на своей странице регистрации, но он появляется только тогда, когда я делаю refre sh на странице (после начальной загрузки страницы reCaptcha не отображается). Также не видно, если я покину страницу регистрации, go для другой ссылки, а затем вернусь на страницу регистрации. Есть какие-нибудь идеи относительно того, как заставить окно reCaptcha показываться постоянно?
Я пытался извлечь async
и defer
из скрипта через другие посты, но это не показалось сделать что-нибудь.
Я следовал руководству Google о том, как выполнить интеграцию на стороне клиента поля reCaptcha, и вот как выглядит мой код:
// в моем приложении. html .erb
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.whiteLogo = "<%= image_url('spotify-white-logo.png') %>";
</script>
<script type="text/javascript">
window.blackLogo = "<%= image_url('spotify-black-logo.png') %>";
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<title>Spotify</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
// в моем jsx-файле формы регистрации (я не буду публиковать весь компонент, который отображает форму, потому что в нем много кода, поэтому я просто вставлю в форму, имеет элемент reCaptcha)
ПРИМЕЧАНИЕ: my_key
на самом деле является моим личным ключом сайта (я просто опустил его из соображений безопасности)
<form onSubmit={this.handleSubmit} className="session-form">
{formType === 'Sign Up' ?<h3>Sign up with your email address</h3> : <h4>To continue, please log in.</h4>}
{this.renderErrors()}
<div className="session-form-input">
<div className="session-form-text-input">
{ emailInput }
<label>
<input type="password"
value={this.state.password}
onChange={this.update('password')}
className="password-input"
placeholder="Password"
/>
</label>
{ usernameInput }
{ birthdayInput }
</div>
{ genderInput }
<div className="g-recaptcha" data-sitekey="my_key"></div>
<div className="session-form-submit">
<br />
<input className="session-submit-button" type="submit" value={formType} />
</div>
</div>
</form>