{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blog/add-google-recaptcha-v2-to-plain-html/","result":{"data":{"site":{"siteMetadata":{"name":"Huzaifa Rasheed","title":"Huzaifa Rasheed","description":"Software Engineer","about":"\n Hey, I'm Huzaifa.\n

\n Engineer by trade, builder by instinct - I believe in owning my stack, shipping fast, and occasionally running on chai (tea) and stubbornness. I work best in that sweet spot between deep focus and fast feedback - solo or in sync with a good team.\n

\n This site's my little corner of the internet - part portfolio, part lab - where I document what I build, break, or learn.\n

\n Outside work, I'm into long walks, pixel-perfect headshots in FPS games (eventually... maybe), plants I probably overwater, and the occasional \"classified\" hobby to stay curious.\n

\n Reach out anytime - my digital door's always open. 👋\n ","twitter":"https://twitter.com/huzRasheed","github":"https://github.com/huzaifa-99","linkedin":"https://www.linkedin.com/in/huzaifa-rasheed/","devto":"https://dev.to/huzaifa99","stackoverflow":"https://stackoverflow.com/users/12579290/huzaifa","leetcode":"https://leetcode.com/rhuzaifa","discord":"https://discordapp.com/users/rhuzaifa","email":"dev@rhuzaifa.com","projects":[{"name":"FFMpeg Web","description":"An experimental browser-based terminal that runs FFmpeg using WebAssembly, enabling media processing directly in the browser.","link":"https://ffmpeg-web.rhuzaifa.com/","github":"https://github.com/huzaifa-99/ffmpeg-web"},{"name":"Feed base 2","description":"A mini browser game where players manipulate 4-bit binary blocks to match target BCD values - part puzzle, part binary logic trainer.","link":"https://feedbase2.rhuzaifa.com/","github":"https://github.com/huzaifa-99/feed-base-2"},{"name":"Fabric browser extension","description":"A Chrome extension that injects engineered Fabric prompts directly into the ChatGPT interface for enhanced workflow automation.","link":"https://github.com/huzaifa-99/fabric-browser-extension","github":"https://github.com/huzaifa-99/fabric-browser-extension"},{"name":"Pure Cinema","description":"An experimental, tongue-in-cheek text-to-video generator that stitches together footage, synthesized voiceovers, and background music with a Node.js + ffmpeg pipeline. Not quite Hollywood, but it renders.","link":"https://cinema.rhuzaifa.com","github":null},{"name":"Aria2c Packload","description":"A Bash script for bulk downloading magnet links or torrents using aria2c - optimized for series or list-based transfers.","link":"https://github.com/huzaifa-99/aria2c-packload","github":"https://github.com/huzaifa-99/aria2c-packload"},{"name":"RSS Watchdog","description":"A lightweight Bash script that watches RSS/Atom feeds and compiles a Markdown-based reading checklist for Unix systems.","link":"https://github.com/huzaifa-99/rss-watchdog","github":"https://github.com/huzaifa-99/rss-watchdog"},{"name":"QuoteGen","description":"A quote graphic generator that produces stylized quote images with random selection and a built-in editor for customization.","link":"https://quotegen.rhuzaifa.com/","github":null},{"name":"WebRTC Video Chat","description":"A basic WebRTC-powered app enabling peer-to-peer video and audio calls between two users.","link":"https://webrtc-video-chat.rhuzaifa.com/","github":null}],"experience":null,"skills":[{"name":"Languages & Frameworks","description":"JavaScript, TypeScript, Python, Bash - Frameworks include Node.js, React, Next.js, Vue, React Native, FastAPI."},{"name":"Databases & Storage","description":"PostgreSQL, MySQL, MongoDB - Experience with schema design, indexing, query optimization, and migrations."},{"name":"Cloud & Infrastructure","description":"AWS (EC2, RDS, S3, Lambda), Vercel, Netlify, Heroku - Comfortable with serverless, autoscaling, and cost optimization."},{"name":"DevOps & Tooling","description":"Docker, Git, CI/CD pipelines (GitHub Actions, GitLab CI) - Experience with observability, containerization, and release workflows."},{"name":"Testing & QA Automation","description":"Jest, Playwright, Puppeteer, Selenium - Focus on E2E testing, mocking APIs, and maintaining test coverage."}]}},"markdownRemark":{"id":"9cd29cc5-9797-5a61-ac1c-162fbcb2c15e","excerpt":"Repost of https://dev.to/rhuzaifa/add-google-recaptcha-v2-to-plain-html-3n0p What is it? A CAPTCHA is a test that helps to tell the difference between a bot and…","html":"
\n

Repost of https://dev.to/rhuzaifa/add-google-recaptcha-v2-to-plain-html-3n0p

\n
\n

What is it?

\n

A CAPTCHA is a test that helps to tell the difference between a bot and a human.

\n

The reCAPTCHA is Google’s implemenation of a CAPTCHA. Its very easy to integrate, without any third party libraries.

\n

What’s The Purpose?

\n

A reCAPTCHA can keep malicious software/bots from engaging in abusive activities on your website while allowing legitimate users access to your site.

\n

How to Integrate?

\n

We will be using the v2 version.

\n

1. Create a site key

\n

You can create a site key from Google reCAPTCHA Admin Page.

\n

You also will need to add a site domain, where you would deploy the site. For testing you can add localhost and use the loopback address (127.0.0.1) or use a key from reCAPTCHA automated tests guide. One of those keys is

\n
6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
\n

which we will use in our example.

\n

2. Add Widget to Markup

\n

The only thing we will need to add to our HTML is

\n
<div\n  class=\"g-recaptcha\"\n  data-sitekey=\"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI\"\n>\n</div>
\n

this can be added to a form or used without one, depending on the use case. Source

\n

We will also need to add a cdn link to the head tag.

\n
<script src=\"https://www.google.com/recaptcha/api.js\" async defer>\n</script>
\n

We can listen to callbacks from the widget and register our own handlers.

\n
<div\n  class=\"g-recaptcha\"\n  data-sitekey=\"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI\"\n  data-callback=\"onRecaptchaSuccess\"\n  data-expired-callback=\"onRecaptchaResponseExpiry\"\n  data-error-callback=\"onRecaptchaError\"\n>\n</div>
\n

these callbacks can be used to validate or invalidate our form or whatever we want to do.

\n

I made a simple form that submits successfully when the reCAPTCHA validates successfully, its here. I also added some basic styling to have a decent look and feel.

\n

Hope this helps you in your Projects. Thanks for reading 😉.

","frontmatter":{"title":"Add Google reCAPTCHA v2 to plain HTML","date":"February 13, 2022","description":"Learn how to integrate Google reCAPTCHA v2 into a plain HTML form to protect your site from bots."}}},"pageContext":{"slug":"/blog/add-google-recaptcha-v2-to-plain-html/","previous":{"fields":{"slug":"/blog/running-batch-requests-in-postman/"},"frontmatter":{"title":"Running Batch Requests In Postman"}},"next":{"fields":{"slug":"/blog/how-to-avoid-default-props-render-trap-in-react/"},"frontmatter":{"title":"How to Avoid Default Props Render Trap in React"}}}},"staticQueryHashes":["2276319502"]}