Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Ajax İle Token Authentication Uygulanan Web API Tetikleme

Merhaba,

Bir önceki Ajax İle Web API Tetikleme başlıklı yazımda Ajax ile web apilere nasıl bağlantı kurulduğunu ve nasıl tetiklendiğini değerlendirmiştik. Bu içeriğimizde ise Token Authentication uygulanan web apilere tekrar Ajax ile nasıl bağlanılacağını, nasıl token talep edileceğini ve web apinin sunduğu hizmetlerden nasıl faydalanılacağını inceleyeceğiz.

Şimdi üzerine çalışacağımız web apiyi oluşturalım.

    [Authorize]
    public class PersonelController : ApiController
    {
        NorthwindEntities db = new NorthwindEntities();
        public List<Personel> GetAll() => db.Personeller.OrderByDescending(p => p.PersonelID).Select(p => new Personel
        {
            Adi = p.Adi,
            PersonelID = p.PersonelID,
            SoyAdi = p.SoyAdi,
            Unvan = p.Unvan
        }).ToList();
        public IHttpActionResult Post(Personel personel)
        {
            if (personel != null)
            {
                db.Personeller.Add(personel);
                db.SaveChanges();
                return Ok($"{personel.Adi} {personel.SoyAdi} isimli personel başarıyla eklenmiştir.");
            }
            return Ok("Personel eklenirken beklenmeyen bir hatayla karşılaşıldı.");
        }
    }

Bu, yukarıda adresini verdiğim makalede kullandığım web api ile birebir aynıdır. Sadece tek fark, “Authorize” attribute’u ile işaretlenmiştir yani bir authentication uygulanmıştır. Bu işlemle alakalı herhangi bir bilginiz yoksa buradaki makaleyi detaylı okumanızı öneririm.

Olası “Access-Control-Allow-Origin” hatalarına karşı önceki makalemde bahsettiğim gibi “WebApiConfig” dosyasında gerekli ayarları yaptığınızı varsayarak, web apiden token talep edebilmek için aşağıdaki Ajax komutlarını yazıyorum.

            $("#btnTokenAl").click(function () {
                var userName = $("#txtUserName").val();
                var password = $("#txtPassword").val();
                $.ajax({
                    url: "http://localhost:53156/token",
                    type: "POST",
                    crossDomain: true,
                    data: {
                        username: userName,
                        password: password,
                        grant_type: "password"
                    },
                    dataType: "json",
                    success: function (data) {
                        localStorage.setItem("Token", JSON.stringify(data));
                        $("#access_token").fadeIn(100, function () {
                            $("#access_token").append("<br>" + data.access_token);
                            $("#btnTokenAl").prop("disabled", true);
                        });
                    },
                    error: function (xhr, status, error) {
                        alert("Hata : " + error);
                    }
                });
            });
    <div>
        <h2>Get Token</h2>
        Username : <input type="text" id="txtUserName" /><br />
        Password : <input type="text" id="txtPassword" /><br />
        <button id="btnTokenAl">Get Token</button>
        <div id="access_token" style="color:antiquewhite;font-size:10px;display:none;"></div>
    </div>

Ajax İle Token Authentication Uygulanan Web API Tetikleme
Evet, gördüğünüz gibi token’ı elde edebiliyoruz ve bu elde ettiğimiz token’ı localStorage’a atıyoruz. Şimdi bu token ile web apiye ulaşıp, hizmetlerinden faydalanalım.

            $("#btnGetPersoneller").click(function () {
                $("#allPersonel").html("");
                var token = $.parseJSON(localStorage.getItem("Token")).access_token;
                $.ajax({
                    url: "http://localhost:53156/api/personel/GetAll",
                    type: "GET",
                    crossDomain: true,
                    dataType: "json",
                    headers: {
                        "accept": "application/json",
                        "content-type": "application/json",
                        "authorization": "Bearer " + token
                    },
                    success: function (data) {
                        $.each(data, function (IndexNo, Deger) {
                            $("#allPersonel").append(Deger.Adi + " " + Deger.SoyAdi + "<br>");
                        });
                    },
                    error: function (xhr, status, error) {
                        alert("Hata : " + error);
                    }
                });
            });
    <div>
        <h2>Get</h2>
        <button id="btnGetPersoneller">Get All</button>
        <div id="allPersonel" style="color:chocolate;font-size:12px;"></div>
    </div>

Dikkat ederseniz eğer; “headers” özelliğine gerekli token bilgilendirmesini sağlayacak “authorization”, “content-type” ve “accept” bilgisi belirtilmektedir. Bu şekilde projemizi kaydedip, çalıştırdığımızda;
Ajax İle Token Authentication Uygulanan Web API Tetikleme
hatasıyla karşılaşılacaktır.
Evet… Tekrar, domainler arası etkileşim sürecinde güvenlik kontrolleri mevzusunu barındıran hatalarla karşı karşıyayız.
Eee hoca, biz bu hatadan kaçınmak için yukarıda bahsettiğin bir önceki yazıdaki tekniği uygulamıştık” diye söylendiğinizi duyar gibiyim. Evet, haklısınız. Söylediğim tekniği uygulamış olabilirsiniz. Lakin şu anki durumun gereksinimleri ile bir önceki yazıdaki gereksinimler arasında oldukça fark olduğunu biliyorsunuz. Bizler şuanda bir güvenlik uygulanmış web api üzerinde yetkilendirme elde etmeye çalışmaktayız. Dolayısıyla, bu yetkilendirmenin dışında güvenliğinde getirisi olan ek uğraşlar olacaktır ve bu uğraşlardan öncelikli olanıda işte size önceki yazıda bahsetmiş olduğum yöntemdir. Şimdi bunun dışında web api üzerinde aşağıdaki çalışmayı gerçekleştirmeniz yeterli olacaktır.

    [EnableCors(origins: "*", headers: "*", methods: "*")]
    [Authorize]
    public class PersonelController : ApiController
    {
        .
        .
        .
    }

Gördüğünüz üzere web api üzerine “[EnableCors(origins: “*”, headers: “*”, methods: “*”)]” attributeunu eklersek eğer bu olası hatadan da kurtulmuş olacağız.

Projeyi tekrardan kaydedip, çalıştırdığımızda ve gerekli tokenı talep ettikten sonra başarılı bir şekilde çalıştığını göreceksiniz.
Ajax İle Token Authentication Uygulanan Web API Tetikleme

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. İLKER BORAHAN dedi ki:

    Hocam merhaba,
    apinin startup dosyasına

      app.UseCors(x => x
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                );
    

    bunları yazsak headers ile eklediğimiz eklemeye yinede gerek var mı ?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*