1.30 Mikrotik Login QR Code
โพสต์แล้ว: ศุกร์ 17 มี.ค. 2017 12:47 pm
1.30 Mikrotik Login QR Code
บทความสำหรับ: ผู้ที่มีความรู้เกี่ยวกับระบบเครือข่ายในระดับเบื้องต้นถึงปานกลาง (v1.1)
โดย เจตน์สันติ์ ยาวิลาศ, วิทวัส โฉมประเสริฐ, ศุภสิทธิ์ ศิริพานิชกร, โกสินทร์
คำถาม
มีอุปกรณ์ Mikrotik อยู่แล้ว ต้องการทำ Hotspot โดยสามารถ กำหนด user และสิทธิการใช้งาน โดยผู้ใช้เองสามารถ login ผ่านการสแกน QR Code ได้เลย
คำตอบ
ข้อมูลสินค้าแบบมัลติมีเดีย (Multimedia)
จบบทความ
รายละเอียดการให้บริการจากทีมงาน SYS2U.COM Xpert Zone
บทความสำหรับ: ผู้ที่มีความรู้เกี่ยวกับระบบเครือข่ายในระดับเบื้องต้นถึงปานกลาง (v1.1)
โดย เจตน์สันติ์ ยาวิลาศ, วิทวัส โฉมประเสริฐ, ศุภสิทธิ์ ศิริพานิชกร, โกสินทร์
คำถาม
มีอุปกรณ์ Mikrotik อยู่แล้ว ต้องการทำ Hotspot โดยสามารถ กำหนด user และสิทธิการใช้งาน โดยผู้ใช้เองสามารถ login ผ่านการสแกน QR Code ได้เลย
คำตอบ
- บทความนี้ ทำต่อเนื่องหลังจากมีการติดตั้ง คอนฟิก userman แล้วน่ะครับ
3.2 ติดตั้ง RouterOS ผ่าน NetInstall + ติดตั้ง USER-MANAGER
* เวอร์ชั่นใหม่ๆ โหลดFW แตกไฟล์ แล้วลากใส่ winbox restart ได้เลยครับ ข้ามในส่วนของ netinstall ได้เลย
3.2.1 userman - การกำหนด profiles และสร้าง user - ตรวจเช็ค Hotspot server profile
- ใน userman เมนู Profiles > Limitations
สร้าง Limit 1Hr(5m/1m)
สร้าง Limit 5Hr(10m/2m)
สร้าง Limit 1day(20m/3m)
สร้าง Limit 15d(20m/3m)
สร้าง Limit 30d(2m/3m)
รวมที่สร้าง group ของ Limitations ไว้ - ใน userman เมนู Profiles > Profiles
- ทำการ generate สร้าง user ขึ้นมา
กด Generate
* สำหรับ Browser ที่มี block pop-up ให้ allow ไปก่อนน่ะครับ - ตัวอย่าง default แบบ CVS
- ตัวอย่าง default แบบ Vochers
ทำการแก้ไขหน้าตา Vochers เพื่อให้สแกนผ่าน QRcode ได้ - ใน userman > Setting > Templates
แบบเป็นไฟล์
- header
- row
- Footer
- Break
แบบเป็น Code ก็อปวาง
-header- โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<title>SYS2U Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="http://www.sys2u.com/qrcode/jquery.min.js" type="text/javascript"></script>
<script src="http://www.sys2u.com/qrcode/jquery.qrcode.min.js" type="text/javascript"></script>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
margin-left: auto;
margin-right: auto;
}
}
@media screen {
html, body {
width: 800px;
}
}
body
{
padding: 5mm;
margin:0;
margin-left: auto;
margin-right: auto;
}
#main-wrap {
background-color: #fff;
border: solid;
border-width: 1px;
display: inline-block;
}
#main-wrap {
overflow: hidden;
width: 45%;
}
#leftside {
display: inline-block;
width: 50%;
}
#rightside {
display: inline-block;
width: 45%;
}
</style>
<body>
-row- โค้ด: เลือกทั้งหมด
<div id="main-wrap">
<header class="w3-container w3-red">
<h4>SYS2U HotSpot, Line : @sys2u</h4>
</header>
<div id="leftside" class="w3-container w3-white">
Profile : <b>%u_actualProfileName%</b>
Username : <b>%u_username%</b>
Password : <b>%u_password%</b>
<br><br><br>
</div>
<div id="rightside" class="w3-container w3-white">
<div class="qrcode" id="%u_username%"></div>
<script> jQuery(function(){jQuery('#%u_username%').qrcode(
{
"render": 'div',
"size": 130,
"minVersion": 5,
"maxVersion": 5,
"ecLevel": 'L',
"mode": 0,
"text": "http://10.5.50.1/login?username=%u_username%&password=%u_password%",
"quiet": 0,
}
); }) </script>
</div>
<footer class="w3-container w3-red">
<h5>ข้อมูลเพิ่มเติม 086-378-2262</h5>
</footer>
</div>
-Footer- โค้ด: เลือกทั้งหมด
</div> <!-- end of <div class="w3-row-padding"> -->
</body></html>
-Break- โค้ด: เลือกทั้งหมด
<p class="noprint" style="font-size: 10px"> ................ page break ................ </p> <p class="pagebreak"> </p>
- ทำการ Save เป็นชื่อ template SYS2U
ทดสอบ generate ไฟล์ขึ้นมา เพื่อปริ้นออกมาใช้งาน - หลังจากสร้าง template ใหม่ขึ้นมาแล้ว จะขึ้นชื่อมาให้เลือกได้เลย
- แสดงหน้าตา Voucher
- ทดสอบ save ออกมาเป็นไฟล์ให้
ตัวอย่างไฟล์ .HTML ---- > SYS2U QRcode - หรือถ้าเพื่อนๆ ต้องการใส่ Link เพิ่ม - (ตัวอย่าง ผมแก้ไขเพิ่มในส่วนของ ROW)
- แสดงหน้าตา Voucher แบบเพิ่ม Link
ข้อมูลสินค้าแบบมัลติมีเดีย (Multimedia)
จบบทความ
รายละเอียดการให้บริการจากทีมงาน SYS2U.COM Xpert Zone