e
sv

Javascript İle Kullanıcı İP,Cihaz Bilgileri ve Lokasyon Öğrenme (Ajax,Jquery,Axios)

Javascript İle Kullanıcı İP,Cihaz Bilgileri ve Lokasyon Öğrenme (Ajax,Jquery,Axios)
avatar

Yazılım Method

  • e 3

    Mutlu

  • e 1

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 1

    Üzgün

Websitemize giren kullanıcıların ip adreslerini cihaz bilgilerini lokasyonunu öğrenmek isteyebiliriz. Bu bilgileri çerezde , LocalStorage’de tutmak veya veri tabanına kayıt edebiliriz ama herşeyden önce bu bilgileri nasıl bulacağız ? nasıl kullanabiliriz ? niçin kullanmalıyız ? gibi sorulara yanıt bulabilirsiniz.

Javascript kullanıcı tarafında yani clientte çalışırken cihaz bilgilerine rahatlıkla ulaşabilmektedir . Bu Javascriptin bulabileceği cihaz bilgileri :

  • İşletim sistemi
  • Browserın kullandığı yazılımı
  • Cihazın tam bilgileri
  • bluetooth
  • pano (clipboard)

ve bunların daha fazlasına consola window.navigator yazmanız yeterlidir. Bu bilgiler bize bir yere kadar yardımcı olmaktadır ama daha fazlasınada ihyicamız olabilir mesela kullanıcının ipsine göre konumu gibi konularda yetersiz kalmaktadır. Bundan dolayı api servisleri kullanılmakta.

İP Adresi ve Cihaz Bilgileri Niçin Kullanılır ?

Bu sorunun cevabı yazılımınıza göre değişir ve çokçada örneklendirebilirz.En basitinden ip adresi ile ban atabiliriz ama daha fazlası listede :

  • Kullanıcı Kayıt / Giriş
  • Kullanıcının işletim sistemine göre uygulama versiyon çıkartma
  • İP adresinden lokasyon ile lokasyona özel alternatifler
  • İP log ile yığılmaları önlemek
  • Cihaz bilgisinden dili öğrenerek otomatik çevirim yapmak

gibi yararları olmaktadır.

Javascript İP Adresi Nasıl Öğrenilir ?

Aslında bunu programlama diller yapabiliyorken javascript API‘ler arayıcılığı ile rahatlıkla sağlamaktadır. API servisleri ile ihtiyacımız olan servisi kullanabiliriz ama piyasada ücretli ve ücretsiz API servisler bulunmakta . Ben bu makalemde cloudflare ‘in api servisi kullanacağım.

Neden cloudflare derseniz sağlamış oldukları servisi ihtiyaçlarımızı karşılıyor bunun karşılığında ücretsiz erişim ve istek sayısına tabi tutmuyor.Aşağıda bulunan link cloudflarin api linkidir. Eğer Açarsanız kendi tarayıcınızda sizin bilgilerinizi verecektir.

https://www.cloudflare.com/cdn-cgi/trace

Bu adresten bilgileri AJAX,Jquery ve Axios ile nasıl elde edeciğiz ? kısaca direk buraya GET isteği göndererek bu işlem sonucu response alarak bu datayı kendimizce ayıklayacağız.

Ajax ile İP, Konum ve Cihaz Bilgileri Nasıl Alınır ?

Bu işlemi yaparken XMLHttpRequest sınıfını kullanıyoruz. Öncelikle bunu bir değişkene atıyalım ardından buna onreadystatechange methodunu uygulayalım eğer işlemimiz gitmiş ise ve 200 cevabı gelirse artık bilgileri almaya hazırız demektir. Aşağıda kısaca örneğini yaptım

var istek= new XMLHttpRequest();
istek.onreadystatechange=function(){
    if(this.readyState==4 && this.status==200){
        let veri=this.responseText;
        console.log(veri)
    }
};
istek.open("GET","https://www.cloudflare.com/cdn-cgi/trace.json",true);
istek.send();

Bu istek sonucu bize text datası döndürecektir ama json olsaydı işimiz daha basit olabilirdi ama bu api bizim isteklerimizi fazlasıyla karşılamaktadır.

Şimdi dönen datayı ayıklarsak genel olarak boşluk (\n) ve = kullanılmış biz bunları kullanarak ayırma işlemi yapacağımızdan split(‘\n’) fonksiyonundan yararlanacağız . İşlem sonucu bize Array yani dizi döndürdü . Dizi içerisinde değeri elde ettikten sonra tekrar split(‘=’) kullanarak datayı kendi içerisinde ayıracağız bu işlemleri yaparken değişkenlere atayın. Daha somut olabilmesi için aşağıda size örnek bıraktık 🙂

var istek= new XMLHttpRequest();
istek.onreadystatechange=function(){
    if(this.readyState==4 && this.status==200){
        let veri=this.responseText.split('\n');
        console.log(veri);

        let ip=veri[2].split('=')[1];
        console.log(ip);

        let cihaz=veri[5].split('=')[1];
        console.log(cihaz);
        
        let konum=veri[8].split('=')[1];
        console.log(konum);
    }
};
istek.open("GET","https://www.cloudflare.com/cdn-cgi/trace.json",true);
istek.send();

ajax için işlemler bu kadardı şimdi jquery ve axios için analatacağım.

Jquery ile İP,Konum ve Cihaz Bilgileri Nasıl Alınır

Jquery kullanarakta daha az kod ve basit bir şekilde bu işlemi halledebiliriz hatta herhangi bir sorun ile karşılaştığımızda hata mesajıda kullanıcıya gösterebilirsiniz jquery ile yapımı aşağıdaki şekildedir bazı detaylara ajaxta fazlasıyla girdim 🙂


$(function () { 
    var url="https://www.cloudflare.com/cdn-cgi/trace";
    
    // $.ajax().done().fail();
    $.ajax({ method:"GET", url:url}).done(function (response) { 
            let veri=response.split('\n');
            console.log(veri);
            let ip=veri[2].split('=')[1];
            console.log(ip);

            let cihaz=veri[5].split('=')[1];
            console.log(cihaz);
            
            let konum=veri[8].split('=')[1];
            console.log(konum);

    }).fail(function () { 
        console.log('Veri Alırken Hata Oluştu')
    });
})

Axios ile İP,Konum ve Cihaz Bilgileri Nasıl Alınır

Axios kullanarak API kullanımı ajax ve jquerye göre oldukça basittir. İlk olarak axios kullanarak bir GET isteği oluşturacağız . Bu istek sonucunda rest api tarzında olduğundan dolayı bize response döndürecektir. Response’ta ise data bulunmaktadır yani bizim verilerimiz datadadır. Aşağıda basit bir örnek bıraktım 😉

axios.get('https://www.cloudflare.com/cdn-cgi/trace')
    .then(response=>{
        //console.log(response);
            let veri=response.data.split('\n');
            console.log(veri);
            let ip=veri[2].split('=')[1];
            console.log(ip);

            let cihaz=veri[5].split('=')[1];
            console.log(cihaz);
            
            let konum=veri[8].split('=')[1];
            console.log(konum);
    })
    .catch(e=>{
        console.error('Hata')
    }) 

Sıradaki içerik:

Javascript İle Kullanıcı İP,Cihaz Bilgileri ve Lokasyon Öğrenme (Ajax,Jquery,Axios)