﻿
{"id":6444,"date":"2017-05-27T16:39:09","date_gmt":"2017-05-27T16:39:09","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=6444"},"modified":"2017-05-27T16:39:09","modified_gmt":"2017-05-27T16:39:09","slug":"asp-net-mvcde-recaptcha-entegrasyonu","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvcde-recaptcha-entegrasyonu\/","title":{"rendered":"Asp.NET MVC&#8217;de reCAPTCHA Entegrasyonu"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Merhaba,<\/p>\n<p>Yaz\u0131l\u0131m dendi\u011fi zaman benim akl\u0131ma bilgiyi g\u00fcvenli \u015fekilde i\u015fleyen bir sistem gelmektedir. Asl\u0131nda bunca zahmet, bunca dert bir bilgiyi d\u00fcn ve bug\u00fcnden daha g\u00fcvenli bir ortamda nas\u0131l i\u015fleyebiliriz sorunsal\u0131 \u00fczerinedir. Hatta yaz\u0131l\u0131mlarda g\u00fcvenlik o derece ciddiyet gerektiren bir husustur ki, g\u00fcn\u00fcm\u00fcz\u00fcn devleri taraf\u0131ndan desteklenmekte ve \u00fczerine d\u00fcnyan\u0131n kullanabilece\u011fi teknolojiler \u00fcretilmektedir. \u0130\u015fte bunlardan biriside Google taraf\u0131ndan piyasaya s\u00fcr\u00fclen reCAPTCHA teknolojisidir.<\/p>\n<p>Google internette s\u00f6z\u00fc ge\u00e7en bir g\u00fc\u00e7 olmas\u0131 a\u00e7\u0131s\u0131ndan interneti; \u00f6znel i\u00e7erik ve do\u011fru bilgi bar\u0131nd\u0131ran, g\u00fcvenilir bir patform haline getirmek u\u011fra\u015f\u0131yla birlikte biryandan da internet sitelerinin g\u00fcvenirlili\u011finide destekleyen bir vizyona sahiptir. Bu gayesi reCAPTCHA \u015firketini y\u0131llar \u00f6nce sat\u0131n almas\u0131ndan dolay\u0131 net bir \u015fekilde g\u00f6r\u00fclebilmektedir.<\/p>\n<p>reCAPTCHA teknolojisi ilk zamanlar bir bot taraf\u0131ndan okunmas\u0131 neredeyse imkans\u0131z metinleri kullan\u0131c\u0131lara do\u011frulatt\u0131r\u0131rken, g\u00fcn\u00fcm\u00fczde belli ba\u015fl\u0131 sorular neticesinde resimsel i\u015flemlerle do\u011frulatma mant\u0131\u011f\u0131 g\u00fctmektedir. Hatas\u0131z kul olmaz mant\u0131\u011f\u0131yla olay\u0131 de\u011ferlendiren reCAPTCHA belli bir oranta hata pay\u0131nada g\u00f6z yummakta ve do\u011frulamay\u0131 ge\u00e7erli g\u00f6rmektedir.<\/p>\n<p>reCAPTCHA hakk\u0131nda bu kadar genel k\u00fclt\u00fcr san\u0131r\u0131m yeterlidir. \u015eimdi bir yaz\u0131l\u0131mc\u0131 g\u00f6z\u00fcyle konuyu de\u011ferlendirelim ve Asp.NET MVC mimarisinde reCAPTCHA entegrasyonunun nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m ele alal\u0131m.<\/p>\n<p>\u00d6ncelikle bo\u015f bir Asp.NET MVC projesi a\u00e7al\u0131m ve ard\u0131ndan a\u015fa\u011f\u0131daki talimatlar\u0131 s\u0131ras\u0131yla uygulayal\u0131m.<\/p>\n<p>Google reCAPTCHA&#8217;y\u0131 projenize entegre etmek istiyorsan\u0131z \u00f6ncelikle projenizle ilgili bilgi verece\u011finiz ve reCAPTCHA API&#8217;sine ula\u015fabilece\u011finiz adrese <a href=\"https:\/\/www.google.com\/recaptcha\/intro\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">buradan<\/a> eri\u015febilirsiniz.<\/p>\n<p>\u0130lgili sitenin sa\u011f \u00fcst k\u00f6\u015fesindeki &#8220;Get reCAPTCHA&#8221; adresine t\u0131klay\u0131n.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6454\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu.png\" alt=\"Asp.NET MVC'de reCAPTCHA Entegrasyonu\" width=\"1039\" height=\"171\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu.png 1039w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-300x49.png 300w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-768x126.png 768w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-1024x169.png 1024w\" sizes=\"auto, (max-width: 1039px) 100vw, 1039px\" \/><\/a><br \/>\nTabi ki de reCAPTCHA platformuna eri\u015febilmek i\u00e7in Google oturumunu a\u00e7man\u0131z gerekecektir. Bu k\u0131s\u0131mlar\u0131 yapt\u0131\u011f\u0131n\u0131z\u0131 varsay\u0131yorum.<\/p>\n<p>A\u00e7\u0131lan sayfada kar\u015f\u0131n\u0131za &#8220;Register a new site&#8221; alan\u0131 gelecektir. Bu alandaki gerekli form, reCAPTCHA entegrasyonu i\u00e7in gerekli proje bilgisini almaktad\u0131r.<\/p>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6458\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-1.png\" alt=\"Asp.NET MVC'de reCAPTCHA Entegrasyonu\" width=\"488\" height=\"521\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-1.png 488w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-1-281x300.png 281w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/a><\/p>\n<p>Yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde de g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere; &#8220;Label&#8221; k\u0131sm\u0131 o an olu\u015fturdu\u011fumuz reCAPTCHA uygulamas\u0131na isim vermemizi sa\u011flamakta, &#8220;Choose the type of reCAPTCHA&#8221; k\u0131sm\u0131 ise kullanaca\u011f\u0131m\u0131z reCAPTCHA&#8217;n\u0131n tipini belirlemektedir. &#8220;Domains&#8221; k\u0131sm\u0131nda ise bu uygulaman\u0131n hangi sitede kullan\u0131laca\u011f\u0131n\u0131 belirtiyoruz. Dikkat ederseniz biz \u015fimdilik localde \u00f6rneklendirme yapt\u0131\u011f\u0131m\u0131z i\u00e7in &#8220;localhost&#8221; de\u011ferini belirtmi\u015f bulunmaktay\u0131z. Projeyi publish ettikten sonra bu k\u0131sma gelip ilgili k\u0131sm\u0131 do\u011fru web adresiyle de\u011fi\u015ftirebilirsiniz.<\/p>\n<p>Velhas\u0131l ilgili alan\u0131 do\u011fru bir \u015fekilde doldurduktan sonra &#8220;Register&#8221; butonuna bas\u0131n\u0131z.<\/p>\n<p>Bu a\u015famadan sonra kar\u015f\u0131m\u0131za gelecek ekranda bir\u00e7ok bilginin yan\u0131nda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi as\u0131l bizi ilgilendiren alanlarda gelecektir.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6462\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2.png\" alt=\"Asp.NET MVC'de reCAPTCHA Entegrasyonu\" width=\"925\" height=\"435\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2.png 925w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2-300x141.png 300w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2-768x361.png 768w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2-520x245.png 520w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-2-720x340.png 720w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><\/a><\/p>\n<p>Dikkat ederseniz &#8220;Site key&#8221; ve &#8220;Secret key&#8221; verileri birazdan programatik k\u0131s\u0131mda kullanaca\u011f\u0131m\u0131z ve bizim program\u0131m\u0131zla reCAPTCHA uygulamas\u0131 aras\u0131nda ba\u011f\u0131nt\u0131y\u0131 kuracak verilerdir. &#8220;Client side integration&#8221; k\u0131sm\u0131 ise reCAPTCHA API&#8217;sinin yolunu ve uygulamay\u0131 getirecek html kodlar\u0131n\u0131 bizlere sunmaktad\u0131r.<\/p>\n<p>Art\u0131k reCAPTCHA uygulamas\u0131n\u0131n ayarlar\u0131n\u0131 yapm\u0131\u015f bulunmaktay\u0131z. \u015eimdi s\u0131ra Asp.NET MVC projemizde in\u015faya gelmi\u015ftir.<\/p>\n<p>\u00d6ncelikle yapmam\u0131z gereken Layout sayfam\u0131zda a\u015fa\u011f\u0131daki API adresini &lt;head&gt;&#8230;&lt;\/head&gt; taglar\u0131 aras\u0131na eklemektir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;https:\/\/www.google.com\/recaptcha\/api.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Ard\u0131ndan reCAPTCHA uygulamas\u0131n\u0131 getirecek olan a\u015fa\u011f\u0131daki kodu ilgili alana ekleyiniz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@using (Html.BeginForm(&quot;Post&quot;, &quot;Home&quot;, FormMethod.Post))\r\n{\r\n    &lt;!--Kendi Site keyinizle de\u011fi\u015ftirin.--&gt;\r\n    &lt;div class=&quot;g-recaptcha&quot; data-sitekey=&quot;6LeKKSMUAAAAANH-PmFcaKPBm5E79aZGX85RI4l2&quot;&gt;&lt;\/div&gt;\r\n    &lt;input type=&quot;submit&quot; value=&quot;Post Et&quot; \/&gt;\r\n    &lt;br \/&gt;\r\n    @TempData&#x5B;&quot;Message&quot;]\r\n}\r\n<\/pre>\n<p>Dikkat ederseniz bir form i\u00e7erisinde reCAPTCHA kodu eklenmi\u015ftir. Birazdan butonu tetikleyece\u011fiz ve reCAPTCHA&#8217;y\u0131 do\u011frulayaca\u011f\u0131z.<\/p>\n<p>Evet&#8230; \u015euana kadar yapm\u0131\u015f oldu\u011fumuz i\u015flemler neticesinde projemizi derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131z zaman reCAPTCHA&#8217;y\u0131 g\u00f6rebilmekteyiz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-3.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-3.png\" alt=\"Asp.NET MVC&#039;de reCAPTCHA Entegrasyonu\" width=\"313\" height=\"117\" class=\"aligncenter size-full wp-image-6469\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-3.png 313w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-3-300x112.png 300w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/a><\/p>\n<p>\u015eimdide s\u0131ra programatik \u00e7al\u0131\u015fmaya geldi.<\/p>\n<p>\u00d6ncelikle projemizde JSON i\u015flemleri yap\u0131laca\u011f\u0131ndan ve bu i\u015flemleri Newtonsoft k\u00fct\u00fcphanesiyle icra edece\u011fimizden dolay\u0131 ilk i\u015f olarak a\u015fa\u011f\u0131daki gibi Nuget&#8217;tan Newtonsoft k\u00fct\u00fcphanesini projenize entegre ediniz.<\/p>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-4.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-4.png\" alt=\"Asp.NET MVC&#039;de reCAPTCHA Entegrasyonu\" width=\"415\" height=\"178\" class=\"aligncenter size-full wp-image-6470\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-4.png 415w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2017\/05\/Asp.NET-MVCde-reCAPTCHA-Entegrasyonu-4-300x129.png 300w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/p>\n<p>Ard\u0131ndan yap\u0131lacak Response&#8217;u kar\u015f\u0131layacak a\u015fa\u011f\u0131daki modeli olu\u015fturun.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    public class CaptchaResponse\r\n    {\r\n        &#x5B;JsonProperty(&quot;success&quot;)]\r\n        public bool Success { get; set; }\r\n\r\n        &#x5B;JsonProperty(&quot;error-codes&quot;)]\r\n        public List&lt;string&gt; ErrorCodes { get; set; }\r\n    }\r\n<\/pre>\n<p>Bu i\u015flemden sonra &#8220;Home(Controller).cs&#8221; isimli controller s\u0131n\u0131f\u0131m\u0131z i\u00e7erisindeki &#8220;Post&#8221; action metodunun i\u00e7inde a\u015fa\u011f\u0131daki i\u015flemleri yap\u0131n.(<em>Bu metotta \u00e7al\u0131\u015fmam\u0131z\u0131n sebebi, reCAPTCHA&#8217;n\u0131n bulundu\u011fu formun bu metoda post edilmesidir.<\/em>)<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &#x5B;HttpPost]\r\n        public ActionResult Post()\r\n        {\r\n            var response = Request&#x5B;&quot;g-recaptcha-response&quot;];\r\n            const string secret = &quot;6LeKKSMUAAAAAC4s-mflMky8XggtaatxKcx-cQ1y&quot;;\r\n            \/\/Kendi Secret keyinizle de\u011fi\u015ftirin.\r\n\r\n            var client = new WebClient();\r\n            var reply =\r\n                client.DownloadString(\r\n                    string.Format(&quot;https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret={0}&amp;response={1}&quot;, secret, response));\r\n\r\n            var captchaResponse = JsonConvert.DeserializeObject&lt;CaptchaResponse&gt;(reply);\r\n\r\n            if (!captchaResponse.Success)\r\n                TempData&#x5B;&quot;Message&quot;] = &quot;L\u00fctfen g\u00fcvenli\u011fi do\u011frulay\u0131n\u0131z.&quot;;\r\n            else\r\n                TempData&#x5B;&quot;Message&quot;] = &quot;G\u00fcvenlik ba\u015far\u0131yla do\u011frulanm\u0131\u015ft\u0131r.&quot;;\r\n            return RedirectToAction(&quot;Index&quot;);\r\n        }\r\n<\/pre>\n<p>Bu i\u015flemlerden sonra projenizi derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131z vakit reCAPTCHA&#8217;n\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.<\/p>\n<p>Umar\u0131m bol bol faydalan\u0131rs\u0131n\u0131z&#8230;<br \/>\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Merhaba, Yaz\u0131l\u0131m dendi\u011fi zaman benim akl\u0131ma bilgiyi g\u00fcvenli \u015fekilde i\u015fleyen bir sistem gelmektedir. Asl\u0131nda bunca zahmet, bunca dert bir bilgiyi d\u00fcn ve bug\u00fcnden daha g\u00fcvenli bir ortamda nas\u0131l i\u015fleyebiliriz sorunsal\u0131 \u00fczerinedir. Hatta yaz\u0131l\u0131mlarda g\u00fcvenlik&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[746,1824,1822,1821,1823,1825,421,1820],"class_list":["post-6444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-mvc","tag-asp-net-mvc","tag-asp-net-mvc-google-recaptcha","tag-asp-net-mvc-recaptcha","tag-google-recaptcha","tag-mvc-recaptcha","tag-newtonsoft","tag-recaptcha","tag-recaptcha-api"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/6444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=6444"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/6444\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3453"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=6444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=6444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=6444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}