hey guys welcome to protocol does point okay so in this photo tutorial we're gonna learn how to implement recaptcha verification in your flutter app so let's begin so here i have just created a simple demo app just as an intro of this tutorial so you can see there is a recaptcha view for a verification process that i am not a robot so when i press on this checkbox so it will verify if i am a robot or not and as soon as the verification is successful we are redirected to our welcome page of our flutter app so let's learn how to implement it okay so first of all we must create a api key for recaptcha verification so let's go to google recaptcha so the link is in the description you can just check the link in the description about this and here let's create a project so let's name it as uh try okay so i will just select this one recaptcha version two and i will just keep it as i am not a robot check box okay so here you need to specify your domain name so i'm making use of this you need to make use of your own domain name so this will not work if you are using this one okay so let me add this domain okay so just accept the conditions terms and condition and create it okay so the setup is completed so these are the key of your api that we need to use in our app so let's begin with the tutorial so let's go to our android studio okay so now we are in our android studio and i have created a photo project over here and remove all the default code given by forgotten team that is a counter code and for now it simply have a scaffold widget with the empty container in it okay so what we are going to do is we are going to create a html page inside which we are going to implement recaptcha verification process and the html page we are going to display in our flutter app ui okay so i have already created a forgotten tutorial on how to load a html page in flutter app so if you have not watched that video tutorial you can just check the link in the description or you can check the i button over here okay so let's begin so first of all to load a html page we need a library so let's add the library so just go to pub specification dot yaml file and under dependency section over here just add so this is the library we need so just add this library and hit this pub guide button okay so after adding this library just go to main dot dot page and over here you need to import it okay so let's use this widget so here in body tag let's load a web page so web view plus and over here first of all you need to enable our your javascript so enable javascript mode javascript more unrestrict okay and now on view created controller and inside this controller let's load our page so to load our web page we will make use of a property that is load url okay so here i will just pass my website address that is protocodespoint.com okay so let me restart our app and check if this website is loading or no okay so the website is loading so perfectly in our forgetter app okay so to load your website you need to add some permission in your android model so just go to android model app android manifest and over here you need to add this internet permissions access network state and in application tag you need to make the traffic to the clear to true okay so just do this and your website will be able to load as it is loading over here okay so now let me show you how to load our local or your assets folder html page so for that first of all let me create a directory over here and directory let's name it as assets and under ss folder i will just create one more directory that is web page okay webpages and inside this web pages directory i will just create a file and name it as index.html okay and inside this html index.html i will just copy a dummy html tag that is just one h1 tag and i will just load this page and show you so we have just created three two folders over here nfl so for that we need to give a permissions to access this folder in your pub specification dot yams file and over here just we will just give the access to this folders okay so assets so the path is assets dot web pages okay so now your flutter app will be able to access this folder so let's go to main dot dot and instead of this url we will pass our folder path so the path is here assets web pages slash index dot html okay so let me re-start our app so let's check if it is working so i've got restarted but i'm getting an error that there is no assets folder okay so let me check what happened okay so after adding this path i forgot to hit this pubget button so i'll just do it okay so see after hitting this pubget button and giving the access to this file we are going to we are able to load this index.html page in our forget our app as you can see over here okay so instead of this simple html page i need to load a recaptcha widget over here we cover recaptcha view in this form okay so here i have already created a html page for you so it has a script to load the recaptcha api and we have passed our key over here that we have generated so this is the key we have just passed it over here and we are going to load the script in our html page so this index dot page we are going to load our recaptcha widget for our webview okay so let's load this and check it out okay i have just restarted our app so let's check our app again so you can see a recaptcha is being shown in our forgotten app so i can just verify the recaptcha over here okay so now let's go to main dot dot page and over here we have a web view plus where we are going to load this html page and we need to get the response of this webpage okay so let's get the web response if the verification was successful or not successful okay so for that over here javascript channel set dot form and over here let's create an array and inside this we will just make use of javascript china again and inside this channel we will pass the name of this china here inside this on message received we are going to perform our action okay so the action will be javascript message message inside this we are going to load our second page okay uh so let's do it so navigation dot push replacement and we are going to load our second page that is home page dot dot okay so let's create one more page over here that is our welcome page after uh crypto verification capture verification so let's create home page dot dot okay so we are just loading our home page as soon as our crept verification is successful okay so let's import this we restart our app and let's check so i have got restarted so let me verify and as you can see as soon as we have verified we have been redirected to our welcome page okay so that's all for this video tutorial hope you got the concept of how to implement recaptcha verification in forgotten so you can just get the source code in the link in the description or you can just watch the video and do it side by side uh which will be a very best idea for best practice so thanks for watching please do subscribe protocols point thank you