Recaptcha/Nocaptcha Implementation (Security)

Has anyone tried implementing a recaptcha/nocaptcha through Losant before?

The goal is to implement this module on the /login page and /create-user page for security purposes.

I am following the instructions explained on this guide:
Recaptcha/Nocaptcha Implementation

It seems the client(browser) side implementation is pretty straight forward.

On the server side I am unsure how to implement this through Losant (if at all possible).
Server Side Implementation

Anything to point me in the right direction would be much appreciated.

Hi @Leo_Bach1 ,

I don’t think anyone has done this yet. But, I’ll see if I can get it to work in an example for you.

In the meantime, this does take some good working knowledge of Experience Views. Have you checked out this example:

Taron,
Yes I’ve walked through it and I’ve been successful thus far even got as far as getting users to self-manage their groups using a userTag. (https://app.machinesaver.io).

I’ve added functionality and broke/fixed the profileForm component many times which is all part of the learning process. Edited the JSON schema to validate the data sent from the HTML form to the workflow.

After reviewing the Experience Views Walkthrough it seems the most appropriate way to implement this would to create a new component to be used across different pages invoking a component helper.

-Leo

I’m sure its something simple I am missing but my recaptcha doesn’t show up until after I have submitted my form once. You wouldn’t happen to know a reason this doesn’t load until after the submission , would you?

Before Sign In Button:

After Sign In Attempt:

After this it seems to be working just fine.

Please see my page code below:

Login Page:

Layout:

Hi Leo,

I took a look at your experience and was able to locate two possible issues. You seem to be missing your recaptchaSiteKey on the page render, which would cause the ReCaptcha to not display:


The second issue I found was in your ReCaptcha component. The bracket and parenthesis are switched, which is not valid Javascript. This may not be the cause of the ReCaptcha not loading, but could be causing problems elsewhere:

Let me know if this solves it!
Julia

Solved! It was that I wasn’t providing the recaptchaSiteKey to the endpoint reply node.

Thank you!

1 Like