ในบทความนี้ เราจะมาแนะนำการ แสดง ข้อมูล ip ผู้เข้าชม Website ด้วย ipstack.com กันครับ
ipstack.com คืออะไร
ipstack คือ Web Api ที่ให้บริการในการตรวจสอบ ข้อมูลผู้เข้าชม Web Site ของเรา โดยสามารถเก็บข้อมูลพื้นฐาน เช่น เลข IP, ประเทศ (Country) ,ตำแหน่งที่ตั้ง (Latitude,Longitude) , สกุลเงิน (Currency) , เขตเวลา (Time Zone) เป็นต้น
สามารถดูตัวอย่างการใช้งานเพิ่มเติมได้ที่ https://ipstack.com/documentation
วิธีการใช้งาน เริ่มต้นเราต้องเข้าไปที่ https://ipstack.com/
เมื่อกด SIGN UP FREE จะพบกับหน้าจอ แสดงราคา (Pricing)
ซึ่งเราสามารถใช้งานฟรีได้ โดยที่มีข้อจำกัดคือ สามารถเรียกใช้งาน ipstack ได้ 10,000 ครั้ง/เดือน ( คำนวณคร่าว ๆ ประมาณ 333 ครั้ง/วัน) ซึ่ง หากเป็นเว็บที่มีผู้เข้าชมเป็นจำนวนมาก อาจต้องใช้แบบ เสียค่าบริการครับ ในเบื้องต้นให้เราเลือกแบบ Free ไปก่อนครับเพื่อทดสอบการใช้งาน
เมื่อสมัครสมาชิกเรียบร้อยแล้ว เราก็จะได้ API Access Key ดังภาพ ครับ
ตัวอย่างการใช้งาน สร้างไฟล์ index.html
ในตัวอย่าง เมื่อมีการเปิดหน้า index.html จะมีการแสดง หมายเลข ip และ ข้อมูลเบื้องต้น ของผู้เข้าชมเว็บไซต์
โดยนำ API access Key ที่ได้ตอนสมัคร สมาชิก ไปใส่ใน access_key ใน code ด้านล่าง
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Example Your IP</title>
</head>
<body>
<div class="container">
<table class="table" id="result"></table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>
$(function(){
let access_key = 'YOUR_ACCESS_KEY';
// get the API result via jQuery.ajax
$.ajax({
url: 'http://api.ipstack.com/check?access_key=' + access_key,
dataType: 'jsonp',
success: function(json) {
console.log(json);
let result = '<tr><th width="20%">ip</th><td>' + json.ip + '</td></tr>' +
'<tr><th>country_flag</th><td><img src="' + json.location.country_flag + '" width="30px"></td></tr>' +
'<tr><th>country_name</th><td>' + json.country_name + '</td></tr>' +
'<tr><th>region_name</th><td>' + json.region_name + '</td></tr>' +
'<tr><th>city</th><td>' + json.city + '</td></tr>' +
'<tr><th>zip</th><td>' + json.zip + '</td></tr>'
'<tr><th>latitude</th><td>' + json.latitude + '</td></tr>' +
'<tr><th>longitude</th><td>' + json.longitude + '</td></tr>';
$('#result').html(result);
}
});
});
</script>
</body>
</html>
ตัวอย่างการแสดงผล
ขอขอบคุณข้อมูลจาก https://ipstack.com/