Как мне получить reCaptcha для загрузки при первом запуске моего сайта? - PullRequest
0 голосов
/ 30 января 2020

Я успешно установил флажок 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>
...