Giter Club home page Giter Club logo

Comments (5)

VincentTam avatar VincentTam commented on August 19, 2024

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.

from hugo-future-imperfect-slim.

VincentTam avatar VincentTam commented on August 19, 2024

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>

from hugo-future-imperfect-slim.

VincentTam avatar VincentTam commented on August 19, 2024

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.

from hugo-future-imperfect-slim.

VincentTam avatar VincentTam commented on August 19, 2024

Related issue: eduardoboucas/staticman#223

from hugo-future-imperfect-slim.

VincentTam avatar VincentTam commented on August 19, 2024

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.

from hugo-future-imperfect-slim.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.