ll start by giving you two reasons to finish reading this, and cloning the repo after:
- In contrast to (all the) other (incomplete) guides on the internet, it works. Really works. The project is ony 60 lines long and you may use it as a template for your own project
- *Drops the mic*
I am currently developing a web app to help local business during the corona virus lockdown impact on economy where I live.
Don't get me wrong: I'm no web dev, full stack dev, senior coder leetcode champion or anything close to it. As far as this tutorial is being written, I'm close to 48 hours old into full stack. I work in AI. My html/cssl skill level is potato.
During my perpetual process of developing ("I want to do this > How do I do it? > It works > I want to do this > ...") I came across the need of some form of user validation.
I thought about Cookies, JWT, Sessions, and other solutions. At first I felt bad, because I would need to learn them all ir order to compare and choose one.
Then it 'clicked' me: reCPATCHA. It suits my needs perfectly.
Close to 3 hours later and I still wasn't able to put it to work properly. Two more hours and I managed to put the pieces together.
You may laugh when you do the math: 5h Divided by 60 lines of code.
It's fine. You are either somewhat experienced in programming or your - first of many - day of sorrow is yet to come...
No hard feelings.
It's fine. You are either somewhat experienced in programming or your - first of many - day of sorrow is yet to come...
No hard feelings.
I broke it down to three steps: Register; add it to your code; run it.
Without further ado:
Step 1: Get it
- 1.1 - Google it (https://imgur.com/XIEk0Yx)
- 1.2 - Fill your domain's relevant information
- 1.2.1 - For local testing to work, add your loopback ip (usually 127.0.0.1) to your domains list
- 1.3 - Save your public and private keys somewhere safe and accessible
Step 2: Code it
- 2.1 - Add to your html head:
<script src="https://www.google.com/recaptcha/api.js"></script> - 2.2 - Add to your form:
<div class="g-recaptcha" data-sitekey="{{ pub_key }}"> - 2.2.1 - The html file needs the value of the pub_key variable, then, add it to your render_template:
render_template('page.html', pub_key=pub_key) - 2.3 - Create a helper function (is_human) to validate the CAPTCHA's checking (https://imgur.com/5On8T3m)
Step 3: Run it
- 3.1 - $ python3 main.py
- 3.2 - Flask runs on port 5000. Open your web browser and go to 127.0.0.1:5000 (https://imgur.com/L8vAv3V)
- 3.3 - Have fun
You now have a landing page with a form, which's 'humanity' interaction is validated by google, a success and an error page.
Try to come up with some ideias on what you can do with it. Nonetheless, your first web app* is already done!
If something wasn't clear, contact me. Or check the project files hosted on GitHub. I also started helping newcomers like me on some subreddits.
Be sure to check my hacker noon profile read my other stories!
Hope you enjoy.
*: This is not to be deployed in prodution environment. Flask has a guide.