How to Add Google ReCaptcha in Laravel Registration Form

hello everyone this is Yamin and in this tutorial I am going to show you how you can add recaptcha in your laravel registration form so this is really simple let me just partial the example so over here you can see we have the Recaps over here and this operation form so let's just give a random name over here and email and let's just give a password confirm password and then if I just do not click on this I am not a robot option and directly click register it will give us a error let me just show you if I click register here you can see showing us invalid recaptcha so right now we'll just keep the password again and right now this time we'll click on this option I am not a robot and we'll click register and there you can see 2. slogatform here so right now in this tutorial I am going to show you everything from the very beginning step by step how you can add recaptcha in your registration form so this is really simple let me just close this and let's go and create a fresh laravement project so I'll just directly go to my project folder and over here we are going to create a Parable project let me just open the command prompt and let me just zoom in and let's over here laravel new and Lister projection will be laravel recaptcha okay let's press enter and it will create our other projects I'll just fast forward the video for now so you can see out for the creation is complete so right now we are going to go to our project Electronics so let's start here laravel CD laravel we capture and let's run our project PSP Artisan serve and let me just copy this and let's go to a browser press enter and these are facilitated laravel project so first of all we are going to add authentication for alarabin projects so for authentication you can use jht more piece it doesn't matter for this tutorial we are going to use test team so right now let's go to our project and install resting in our project so I'll go to my folder and this are project larability capture and inside this list open another common prompt let me just zoom in and over here we are going to say composer require laravel slash jstream press enter and it will install just immunable project so I'll just fast forward the video so Justin is installed and after testing we are going to install Library so foreign so after Library installation we are going to run this command npm install press enter after npm install we are going to say npm run build so after npm run build we need to migrate our database so but before we make it our database let me just open the project let me just open the project using Sublime Text so I'll just rightly go to my larability captcha project and open it and let me just close the PBS project and directly we will just directly go to my elb folder and buy tool here you can see the database name is larave and recaptcha so let's go and create a database for learnable recaptcha so let me just go to my smile pin then I'll click new and here I'll keep my database name click create okay it's set up so right now let's go to our Command Prompt and over here we are going to say PHP our T Sun migrate press enter and here you can see my guessing is done so right now if we refresh here you can see there is some new travel in our laravel recapture database so right now if you go to our project and if we now refresh over here here you can see the login and registration option and if you click register over here you can see this is our registration form so right now we need to add the recaptcha option over here but before that we need to install a few package for recaptcha so let's go to our Command Prompt over here and here we are going to say composer require this color slash laravel minus recaptcha r e c a p t c h then we'll press enter and it will install recaptcha in all arrival project so after this we need to run another command but before that let me just show you my project and here if you go to our project and if you now go to your config folder you will see that that there is no recapture.php in the config folder so right now we'll just run a command that will create a recapture.php now config folder so here we are going to say PHP Artisan Fender clone publish 10 to minus and here we are going to say provider equal to then we'll give a double quotation and inside it we are going to say this call up capital b i s c o l a p then backslash not forward slash backslash recapture backslash recapture service provider so R will be Capital Rd clb capital c a p t c h a backslash again recaptcha capital c a p p c h a service provider this will be Capital Service UB Capital provider provider and at the end we need to use double quotation over here so make sure that you write this properly if you made a spelling mistake you will get a error so we will now just press enter and here you can see it create a recapture.phile keynote config folder so right now let's just minimize this and we'll just directly go to our DOT EnV file and we'll just directly go down and over here we'll write two single line and that will be recaptcha side key so everything will be capital for this so we'll see our every cap recaptcha underscore site underscore key equal and after it we are going to say we capture underscore secret underscore key and over here we need to give recaptcha side key and recapture secret key okay R will be Capital recaptcha secret key so where can we get the recapture site key and recapture secret key so for it we need to go to our browser and over here we are going to say google.com slash recapture slash admin slash create okay do not worry I'll also give this link in the description so that you can just directly click it and go to this link so right now if you press enter it will take us to the space over here you can see we need to give level and we need to choose the type and the domain name and that's all so here in the label you can just name it anything let's just show over here laravel recaptcha and here we'll choose the recaptcha type 2 you can choose type 3 if you want but we'll go with type 2 recapture version 2 and there is a few more option you can choose the different on if you want but we'll keep on the choose the first one check box and over here in the domain if you have a website domain then you have to keep your domain but right now we want we are trying to run our project in our local so for it we need to server here localhost and then press enter you don't have to add any http.com anything just say over here localhost and press enter and then you will see something like this and if you add this onto 7.0.0. on then it will not work over here okay just click on this accept the recapture terms of services and then you need to click over here submit and if you click submit then it will give you the PSI key and the secret key so we'll just copy the site from here and paste it in our DOT emu file again we'll go to our browser copy the secret key and paste it in our DOT Envy file secret key so let's save it Ctrl s so right now we can just close this so right now we'll go to our config folder and over here we'll just write it to the config folder recapture.php over here and over here just press Ctrl F and search for version over here you can see by default the version is P2 if you choose the version over here version 3 then right over here V P3 It Is by default 2 so that's fine so after this we are going to search for onboard thing that is error underscore message which is this on error message key we are searching for this and here you can see your error message equal to validation recaptcha so instead of this we are just going to server here invalid recaptcha you can write over here anything it doesn't mean that you have to also write invalid e-captcha you can say you are a robot or something else that's fine so we just save this and we can just close this one so after this uh we'll just run a command over here PHP Artisan config clone cache ch so let's just minimize this so after this if we want to the recapture validation option in our relation page then we need to make some changes in our PlayStation test so for it let's go to our project and we'll just directly go to our resource fuse and inside views we have auth and inside auth we have register.play.ph key and in the register.blade.php at the head section we need to add a single line and the head section for register.play.pht is inside the layout and guest.play.php over here so inside the here you can see head section so inside this head section we are going to add a single line let's just add it over here so here we'll give a second bracket and then two I I mean for this sign and inside it we are going to say HTML Escape SLB Capital script Escape then tag DLP capital and JS API which will be capital and a will be Capital API and at time we need to add to fast bracket so you just have to need to add this single line okay so let's just save it and after saving it you can just close this so after this again we will go to our register.blade.php and we just actually go down and so before this already register button we are going to just add another div over here let's over here div and inside this tip we are going to server here we'll give to Second bracket and then again this fourth sign and inside it we are going to say HTML Capital A4 RM form HTML form and sa Knight double pick snipnet and then so right now if you save it and then if you go to our browser and if we refresh so over here you can see the Recaps option over here but it is seeing over here localhost is not in the list of supported domain okay so the reason is uh over here we add the localhost and over here you can see it is the IP address so it will not work so over here stop this onto 7.0.1 we need to server here localhost 8000 and then we'll press enter and then over here you can see it is now working properly now let's just uh server here in the div we are going to say style it will be merging top let's say 35 PX save then refresh over here okay there's some Gap so right now the validation for recaptcha is not complete so for in order to complete it we need to add a if condition for this recaptcha that if there is an error or if someone did not click on this option then it will show us the error so for it will give a if condition if opening and if closing at that of aimed if and over here in the if we'll give to first bracket and will shower here taller errors then this Arrow sign has two first bracket then to single quotation and here we are going to say G minus recaptcha r e c f t t c h a response so we'll check if there is any error error means if someone did not click on this button then we'll show some errors so over here inside this if condition let's have additive and inside T strip let's have a small tag and inside this small tag we are going to just give to Second bracket and let me just copy this error over here and paste over here and here we'll just say error instead of hash we are going to say fast error fast this one and here in the small we are going to make a class and it will be text danger okay so right now we'll save it and we need to somehow validate uh this one uh this I am not a robot option form part from higher we are also validating the name email password and confirm password so for it uh for registration the validation is in the app then action then in the 45 folder if you go to 45 folder here you can see create new user.php if you go over here here you can see the validation for name email and the password for registration so here just after the password will just give two single quotation and inside a single quotation we are going to let you just copy this and paste it over here and we'll see over here equal this Arrow sign then to single quotation and indeed with the comma and inside this to single quotation we are going to say recaptcha r a c f e and that's all so right now if we save it then we'll just refresh here and will not at the first time we will not click on this I am not a robot option let's just try without clicking on this over here we are going to say user let's say here user gmail.com and let's give a password confirm password and this time we will not click on this option and if you click register here you can see invalid recaptcha we got the error muscles so right now let's keep the password again confirm password and this time we'll click on this I am not a robot option click over here and right now if you click on this register option here you can see it's reloading and it took us to the dashboard so this is how you can add recaptcha in your larabalization form I try to make this as simple as possible and I try to explain as much as I can I hope this tutor was useful to you and you learned a lot from this video if this was helpful to you then give a like leave a comment and I would actually really appreciate if you subscribe this channel thanks and for watching and I'll see you in the next tutorial

Channel: Web Tech Knowledge

Views: 3,482

Keywords: google recaptcha, google recaptcha in laravel, google recaptcha v2 in laravel, google recaptcha v3 in laravel, recaptcha in laravel, laravel, how to add google recaptcha in laravel, google recaptcha v3 integration in laravel, laravel google recaptcha, google captcha in laravel, laravel 9 google recaptcha, how to add google captcha in laravel, how to use google captcha in laravel, recaptcha, google recaptcha v3, google recaptcha v2, google recaptcha laravel, web tech knowledge

Id: Zs0BVTmT9AY

Length: 15min 28sec (928 seconds)

Published: Sat Feb 25 2023