search

niiknow / grapesjs-components-farmer

grapesjs plugin to build components for different css framework
https://niiknow.github.io/grapesjs-components-farmer/
MIT License
53 stars 10 forks source link

Re-captcha #6

Closed Abhisheknanda1344463 closed 3 years ago

Abhisheknanda1344463 commented 3 years ago

Hi @noogen
I've gone through your plugin that is awesome I just want to how can I use the re-captcha here Could you please let me know? I've tried to enter the site key as well but it'll not visible on the preview page

noogen commented 3 years ago

What kind of recaptcha do you need to implement? https://developers.google.com/recaptcha/docs/versions

The implementation of the captcha with invisible recaptcha v3 client script in mind: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/client.js#L352 - https://developers.google.com/recaptcha/docs/v3

See visible on this demo page: https://niiknow.github.io/lambda-form/demo/ - everything is handle behind the scene, example - https://github.com/niiknow/lambda-form/blob/master/demo/index.js#L10

Maybe I should have created recaptcha 2 checkbox implementation instead?

Abhisheknanda1344463 commented 3 years ago

Yes @noogen That'll be great If you can modify the re-captcha component to v2 Like same did in the grape drop as well https://grapedrop.com/docs/guides/form-integrations.html#google-recaptcha-integration

noogen commented 3 years ago

Try latest version 0.6.0. Remember to generate recaptcha v2 checkbox key.

Abhisheknanda1344463 commented 3 years ago

@noogen I've tried This is my key -: 

Site-key -: 6LeOtBoaAAAAAI7BMp4aB4CnGizCPkbD4CgjOSPN

Checkbox isn't appearing no luck Checkbox badge is hidden

noogen commented 3 years ago

The content should work. I just added preview. Try 0.6.1.

Demo: https://niiknow.github.io/lambda-form/demo/ Content is rendered like so:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
<div class="g-recaptcha" data-sitekey="your-site-key"></div><br>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

explain

On the browser:

  1. Browser load https://www.google.com/recaptcha/api.js
  2. Once script loaded, it will try to find class="g-recaptcha" and render the checkbox inside this element
  3. When you click the checkbox, it will try to find g-recaptcha-response and load value to this element

On the Server-Side You validate g-recaptcha-response with google to make sure captcha is valid.

Abhisheknanda1344463 commented 3 years ago

@noogen Yes Now, I can see the preview. Thanks for the explanation as well Closing the issue.