Aphriell Art: Cara Membuat WiFi Portal Login Custom dengan React, Node.js, dan MikroTik API

Kategori: Programming | Perkiraan waktu baca: 10 menit

Di artikel Panduan Setup Hotspot MikroTik + Voucher, saya bahas cara setup hotspot dasar dengan halaman login bawaan MikroTik yang di-custom lewat file HTML statis. Tapi untuk kebutuhan yang lebih kompleks — multi-tenant WiFi (misal untuk banyak cabang bisnis), integrasi WhatsApp gateway untuk kirim voucher, atau dashboard admin yang lebih canggih — saya bikin sistem terpisah yang berkomunikasi dengan MikroTik lewat API-nya, bukan cuma edit file HTML statis.

Kenapa Perlu Sistem Terpisah dari Halaman Bawaan MikroTik?

Halaman login bawaan MikroTik cukup untuk kebutuhan sederhana, tapi punya keterbatasan:

Sulit diintegrasikan dengan sistem eksternal (payment gateway, WhatsApp notification, dll)
Manajemen voucher massal untuk banyak lokasi jadi ribet kalau dikerjakan manual per-router
Nggak ada dashboard terpusat kalau kamu kelola WiFi di banyak lokasi cabang sekaligus

Arsitektur Sistem

Backend: Node.js + Express, berkomunikasi dengan router MikroTik lewat RouterOS API
Frontend Admin: React, untuk dashboard kelola voucher, monitoring user aktif, laporan pemakaian
Portal Login: halaman terpisah yang di-hosting sendiri, bukan file HTML di dalam router
WhatsApp Gateway: integrasi opsional untuk kirim kode voucher otomatis ke nomor pembeli

Menghubungkan Node.js ke MikroTik lewat RouterOS API

MikroTik punya API khusus (beda dari akses SSH/Winbox biasa) yang memungkinkan aplikasi eksternal berkomunikasi langsung dengan router. Di Node.js, saya pakai library node-routeros:

npm install node-routeros

const { RouterOSAPI } = require('node-routeros');

const connection = new RouterOSAPI({
  host: '192.168.1.1',
  user: 'admin',
  password: 'your-password',
  port: 8728
});

async function connectRouter() {
  await connection.connect();
  console.log('Terhubung ke MikroTik');
}

Membuat Voucher Otomatis dari Backend

Alih-alih generate voucher manual di terminal MikroTik seperti di artikel sebelumnya, sekarang kita bisa generate langsung dari aplikasi web:

async function createVoucher(username, password, profile) {
  await connection.write('/ip/hotspot/user/add', [
    `=name=${username}`,
    `=password=${password}`,
    `=profile=${profile}`,
  ]);

  return { username, password, profile };
}

function generateRandomVoucher() {
  const chars = '0123456789abcdef';
  let code = '';
  for (let i = 0; i < 6; i++) {
    code += chars[Math.floor(Math.random() * chars.length)];
  }
  return code;
}

Dashboard: Melihat User yang Sedang Aktif

Salah satu fitur paling berguna buat admin — melihat siapa saja yang sedang konek real-time:

async function getActiveUsers() {
  const activeUsers = await connection.write('/ip/hotspot/active/print');
  return activeUsers.map(user => ({
    username: user.user,
    ipAddress: user.address,
    macAddress: user['mac-address'],
    uptime: user.uptime,
  }));
}

Data ini bisa ditampilkan di dashboard React dengan auto-refresh tiap beberapa detik, supaya admin bisa pantau kondisi hotspot secara real-time tanpa perlu buka Winbox.

Integrasi WhatsApp: Kirim Voucher Otomatis

Ini fitur yang paling saya suka dari sistem ini — begitu pembeli bayar (bisa manual konfirmasi atau terintegrasi payment gateway), sistem otomatis generate voucher dan kirim ke WhatsApp pembeli, mirip prinsip bot yang saya bahas di artikel WhatsApp Bot:

async function processVoucherPurchase(nomorWhatsapp, profile) {
  const username = generateRandomVoucher();
  const password = generateRandomVoucher();

  await createVoucher(username, password, profile);

  const pesan = `Terima kasih! Voucher WiFi kamu:\nUsername: ${username}\nPassword: ${password}\n\nSelamat berinternet!`;

  await whatsappClient.sendMessage(nomorWhatsapp + '@c.us', pesan);
}

Multi-Router untuk Multi-Cabang

Kalau kamu kelola WiFi di beberapa lokasi (misal cabang kafe berbeda kota), sistem ini bisa dikembangkan untuk handle beberapa koneksi router sekaligus:

const routers = {
  'cabang-jakarta': { host: '192.168.1.1', user: 'admin', password: 'xxx' },
  'cabang-bandung': { host: '192.168.2.1', user: 'admin', password: 'xxx' },
};

async function getConnection(cabangId) {
  const config = routers[cabangId];
  const conn = new RouterOSAPI(config);
  await conn.connect();
  return conn;
}

Dengan struktur ini, satu dashboard admin bisa kelola voucher dan monitoring untuk semua cabang sekaligus, tanpa perlu login satu-satu ke tiap router.

Pertimbangan Keamanan

Karena sistem ini punya akses penuh ke konfigurasi router, beberapa hal yang wajib diperhatikan:

Jangan expose RouterOS API langsung ke internet publik — backend Node.js yang berkomunikasi ke router, bukan router yang diakses langsung dari luar
Buat user API terpisah di MikroTik dengan permission terbatas (bukan pakai akun admin utama)
Enkripsi kredensial router di backend, jangan simpan sebagai plain text di kode maupun database

Penutup

Sistem seperti ini jadi jauh lebih powerful dibanding sekadar edit halaman login statis — kamu dapat kontrol penuh, integrasi dengan sistem lain, dan visibility yang jauh lebih baik terutama kalau kelola WiFi di banyak lokasi sekaligus. Kalau kamu belum familiar dengan setup hotspot dasarnya, mulai dari artikel Hotspot MikroTik + Voucher dulu sebelum masuk ke tahap integrasi ini.

Kalau kamu butuh sistem WiFi management custom untuk bisnis kamu — entah single lokasi atau multi-cabang — saya buka jasa untuk itu. Cek portofolio saya di april-portfolio-pearl.vercel.app atau hubungi lewat halaman Contact.

Ada pertanyaan soal integrasi RouterOS API atau kebutuhan spesifik lainnya? Tulis di komentar.

Cara Membuat WiFi Portal Login Custom dengan React, Node.js, dan MikroTik API