aku-manusia

v1.0.1

Published

8 months ago

A lightweight JavaScript library for human/robot verification, analyzing user interaction patterns (mouse/touch) as an alternative to traditional CAPTCHAs.

0High
0Medium
0Low

zhindev

human verification robot detection captcha alternative anti-bot javascript frontend browser security

Aku Manusia - Human Verification Library

"Aku Manusia" adalah sebuah library JavaScript ringan yang dirancang untuk membantu memverifikasi apakah pengguna adalah manusia atau robot, mirip dengan reCAPTCHA. Library ini menganalisis pola interaksi pengguna (gerakan mouse untuk desktop, sentuhan dan gestur untuk mobile), informasi browser, dan waktu interaksi untuk menentukan keaslian pengguna dengan lebih ketat.

Fitur Utama

Self-Contained: Tidak perlu menautkan file CSS terpisah. Semua styling sudah tersemat di dalam akumanusia.js. Cukup letakkan elemen <vrf></vrf> dan sertakan script-nya.
Deteksi Perangkat Cerdas: Otomatis mendeteksi apakah pengguna mengakses dari desktop atau mobile.
Analisis Browser Mendalam: Menganalisis User Agent untuk mendeteksi jenis browser, versi, dan sistem operasi. Ini membantu mengidentifikasi WebDriver (misalnya Selenium, Puppeteer) yang digunakan oleh bot.
Analisis Gerakan Mouse (Desktop) yang Ketat:
- Mendeteksi gerakan mouse yang "terlalu lurus", pola gerakan yang terlalu seragam (kecepatan konstan), atau tidak ada gerakan sama sekali sebelum klik sebagai indikasi robot.
- Menganalisis panjang jalur mouse, jumlah titik gerakan, dan variasi kecepatan.
- Memeriksa apakah mouse memasuki area checkbox secara alami sebelum klik.
Analisis Interaksi Sentuh (Mobile) yang Robust:
- Mendeteksi berbagai jenis event sentuh (touchstart, touchmove, touchend) dan event scroll.
- Memberikan skor interaksi berdasarkan keragaman dan volume event sentuh.
- Mengenali pola interaksi yang sangat minim atau langsung klik sebagai indikasi robot.
Waktu Interaksi: Menganalisis seberapa cepat pengguna berinteraksi dengan elemen verifikasi setelah halaman dimuat. Interaksi yang terlalu cepat dapat mengindikasikan bot.
Tampilan Modern & Minimalis: UI yang bersih, profesional, dan responsif.
Custom Checkbox: Checkbox kustom yang estetik dan interaktif.
Animasi Loading Canggih: Animasi loading yang halus dan menarik saat verifikasi berlangsung.
Callback Fleksibel: Menyediakan callback onSuccess dan onFailure untuk integrasi mudah dengan logika aplikasi Anda.

Cara Menggunakan

1. Struktur File

Pastikan Anda memiliki file akumanusia.js di server atau direktori proyek Anda. Tidak ada file CSS terpisah yang dibutuhkan.

2. Integrasi HTML

Tambahkan elemen <vrf></vrf> di lokasi di mana Anda ingin tampilan verifikasi muncul. Library "Aku Manusia" akan secara otomatis mendeteksi elemen ini dan merender UI di dalamnya, beserta CSS defaultnya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Anda</title>
    <!-- Anda bisa menambahkan CSS kustom Anda di sini jika ingin mengesampingkan gaya default Aku Manusia -->
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            flex-direction: column;
            gap: 20px;
        }
    </style>
</head>
<body>

    <!-- Konten halaman Anda lainnya -->
    <h1>Selamat Datang!</h1>
    <p>Harap verifikasi bahwa Anda bukan robot untuk melanjutkan.</p>

    <!-- Elemen untuk menampilkan verifikasi Aku Manusia -->
    <!-- Library akan mencari elemen ini dan menampilkan UI-nya di sini -->
    <div style="margin-top: 20px;">
        <vrf></vrf>
    </div>

    <!-- Script library Aku Manusia -->
    <!-- Letakkan di akhir body untuk memastikan elemen <vrf> sudah ada -->
    <!-- Sesuaikan path src jika Anda menempatkannya di lokasi lain -->
    <script type="module" src="/path/to/your/akumanusia.js"></script>

    <script type="module">
        // Pastikan DOM sudah siap sebelum mengakses AkuManusia
        document.addEventListener('DOMContentLoaded', () => {
            if (window.AkuManusia) {
                // Atur callback ketika verifikasi berhasil
                window.AkuManusia.onSuccess = () => {
                    console.log("Verifikasi manusia berhasil!");
                    alert("Selamat! Anda bukan robot. Anda bisa melanjutkan.");
                    // Contoh: redirect atau lanjutkan proses login/form submission
                    // window.location.href = '/dashboard';
                    // enableSubmitButton();
                    // await submitForm(); // jika menggunakan async/await
                };

                // Atur callback ketika verifikasi gagal
                window.AkuManusia.onFailure = () => {
                    console.log("Verifikasi gagal! Anda adalah robot.");
                    alert("Maaf, verifikasi gagal. Anda terdeteksi sebagai robot.");
                    // Contoh: tampilkan pesan error, disable tombol, atau minta coba lagi
                    // showErrorMessage();
                    // disableSubmitButton();
                };
            } else {
                console.error("Aku Manusia: Library gagal dimuat atau belum tersedia.");
            }
        });
    </script>

</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Aku Manusia - Human Verification Library

Fitur Utama

Cara Menggunakan

1. Struktur File

2. Integrasi HTML