{"id":226,"date":"2019-07-18T13:49:25","date_gmt":"2019-07-18T16:49:25","guid":{"rendered":"http:\/\/xaxowareti.com.br\/?p=226"},"modified":"2019-07-18T13:49:25","modified_gmt":"2019-07-18T16:49:25","slug":"google-recaptcha-v2-tutorial-with-example-demo-in-php","status":"publish","type":"post","link":"https:\/\/xaxowareti.com.br\/?p=226","title":{"rendered":"Google reCAPTCHA V2 tutorial with Example Demo in PHP"},"content":{"rendered":"\n<p>Google has announced new service to prevent spams and attacks to your website. They name it&nbsp;<strong>\u201cNO CAPTCHA reCAPTCHA\u201d&nbsp;<\/strong>. Google reCAPTCHA is designed to protect your website from spams and abuse.<\/p>\n\n\n\n<p>In this tutorial i am going to show you how to integrate it into your website. For demo purpose i made one simple script. Please look at the demo.<a href=\"http:\/\/demo.codeforgeek.com\/google-captcha\/\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE DEMO<\/a><a href=\"https:\/\/github.com\/codeforgeek\/Google-recaptcha-php\" target=\"_blank\" rel=\"noreferrer noopener\">DOWNLOAD<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Google has deprecated the reCAPTCHA V1. We have updated the article to meet the changes of Google reCAPTCHA V2.<\/p><\/blockquote>\n\n\n\n<p>Table of Contents<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/codeforgeek.com\/google-recaptcha-tutorial\/#Register_your_website_and_get_Secret_Key\">Register your website and get Secret Key.<\/a><\/li><li><a href=\"https:\/\/codeforgeek.com\/google-recaptcha-tutorial\/#Integrate_Google_reCAPTCHA_in_your_website\">Integrate Google reCAPTCHA in your website.<\/a><\/li><li><a href=\"https:\/\/codeforgeek.com\/google-recaptcha-tutorial\/#Sample_project\">Sample project<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Register your website and get Secret Key.<\/h2>\n\n\n\n<p>Very first thing you need to do is register your website on&nbsp;<strong>Google recaptcha&nbsp;<\/strong>to do that click&nbsp;<a href=\"https:\/\/www.google.com\/recaptcha\/admin\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>Login to your Google account and create the app by filling the form. Select the reCAPTCHA v2 and in that select \u201cI am not a robot\u201d checkbox option.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/image.codeforgeek.com\/wp-content\/uploads\/2014\/12\/google-recaptcha-v2-create-app.png\" alt=\"google recaptcha v2 create app\" class=\"wp-image-5517\"\/><\/figure><\/div>\n\n\n\n<p>Once submit, Google will provide you following two&nbsp;information.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Site key<\/li><li>Secret key<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/image.codeforgeek.com\/wp-content\/uploads\/2014\/12\/Google-recaptcha-v2-credentials.png\" alt=\"Google recaptcha v2 credentials\" class=\"wp-image-5518\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Integrate Google reCAPTCHA in your website.<\/h2>\n\n\n\n<p>To integrate it into your website you need to put it in client side as well as in Server side. In client HTML page you need to integrate this line before &lt;HEAD&gt; tag.&lt;script src=&#8217;https:\/\/www.google.com\/recaptcha\/api.js&#8217; async defer&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>And to show the widget into your form you need to put this below contact form, comment form etc.&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\">div<\/a>&nbsp;class=&#8221;g-recaptcha&#8221;&nbsp;data-sitekey=&#8221;== Your site Key ==&#8221;&gt;&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\">div<\/a>&gt;<\/p>\n\n\n\n<p>When the form get submit to Server, this script will send&nbsp;<strong>\u2018g-recaptcha-response\u2019<\/strong>&nbsp;as a POST data. You need to verify it in order to see whether user has checked the Captcha or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sample project<\/h2>\n\n\n\n<p>Here is the HTML code for the simple form with comment box and submit button. On submit of this form we will use PHP in back-end to do the Google reCAPTCHA validation.<strong>Index.html<\/strong>&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/html.html\">html<\/a>&gt;<br>&nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/head.html\">head<\/a>&gt;<br>&nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/title.html\">title<\/a>&gt;Google recapcha demo &#8211; Codeforgeek&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/title.html\">title<\/a>&gt;<br>&nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\">script<\/a>&nbsp;src=&#8217;https:\/\/www.google.com\/recaptcha\/api.js&#8217;&nbsp;async defer&gt;&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\">script<\/a>&gt;<br>&nbsp; &lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/head.html\">head<\/a>&gt;<br>&nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/body.html\">body<\/a>&gt;<br>&nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h1.html\">h1<\/a>&gt;Google reCAPTHA Demo&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/h1.html\">h1<\/a>&gt;<br>&nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/form.html\">form<\/a>&nbsp;id=&#8221;comment_form&#8221;&nbsp;action=&#8221;form.php&#8221;&nbsp;method=&#8221;post&#8221;&gt;<br>&nbsp; &nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\">input<\/a>&nbsp;type=&#8221;email&#8221;&nbsp;placeholder=&#8221;Type your email&#8221;&nbsp;size=&#8221;40&#8243;&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;<br>&nbsp; &nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/textarea.html\">textarea<\/a>&nbsp;name=&#8221;comment&#8221;&nbsp;rows=&#8221;8&#8243;&nbsp;cols=&#8221;39&#8243;&gt;&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/textarea.html\">textarea<\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;<br>&nbsp; &nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\">input<\/a>&nbsp;type=&#8221;submit&#8221;&nbsp;name=&#8221;submit&#8221;&nbsp;value=&#8221;Post comment&#8221;&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/br.html\">br<\/a>&gt;<br>&nbsp; &nbsp; &nbsp; &lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\">div<\/a>&nbsp;class=&#8221;g-recaptcha&#8221;&nbsp;data-sitekey=&#8221;=== Your site key ===&#8221;&gt;&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\">div<\/a>&gt;<br>&nbsp; &nbsp; &lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/form.html\">form<\/a>&gt;<br>&nbsp; &lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/body.html\">body<\/a>&gt;<br>&lt;\/<a href=\"http:\/\/december.com\/html\/4\/element\/html.html\">html<\/a>&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/image.codeforgeek.com\/wp-content\/uploads\/2014\/12\/Screenshot-from-2014-12-05-103646.png\"><img decoding=\"async\" src=\"https:\/\/image.codeforgeek.com\/wp-content\/uploads\/2014\/12\/Screenshot-from-2014-12-05-103646.png\" alt=\"google recaptcha form\" class=\"wp-image-960\"\/><\/a><\/figure>\n\n\n\n<p>This will generate this form.<br><br>On server side i am using PHP for now. So on Form submit request we will check the POST variable.<strong>form.php<\/strong>&lt;?php<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$email;$comment;$captcha;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if(<a href=\"http:\/\/www.php.net\/isset\">isset<\/a>($_POST[&#8216;email&#8217;])){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$email=$_POST[&#8216;email&#8217;];<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if(<a href=\"http:\/\/www.php.net\/isset\">isset<\/a>($_POST[&#8216;comment&#8217;])){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$comment=$_POST[&#8216;comment&#8217;];<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if(<a href=\"http:\/\/www.php.net\/isset\">isset<\/a>($_POST[&#8216;g-recaptcha-response&#8217;])){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$captcha=$_POST[&#8216;g-recaptcha-response&#8217;];<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if(!$captcha){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;echo&nbsp;&#8216;&lt;h2&gt;Please check the the captcha form.&lt;\/h2&gt;&#8217;;<br><a href=\"http:\/\/www.php.net\/exit\">exit<\/a>;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$secretKey&nbsp;=&nbsp;&#8220;Put your secret key here&#8221;;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$ip&nbsp;=&nbsp;$_SERVER[&#8216;REMOTE_ADDR&#8217;];<br><em>\/\/ post request to server<\/em><br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$url&nbsp;=&nbsp;&#8216;https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret=&#8217;&nbsp;.<a href=\"http:\/\/www.php.net\/urlencode\">urlencode<\/a>($secretKey)&nbsp;.&nbsp;&nbsp;&#8216;&amp;response=&#8217;&nbsp;.&nbsp;<a href=\"http:\/\/www.php.net\/urlencode\">urlencode<\/a>($captcha);<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$response&nbsp;=&nbsp;<a href=\"http:\/\/www.php.net\/file_get_contents\">file_get_contents<\/a>($url);<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;$responseKeys&nbsp;=&nbsp;<a href=\"http:\/\/www.php.net\/json_decode\">json_decode<\/a>($response,true);<br><em>\/\/ should return JSON with success as true<\/em><br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if($responseKeys[&#8220;success&#8221;])&nbsp;{<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;echo&nbsp;&#8216;&lt;h2&gt;Thanks for posting comment&lt;\/h2&gt;&#8217;;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}&nbsp;else&nbsp;{<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;echo&nbsp;&#8216;&lt;h2&gt;You are spammer ! Get the @$%K out&lt;\/h2&gt;&#8217;;<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}<br>?&gt;<\/p>\n\n\n\n<p>try out the demo to see how it works.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google has announced new service to prevent spams and attacks to your website. They name it&nbsp;\u201cNO CAPTCHA reCAPTCHA\u201d&nbsp;. Google reCAPTCHA is designed to protect your website from spams and abuse. In this tutorial i am going to show you how to integrate it into your website. For demo purpose i made one simple script. Please [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-sem-categoria"],"_links":{"self":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=226"}],"version-history":[{"count":1,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/226\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}