Skip to content
This repository has been archived by the owner on Apr 5, 2022. It is now read-only.

BUG: Staticman reCAPTCHA Error #7

Closed
pacollins opened this issue May 12, 2019 · 5 comments · Fixed by #45
Closed

BUG: Staticman reCAPTCHA Error #7

pacollins opened this issue May 12, 2019 · 5 comments · Fixed by #45

Comments

@pacollins
Copy link
Owner

Bug Report

Describe the bug

Staticman V2 was not working due to an issue with request limits. Was upgraded to v3 and now it has a reCAPTCHA error even when disabled.

To Reproduce

Steps to reproduce the behavior:

  1. Submit a comment via Staticman

Expected behavior

Comment should successfully post
##Screenshots
If applicable, add screenshots to help explain your problem.

Environment

  • Hugo Version: 0.50
  • Browser and Version:
  • Platform:
  • **Link to Project: **

Additional context

See eduardoboucas/staticman#243

@VincentTam
Copy link
Collaborator

Hi, this is the maintainer of @staticmanlab.

You may see my Staticman + Beautiful Jekyll + Framagit demo (source) for a working example of reCAPTCHA v2 with Staticman v3 URL scheme. It's built yesterday in response to a similar issue einsteinpy/blog.einsteinpy.org#356.

@VincentTam
Copy link
Collaborator

After implementing #31, I've tested the reCAPTCHA integration of your theme, and reCAPTCHA isn't showing. The true cause of this error is the lack of a g-recaptcha tag in the form tag. You may see reCAPTCHA v2's doc for this. Here's the official example pasted here for your convenience.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

You may compare your code

<h2>Say something</h2>
{{ with .Site.Params.staticman }}
<form class="post-new-comment" method="POST" action="https://dev.staticman.net/v3/entry/github/{{ .username }}/{{ .repo }}/{{ .branch }}/data/comments">
{{ end }}
<input type="hidden" name="options[redirect]" value="{{ .Site.BaseURL }}{{ .RelPermalink }}">
<input type="hidden" name="options[entryId]" value="{{ .UniqueID }}">
<input required name="fields[name]" type="text" placeholder="Your name (Required)">
<input name="fields[website]" type="text" placeholder="Your website">
<input required name="fields[email]" type="email" placeholder="Your email address (Required for Gravatar)">
<textarea required name="fields[body]" placeholder="Your message. Feel free to use Markdown (Google 'Markdown Cheat Sheet')." rows="10"></textarea>
{{ if .Site.Params.staticman.recaptcha.recaptcha }}
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ .Site.Params.staticman.recaptcha.sitekey }}">
<input type="hidden" name="options[reCaptcha][secret]" value="{{ .Site.Params.staticman.recaptcha.encryptedkey }}">
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
{{ end }}
<input type="submit" value="Submit">
</form>
{{ if .Site.Params.staticman.recaptcha.recaptcha }}
<script>
grecaptcha.ready(function() {
grecaptcha.execute('{{ .Site.Params.staticman.recaptcha.sitekey }}', {action: 'homepage'})
.then(function(token) {
//console.log(token);
document.getElementByID('g-recaptcha-response').value=token;
});
});
</script>
{{ end }}

with that of Beautiful Hugo.

<form class="js-form form" method="post" action="{{ .Site.Params.staticman.api }}">
  <input type="hidden" name="options[slug]" value="{{ replace .RelPermalink "/" "" }}">
  <input type="hidden" name="options[parent]" value="">

  {{ if .Site.Params.staticman.recaptcha }}
  <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ .Site.Params.staticman.recaptcha.sitekey }}">
  <input type="hidden" name="options[reCaptcha][secret]"  value="{{ .Site.Params.staticman.recaptcha.secret }}">
  {{ end }}

  <fieldset>
  <div class="textfield">
    <textarea name="fields[comment]" type="text" placeholder="{{ i18n "useMarkdown" }}"></textarea>
  </div>
  </fieldset>
  <!-- skipped fieldsets -->

  {{ if .Site.Params.staticman.recaptcha }}
  <fieldset>
    <div class="g-recaptcha" data-sitekey="{{ .Site.Params.staticman.recaptcha.sitekey }}"></div>
  </fieldset>
  {{ end }}

  <fieldset>
    <button class="button">
      Submit
    </button>
  </fieldset>
</form>
</section>

@VincentTam
Copy link
Collaborator

VincentTam commented Jul 4, 2019

Pleaes forget my previous comment. It seems the cause is

"The resource from “https://www.google.com/recaptcha/api.js?render=6Lcv8G8UAAAAAEqV1Y-XEPum00C_DxhD6O--qkFo” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)."

from my Firefox browser.


Updated: Oh! I thought it was reCAPTCHA v2. In fact you're using v3. Need to explore this later. So forget my previous comment.

@VincentTam
Copy link
Collaborator

Related issue: eduardoboucas/staticman#223

@VincentTam
Copy link
Collaborator

Update: Looking at Staticman's PRs, I've found an attempt to support reCAPTCHA v3 with Staticman. Unluckily, it's mixed with lots of changes and it was closed. I've made eduardoboucas/staticman#413 for that.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants