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 came across the need of some form of user validation. I want to do this > How do I do it? > It works > I want to do this >  ...") 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. I broke it down to three steps: Register; add it to your code; run it. Without further ado: Step 1: Get it 1.1 - (https://imgur.com/XIEk0Yx) Google it 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 variable, then, add it to your render_template: pub_key render_template('page.html', pub_key = pub_key ) 2.3 - Create a helper function ( ) to validate the CAPTCHA's checking (https://imgur.com/5On8T3m) is_human Step 3: Run it 3.1 - $ python3 main.py 3.2 - Flask runs on port 5000. Open your web browser and go to (https://imgur.com/L8vAv3V) 127.0.0.1:5000 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 . I also started helping newcomers like me on some  subreddits. GitHub 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

Google

WTF is Deep Learning? Explanation for Non Tech People [Only Words and Pictures]

Python 3, Flask and reCAPTCHA Connection Made Easy

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

AI: From ZERO to H...aving A Lot of Questions (Part I)

Adding the Google reCAPTCHA v3 to an Angular application

Create Slider Or Puzzle Captcha Service with Node.js

Google is Using You

How to add reCAPTCHA or hCAPTCHA to any web application

How to Make a Captcha in Python

AI: From ZERO to H...aving A Lot of Questions (Part I)

Adding the Google reCAPTCHA v3 to an Angular application

Create Slider Or Puzzle Captcha Service with Node.js

Google is Using You

How to add reCAPTCHA or hCAPTCHA to any web application

How to Make a Captcha in Python

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps