Это видео недоступно.
Сожалеем об этом.
Implementing reCAPTCHA v3 - #91
HTML-код
- Опубликовано: 18 авг 2024
- #recaptcha #javascript #php #tutorial #fetch #v3 #howto
If you are being bothered by spam and bot submissions on your website or a client website, reCAPTCHA is your answer. reCAPTCHA is powered by Google and stands up to most bot spam. You may have used it before or you may be interested in using it now, but with V3 you may not know where to start.
In this tutorial, we will implement reCAPTCHA V3 from start to finish and use Vanilla JS to validate and submit our form using fetch.
00:00 Intro
01:15 Setup Our File Structure
01:46 Create Our index.html
10:04 JS Form Validation
17:12 Sass Styling
22:39 Add Alert
27:27 Google reCAPTCHA Keys
29:01 Add reCAPTCHA V3 Scripts
34:08 JavaScript Fetch
35:09 PHP Validation
46:44 Presenting A Response
49:26 Thank You Page
53:08 Remove reCAPTCHA V3 Badging
Download tutorial files here: github.com/the...
⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : www.buymeacoff...
⭐ Join this channel to get access to perks:
/ @devdrawer
⭐ Become a Patreon to show support and get exclusive access to content: / devdrawer
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Subscribe: bit.ly/2Wbsnj9
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Join us on our blog for video recaps and other tutorials: thedevdrawer.com
Become a fan on Twitter: / thedevdrawer
View Project on GitHub: github.com/the...
Thank you! I've been having issues with getting reCaptcha v3 working on my site, and this video showed and explained the implementation very clearly. It's now working as expected. I learnt a number of other tips and tricks throughout as well. You have a new subscriber 👍
Always happy to help. Thanks for the sub.
Great guide - the only one I've found which actually works, thank you!
Glad I could help.
Thanks, that was exactly what I`m looking for!
That's great. Glad I could help.
This is absolute gold! Exactly what I was looking for. Thank you!
That is good to hear. Glad you liked it.
this may be exactly what I needed. I'm building a site for a client but have no idea where to start with PHP so hopefully this helps!
Awesome. Glad I could help. Good luck with your project.
This video should have 1 billion likes
I wish. Share it with people you think it would help. Help me get it to 1 billion lol
I'm trying to make it work in a contact form that I had previously put but with the call back action in a button however the js script don't know how to set it ou@@DevDrawer
what I was looking for. Thank you.
Glad I could help.
Cool tutorial man. Keep it up!
Thanks for watching.
Hey i was getting errors on my own site, then used your example code which i copied it word for word including the php and js. i still get an error when i try submit the form. all my keys are correct. is there something i am doing wrong still? i hosted it and still wont work. Please help.
I got this error : Uncaught ReferenceError: grecaptcha is not defined
at HTMLFormElement. (init.js:26:13)
Did you add the element to the html code? The message is stating that the element is missing.
cheese man 🧠
❤
Thanks
Thanks for a very informative and helpful video, this video contains a lot of new things for me, so I am still working to understand it fully. One question I have is how did you initiate those new (to me) symbols when using your vs code such as not equal to at 36.08?
I use Fira Code font. You can install it from here: github.com/tonsky/FiraCode
Once you have it installed you can turn on font ligatures by going to your settings and adding "editor.fontLigatures": true, to the JSON. I can make a video if you like but it is pretty simple to do. I hope this helps.
@@DevDrawer Thanks for the link I am sure I will be able to use this with your explanation, thanks again.
Hi, thanks for the tutorial, however, i cannot find the place to put the admin email address, appreciate your help. thanks.
Around 45:24 I tell you where to put your mail routine. I did not code a mail routine in the PHP because the topic was the reCAPTCHA integration but you should be able to replace my comment with the PHP mail routine:
$message = 'This is a test message.';
mail('youremail@yourdomain.com', 'Your Subject', $message);
Reference: www.php.net/manual/en/function.mail.php
Awesome video! Thanks!! But... I'm running into a little trouble @40:00. When following along, I ran into an 405 error code. I double checked my (own) keys, checked the code, but I found nothing. It seems the php code doesn't accept the post method. Even after downloading your entire zipped code from Github, I ran into the same error (after entering my own reCaptcha keys off course). Am I missing something crucial? Thanks in advance!
You are getting a CORS error. Try the suggestions in this StackOverflow answer and see if it helps: stackoverflow.com/questions/44155720/405-error-without-access-control-allow-origin-in-response-from-google-recaptcha
@@DevDrawer Thank you so much for helping me find a solution. It indeed seems it has something to do with the CORS policy, although allowing cross-origin with an extension gave me the same 405 error in the console. But... I uploaded the entire folder with your code and files to an ftp server and from there it worked just fine!! (note: you might want to change '/thanks' to '/thanks.html' in init.js line 60). So I think I messed something up in my live-server-settings 🙂 Thanks again, awesome video!! Keep it up!
CORS is always a pain to troubleshoot. I will look at the js and fix the thanks page.
I'm working on integrating all of this into the site, but how do I send it to the email of my client? I didn't see a space to put that in.
NEVERMIND! I got it :)
Awesome to hear