Securing Your React Website with Google reCAPTCHA: Step-by-Step Tutorial on v2 and v3

Sdílet
Vložit
  • čas přidán 5. 09. 2024
  • Welcome to today's tutorial where we're diving deep into the world of Google reCAPTCHA! If you're building or maintaining a website, understanding how to protect it from spam and automated abuse is crucial. That's where reCAPTCHA steps in, and in this video, we're covering both reCAPTCHA v2 and v3.
    We start by exploring reCAPTCHA v2, the one with the famous "I'm not a robot" checkbox and sometimes those picture challenges. It's user-friendly, but it can sometimes be a bit intrusive. I'll show you how to smoothly integrate it into your website with a live coding session.
    Then, we'll shift gears to reCAPTCHA v3. This newer version runs quietly in the background, scoring users' interactions to detect bots without any interaction needed from them. It's all about enhancing user experience without compromising security. Again, I'll guide you through a detailed implementation so you can see exactly how it works.
    Chapters:
    00:24 Introduction
    01:44 Code Walkthrough
    02:12 Setting up reCaptcha v2
    03:43 Project Overview
    05:54 reCaptcha v2 React Component
    25:38 reCaptcha v3 Setup
    26:48 reCaptcha v3 React Hook
    36:09 Conclusion
    Learn more about Google reCAPTCHA: www.google.com...
    Dive into reCAPTCHA v2: developers.goo...
    Uncover reCAPTCHA v3: developers.goo...
    Github Link: github.com/Nit...
    Join our Discord community to connect with other developers and get help with your code:
    🔴 Discord: / discord
    Don't forget to subscribe to our channel for more content like this!
    Follow us on social media for updates and more:
    🔴 My Channel: / coderadiance
    🔴 View Playlists: / coderadiance
    🔴 My Github: github.com/Nitij

Komentáře • 11

  • @sebastianherrera8807
    @sebastianherrera8807 Před 7 dny

    First at all, thanks for the video! it was useful. However, what about if the token expires? shouldn't you add a callback to your component?

  • @Mike37373
    @Mike37373 Před 5 měsíci +2

    can you make an example of how react hook reCAPTCHA v3 works with node js and express js? it is unclear how to make it work on the server

  • @w1lkns
    @w1lkns Před 8 měsíci

    Thanks for the video 🎉

  • @DavidAshby1
    @DavidAshby1 Před 6 měsíci

    Have you used recaptcha on multiple forms on the same page and if so how did you implement it?

  • @Strategic.
    @Strategic. Před 3 měsíci

    Is it safe to just hardcode the front end site key?

  • @osmarsj7303
    @osmarsj7303 Před 8 měsíci

    Great!

  • @dinuuuuu.28
    @dinuuuuu.28 Před 7 měsíci

    Can't we use the reCAPTCHA from firebase?

  • @dinuuuuu.28
    @dinuuuuu.28 Před 7 měsíci

    have you used the firbase for the authentication or is it just in the folder?

    • @CodeRadiance
      @CodeRadiance  Před 7 měsíci

      There is only site key for client and secret key for server which is needed.

  • @HoangNguyen-ze3yx
    @HoangNguyen-ze3yx Před 7 měsíci

    Can you share me the github link?

    • @CodeRadiance
      @CodeRadiance  Před 7 měsíci

      It has been added to the description.