Hey guys, welcome to protocol dust point. Okay, so in this photo tutorial, we're going to learn how to implement recapture 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 recapture view for a verification process that I am not a robot. So when I press on this checkbox, so it will verify if I'm 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 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 try okay so i will just select this one recaptcha version 2. and i will just keep it as i am not a robot checkbox okay so here you need to specify your domain name so i'm making use of this you need to make use of your uh 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 condition 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 flutter project over here and remove all the default code given by flutter 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 recapture verification process and the HTML page we are going to display in our flutter app UI.
Okay, so I have already created a Flutter 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 pubspecification.yaml file and under dependency section over here, just add slide.
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.dat 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 mode unrestricted okay and now on view created controller and inside this controller let's load our web 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 protocol.spoint.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 flutter app okay so to load your website you need to add some permission in your android module so just go to android module 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 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 assets folder i will just create one more directory that is web page okay web pages 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.yaml and over here just we will just give the access to this folders okay so assets so the path is assets.webpages okay so now your flutter app will be able to access this folder so let's go to main.dat 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 app 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 pop get button so i'll just do it okay so see after hitting this pop get button and giving the access to this file we are going to we are able to load this index.html page in our flutter 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 come 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.php we are going to load our reCAPTCHA widget for our web view 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 flutter 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 web page. 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 over here, let's create an array. and inside this we will just make use of javascript channel again and inside this channel we will pass the name of this channel 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 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 crypto verification, captcha verification. So let's create home page dot dot.
Okay, so we are just loading our home page as soon as our captcha verification is successful. okay so let's import this let me restart our app and let's check so app 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 recapture verification in flutter 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 which will be a very best idea for best practice. So thanks for watching.
We will do subscribe protocol as point. Thank you.