<\/div>\n
Merhaba,<\/p>\n
Bir \u00f6nceki Ajax \u0130le Web API Tetikleme<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Ajax ile web apilere nas\u0131l ba\u011flant\u0131 kuruldu\u011funu ve nas\u0131l tetiklendi\u011fini de\u011ferlendirmi\u015ftik. Bu i\u00e7eri\u011fimizde ise Token Authentication uygulanan web apilere tekrar Ajax ile nas\u0131l ba\u011flan\u0131laca\u011f\u0131n\u0131, nas\u0131l token talep edilece\u011fini ve web apinin sundu\u011fu hizmetlerden nas\u0131l faydalan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz.<\/p>\n
\u015eimdi \u00fczerine \u00e7al\u0131\u015faca\u011f\u0131m\u0131z web apiyi olu\u015ftural\u0131m.<\/p>\n
\r\n    [Authorize]\r\n    public class PersonelController : ApiController\r\n    {\r\n        NorthwindEntities db = new NorthwindEntities();\r\n        public List<Personel> GetAll() => db.Personeller.OrderByDescending(p => p.PersonelID).Select(p => new Personel\r\n        {\r\n            Adi = p.Adi,\r\n            PersonelID = p.PersonelID,\r\n            SoyAdi = p.SoyAdi,\r\n            Unvan = p.Unvan\r\n        }).ToList();\r\n        public IHttpActionResult Post(Personel personel)\r\n        {\r\n            if (personel != null)\r\n            {\r\n                db.Personeller.Add(personel);\r\n                db.SaveChanges();\r\n                return Ok($"{personel.Adi} {personel.SoyAdi} isimli personel ba\u015far\u0131yla eklenmi\u015ftir.");\r\n            }\r\n            return Ok("Personel eklenirken beklenmeyen bir hatayla kar\u015f\u0131la\u015f\u0131ld\u0131.");\r\n        }\r\n    }\r\n<\/pre>\nBu, yukar\u0131da adresini verdi\u011fim makalede kulland\u0131\u011f\u0131m web api ile birebir ayn\u0131d\u0131r. Sadece tek fark, “Authorize” attribute’u ile i\u015faretlenmi\u015ftir yani bir authentication uygulanm\u0131\u015ft\u0131r. Bu i\u015flemle alakal\u0131 herhangi bir bilginiz yoksa buradaki<\/a> makaleyi detayl\u0131 okuman\u0131z\u0131 \u00f6neririm.<\/p>\n
Olas\u0131 “Access-Control-Allow-Origin” hatalar\u0131na kar\u015f\u0131 \u00f6nceki makalemde bahsetti\u011fim gibi “WebApiConfig” dosyas\u0131nda gerekli ayarlar\u0131 yapt\u0131\u011f\u0131n\u0131z\u0131 varsayarak, web apiden token talep edebilmek i\u00e7in a\u015fa\u011f\u0131daki Ajax komutlar\u0131n\u0131 yaz\u0131yorum.<\/p>\n
\r\n            $("#btnTokenAl").click(function () {\r\n                var userName = $("#txtUserName").val();\r\n                var password = $("#txtPassword").val();\r\n                $.ajax({\r\n                    url: "http:\/\/localhost:53156\/token",\r\n                    type: "POST",\r\n                    crossDomain: true,\r\n                    data: {\r\n                        username: userName,\r\n                        password: password,\r\n                        grant_type: "password"\r\n                    },\r\n                    dataType: "json",\r\n                    success: function (data) {\r\n                        localStorage.setItem("Token", JSON.stringify(data));\r\n                        $("#access_token").fadeIn(100, function () {\r\n                            $("#access_token").append("<br>" + data.access_token);\r\n                            $("#btnTokenAl").prop("disabled", true);\r\n                        });\r\n                    },\r\n                    error: function (xhr, status, error) {\r\n                        alert("Hata : " + error);\r\n                    }\r\n                });\r\n            });\r\n<\/pre>\n\r\n    <div>\r\n        <h2>Get Token<\/h2>\r\n        Username : <input type="text" id="txtUserName" \/><br \/>\r\n        Password : <input type="text" id="txtPassword" \/><br \/>\r\n        <button id="btnTokenAl">Get Token<\/button>\r\n        <div id="access_token" style="color:antiquewhite;font-size:10px;display:none;"><\/div>\r\n    <\/div>\r\n<\/pre>\n<\/a>
\nEvet, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi token’\u0131 elde edebiliyoruz ve bu elde etti\u011fimiz token’\u0131 localStorage’a at\u0131yoruz. \u015eimdi bu token ile web apiye ula\u015f\u0131p, hizmetlerinden faydalanal\u0131m.<\/p>\n
\r\n            $("#btnGetPersoneller").click(function () {\r\n                $("#allPersonel").html("");\r\n                var token = $.parseJSON(localStorage.getItem("Token")).access_token;\r\n                $.ajax({\r\n                    url: "http:\/\/localhost:53156\/api\/personel\/GetAll",\r\n                    type: "GET",\r\n                    crossDomain: true,\r\n                    dataType: "json",\r\n                    headers: {\r\n                        "accept": "application\/json",\r\n                        "content-type": "application\/json",\r\n                        "authorization": "Bearer " + token\r\n                    },\r\n                    success: function (data) {\r\n                        $.each(data, function (IndexNo, Deger) {\r\n                            $("#allPersonel").append(Deger.Adi + " " + Deger.SoyAdi + "<br>");\r\n                        });\r\n                    },\r\n                    error: function (xhr, status, error) {\r\n                        alert("Hata : " + error);\r\n                    }\r\n                });\r\n            });\r\n<\/pre>\n\r\n    <div>\r\n        <h2>Get<\/h2>\r\n        <button id="btnGetPersoneller">Get All<\/button>\r\n        <div id="allPersonel" style="color:chocolate;font-size:12px;"><\/div>\r\n    <\/div>\r\n<\/pre>\nDikkat ederseniz e\u011fer; “headers” \u00f6zelli\u011fine gerekli token bilgilendirmesini sa\u011flayacak “authorization”, “content-type” ve “accept” bilgisi belirtilmektedir. Bu \u015fekilde projemizi kaydedip, \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda;
\n<\/a>
\nhatas\u0131yla kar\u015f\u0131la\u015f\u0131lacakt\u0131r.
\nEvet… Tekrar, domainler aras\u0131 etkile\u015fim s\u00fcrecinde g\u00fcvenlik kontrolleri mevzusunu bar\u0131nd\u0131ran hatalarla kar\u015f\u0131 kar\u015f\u0131yay\u0131z.
\n“Eee hoca, biz bu hatadan ka\u00e7\u0131nmak i\u00e7in yukar\u0131da bahsetti\u011fin bir \u00f6nceki yaz\u0131daki tekni\u011fi uygulam\u0131\u015ft\u0131k<\/strong><\/em>” diye s\u00f6ylendi\u011finizi duyar gibiyim. Evet, hakl\u0131s\u0131n\u0131z. S\u00f6yledi\u011fim tekni\u011fi uygulam\u0131\u015f olabilirsiniz. Lakin \u015fu anki durumun gereksinimleri ile bir \u00f6nceki yaz\u0131daki gereksinimler aras\u0131nda olduk\u00e7a fark oldu\u011funu biliyorsunuz. Bizler \u015fuanda bir g\u00fcvenlik uygulanm\u0131\u015f web api \u00fczerinde yetkilendirme elde etmeye \u00e7al\u0131\u015fmaktay\u0131z. Dolay\u0131s\u0131yla, bu yetkilendirmenin d\u0131\u015f\u0131nda g\u00fcvenli\u011finde getirisi olan ek u\u011fra\u015flar olacakt\u0131r ve bu u\u011fra\u015flardan \u00f6ncelikli olan\u0131da i\u015fte size \u00f6nceki yaz\u0131da bahsetmi\u015f oldu\u011fum y\u00f6ntemdir. \u015eimdi bunun d\u0131\u015f\u0131nda web api \u00fczerinde a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftirmeniz yeterli olacakt\u0131r.<\/p>\n
\r\n    [EnableCors(origins: "*", headers: "*", methods: "*")]\r\n    [Authorize]\r\n    public class PersonelController : ApiController\r\n    {\r\n        .\r\n        .\r\n        .\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere web api \u00fczerine “[EnableCors(origins: “*”, headers: “*”, methods: “*”)]” attributeunu eklersek e\u011fer bu olas\u0131 hatadan da kurtulmu\u015f olaca\u011f\u0131z.<\/p>\nProjeyi tekrardan kaydedip, \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda ve gerekli token\u0131 talep ettikten sonra ba\u015far\u0131l\u0131 bir \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.
\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki Ajax \u0130le Web API Tetikleme ba\u015fl\u0131kl\u0131 yaz\u0131mda Ajax ile web apilere nas\u0131l ba\u011flant\u0131 kuruldu\u011funu ve nas\u0131l tetiklendi\u011fini de\u011ferlendirmi\u015ftik. Bu i\u00e7eri\u011fimizde ise Token Authentication uygulanan web apilere tekrar Ajax ile nas\u0131l ba\u011flan\u0131laca\u011f\u0131n\u0131,...<\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,2402],"tags":[2432,2431,2428,2430,2399],"class_list":["post-8465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-web-api","tag-ajax-ile-token-authentication","tag-ajax-token-authentication","tag-ajax-web-api","tag-token-authentication-web-api-tetikleme","tag-web-api"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8465","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=8465"}],"version-history":[{"count":9,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8465\/revisions"}],"predecessor-version":[{"id":8477,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8465\/revisions\/8477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}