sigma-otp-verification-system

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #golang #rust #linux #java #awesome #kubernetes #vue #pytorch #security

sigma-otp-verification-system

(★ 9)

sistem verifikasi akun dengan PHP & SQL

sigma-otp-verification-system 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🔒 SIGMA OTP - Sistem Verifikasi OTP (One Time Password) Real-Time

Sistem Verifikasi OTP (One Time Password) profesional, aman, modern, dan responsive yang dibangun secara khusus menggunakan **PHP Native 8.2+** dan **MySQL / SQLite**, **TANPA framework PHP (Laravel/CodeIgniter/Symfony) ataupun framework JavaScript (TypeScript/React/Vue)**.

Sistem ini dirancang dengan standar keamanan industri, menggunakan arsitektur **OOP (Object-Oriented Programming)**, **PDO Prepared Statements**, **Bcrypt Hashing untuk Password & OTP**, **CSRF Token Protection**, **Rate Limiting**, dan **Dashboard Monitoring Real-Time**.

---

## 🚀 Fitur Utama & Keunggulan

### 1. 📝 Registrasi Akun Baru
- Pengisian nama lengkap, email unik, dan kata sandi terenkripsi.
- Validasi input ketat baik di sisi frontend (HTML5/JavaScript) maupun backend (PHP PDO).
- Password di-hash menggunakan `password_hash()` dengan algoritma **Bcrypt (Cost Factor 12)**.
- Otomatis menerbitkan dan mengirimkan kode OTP 6-digit pertama begitu registrasi berhasil.

### 2. 🔑 Verifikasi OTP 6-Digit Asynchronous (AJAX)
- **Desain Input Modern**: 6 kotak digit terpisah dengan fitur *auto-focus*, *auto-advance*, *backspace navigation*, dan *paste handler*.
- **Hashed OTP Storage**: Kode OTP **di-hash menggunakan Bcrypt** sebelum disimpan ke database (`otp_hash`). Kode OTP asli **TIDAK PERNAH** disimpan dalam bentuk plain text.
- **Countdown Timer Expiry**: Masa berlaku OTP diset selama **5 menit (300 detik)** dengan tampilan *countdown timer* interaktif.
- **Single-Use Guard**: Kode OTP otomatis ditandai terpakai (`is_used = 1`) setelah sukses diverifikasi.
- **Auto Login After Verify**: Begitu OTP berhasil diverifikasi, pengguna otomatis masuk ke sesi terautentikasi dan diubah status akunnya menjadi `is_verified = 1`.

### 3. 🛡️ Resend OTP & Anti-Spam Rate Limiting
- **Pembatasan Kuota**: Maksimal **3 kali pengiriman ulang OTP dalam jendela waktu 15 menit** untuk mencegah spam email dan serangan *Brute Force*.
- **Auto Invalidation**: Setiap kali kode OTP baru diterbitkan, kode OTP lama yang belum terpakai otomatis dinonaktifkan.
- **Indikator Visual Quota**: Dashboard dan halaman verifikasi menampilkan sisa kuota resend secara *live*.

### 4. 🔓 Login Terproteksi & Logging Akses
- **Proteksi Akses Verifikasi**: Pengguna yang belum memverifikasi OTP tidak dapat mengakses area tertutup. Jika mencoba login, sistem akan memberikan notifikasi dan mengarahkan kembali ke halaman verifikasi OTP.
- **Sesi Aman Cross-Platform**: Mendukung pengaktifan cookie sesi `SameSite=None`, `Secure`, `HttpOnly`, dan `Partitioned` (CHIPS) untuk kompatibilitas iframe & HTTPS Cloud.
- **Audit Logging Akses (`login_logs`)**: Setiap percobaan login (baik sukses maupun gagal) dicatat secara otomatis lengkap dengan IP Address, User-Agent/Browser, timestamp, dan status.

### 5. 🔄 Lupa & Reset Kata Sandi
- Generator token acak 32-byte yang aman secara kriptografi (`random_bytes`).
- Token berlaku selama **15 menit** dan dikirimkan via email.
- Form pembaruan kata sandi terenkripsi langsung memperbarui database secara aman.

### 6. 📊 Dashboard Monitoring Real-Time (`/dashboard.php`)
- **4 Dynamic Cards**:
  - **Status Akun**: Menampilkan status verifikasi terintegrasi (`Terverifikasi` / `Pending`).
  - **Skor Keamanan (Security Score)**: Dihitung secara matematis (50% Base + 30% Verified + 15% Bcrypt + 5% Clean Logs).
  - **Total Akses Login**: Statistik akumulatif login berhasil vs gagal.
  - **Permintaan OTP (24 Jam)**: Jumlah OTP yang diminta dalam 24 jam terakhir beserta akumulasi total.
- **OTP Protection Gauge & Spec Engine**: Indikator *progress bar* sisa kuota resend OTP 15 menit, versi PHP, konsumsi memori server, dan jenis driver database.
- **Live Activity Logs Table**: Tabel riwayat login terbaru (10 aktivitas terakhir) yang diperbarui tanpa reload halaman via AJAX polling (15 detik) dan tombol *Refresh Data*.
- **Live Clock**: Jam digital waktu nyata (WIB).

---

## 🛠️ Teknologi yang Digunakan

- **Backend Sisi Server**: PHP 8.2+ (PDO, Object Oriented Programming, Custom Session Handler)
- **Database**: MySQL 8.0+ / MariaDB / SQLite 3
- **Email Gateway**: PHPMailer via SMTP SSL/TLS
- **Frontend Sisi Klien**: HTML5, CSS3 Custom Glassmorphism, Bootstrap 5.3, JavaScript ES6 (Fetch API)
- **Komponen UI**: SweetAlert2 (Modal Toast & Alert), Bootstrap Icons, Plus Jakarta Sans Font
- **Keamanan**: PDO Prepared Statements, Bcrypt Password & OTP Hashing, CSRF Tokens (`hash_equals`), Rate Limiting, HTTP-Only & Partitioned Cookies.

---

## 📂 Struktur Direktori Project

```
sigma-otp/
├── api/
├── api/
│   ├── dashboard-stats.php   # API Fetch Metrics Dashboard Real-time (JSON)
│   ├── forgot-password.php   # API Reset Kata Sandi
│   ├── login.php             # API Autentikasi Login & Session Logger
│   ├── register.php          # API Registrasi Pengguna
│   ├── resend.php            # API Kirim Ulang OTP (Alias)
│   ├── send-otp.php          # API Kirim Ulang OTP + Rate Limiter
│   └── verify-otp.php        # API Verifikasi Kode OTP 6-Digit
├── assets/
│   ├── css/
│   │   └── style.css         # Glassmorphic Stylesheet, Badges & Animations
│   ├── js/
│   │   └── main.js           # AJAX Fetch Engine, OTP Box Inputs, Live Clock & Polling
│   └── images/
├── classes/
│   ├── Auth.php              # Pengelola Sesi, Auth Guard & IP Finder
│   ├── Database.php          # Singleton PDO Connection Wrapper (MySQL & SQLite)
│   ├── Mailer.php            # Integration PHPMailer & Fallback Mailer
│   ├── OTP.php               # Generator, Bcrypt Hashing & Rate Limit Logic
│   └── User.php              # Model Pengguna & Query Log Database
├── config/
│   ├── config.php            # Helper Global, Environment Loader, CSRF & Partitioned Cookies
│   ├── database.php          # Konfigurasi Koneksi Database
│   └── mail.php              # Konfigurasi SMTP PHPMailer
├── database/
│   ├── sigma_otp.sql         # Script SQL MySQL (Tabel & Initial Data)
│   └── sigma_otp.sqlite      # File Database SQLite Backup
├── includes/
│   ├── footer.php            # Template Footer & Script Tags
│   ├── header.php            # Template Head & CSS Meta Tags
│   └── navbar.php            # Template Navigation Bar Responsive
├── auth/
│   ├── forgot-password.php   # Halaman Form Reset Kata Sandi
│   ├── login.php             # Halaman Form Login
│   ├── logout.php            # Handler Destroy Session
│   ├── register.php          # Halaman Form Registrasi
│   └── verify.php            # Halaman Form Input OTP 6-Digit
├── .env                      # Konfigurasi Credentials & Environment
├── .env.example              # Template Environment Variables
├── composer.json             # Dependency Composer (PHPMailer)
├── dashboard.php             # Halaman Dashboard Real-Time
├── index.php                 # Landing Page Hero Section
└── README.md                 # Dokumentasi Project Lengkap
```

---

## 🗄️ Skema Database (`database/sigma_otp.sql`)

### 1. Tabel `users`
Menyimpan identitas utama pengguna:
- `id` (INT, Primary Key, Auto Increment)
- `fullname` (VARCHAR 100)
- `email` (VARCHAR 100, Unique)
- `password` (VARCHAR 255, Bcrypt Hash)
- `is_verified` (TINYINT 1, Default 0)
- `status` (ENUM: 'active', 'suspended', Default 'active')
- `created_at`, `updated_at` (TIMESTAMP)

### 2. Tabel `otp_codes`
Menyimpan data transaksi kode OTP ter-hash:
- `id` (INT, Primary Key, Auto Increment)
- `user_id` (INT, Foreign Key ke `users.id`)
- `otp_hash` (VARCHAR 255, Bcrypt Hash)
- `expired_at` (DATETIME, 5 menit dari pembuatan)
- `attempts` (INT, Default 0, Max 5 per kode)
- `is_used` (TINYINT 1, Default 0)
- `created_at` (TIMESTAMP)

### 3. Tabel `login_logs`
Menyimpan rekam jejak aktivitas login:
- `id` (INT, Primary Key, Auto Increment)
- `user_id` (INT, Foreign Key ke `users.id`)
- `ip_address` (VARCHAR 45)
- `browser` (TEXT)
- `login_time` (TIMESTAMP)
- `status` (ENUM: 'success', 'failed')

### 4. Tabel `password_resets`
Menyimpan token reset kata sandi:
- `id` (INT, Primary Key, Auto Increment)
- `email` (VARCHAR 100)
- `token` (VARCHAR 64, Unique)
- `expired_at` (DATETIME)
- `created_at` (TIMESTAMP)

---

## ⚙️ Panduan Instalasi & Cara Menjalankan

### Persyaratan Sistem:
- **PHP 8.2+** (dengan ekstensi `pdo`, `pdo_mysql` / `pdo_sqlite`, `openssl`, `json`, `mbstring`)
- **MySQL 8.0+** / MariaDB atau **SQLite 3**
- **Composer** (untuk install PHPMailer)

### Langkah-langkah di XAMPP / Local Environment:

1. **Clone atau Ekstrak Project**:
   Letakkan direktori project ke dalam folder `htdocs` XAMPP Anda:
   `C:\xampp\htdocs\sigma-otp`

2. **Install Depedensi Composer**:
   Buka terminal pada direktori project dan jalankan:
   ```bash
   composer install
   ```

3. **Import Database MySQL**:
   - Buka **phpMyAdmin** (`http://localhost/phpmyadmin`).
   - Buat database baru dengan nama `sigma_otp`.
   - Import file `database/sigma_otp.sql`.

4. **Konfigurasi File Environment (`.env`)**:
   Buat file `.env` (atau salin dari `.env.example`) dan sesuaikan parameter koneksi database & SMTP email:
   ```env
   # Application Configuration
   APP_ENV=development
   APP_NAME="Sigma OTP System"
   APP_URL=http://localhost/sigma-otp

# Database Configuration (MySQL / SQLite)
   DB_DRIVER=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=sigma_otp
   DB_USERNAME=root
   DB_PASSWORD=

# SMTP Mailer Configuration
   MAIL_HOST=smtp.gmail.com
   MAIL_PORT=587
   MAIL_USERNAME=email-anda@gmail.com
   MAIL_PASSWORD=app-password-gmail-anda
   MAIL_FROM_ADDRESS=no-reply@sigma-otp.com
   MAIL_FROM_NAME="Sigma OTP Verification"
   ```

5. **Jalankan Aplikasi**:
   Akses melalui browser di alamat:
   `http://localhost/sigma-otp/`

---

## 🔐 Audit Keamanan & Proteksi Integrasi

- **Bcrypt Hashing**: Digunakan untuk kata sandi dan kode OTP 6-digit.
- **Hashed OTP Security**: Mencegah kebocoran OTP jika terjadi kebocoran database (*database dump attack*).
- **Rate Limiting Window**: Mencegah eksploitasi API pengiriman ulang email dan serangan *dictionary/brute-force attack*.
- **Parameterized PDO Queries**: 100% bebas dari SQL Injection pada seluruh modul controller dan model.
- **XSS Sanitization**: Seluruh output variabel dinamis di-sanitize menggunakan `htmlspecialchars(..., ENT_QUOTES, 'UTF-8')`.
- **CSRF Protection**: Verifikasi token acak 64-character hex via `hash_equals()` pada seluruh skrip POST API.
- **CHIPS & Secure Session Cookies**: Pengaturan `SameSite=None`, `Secure`, `HttpOnly`, dan `Partitioned` menjamin keamanan cookie sesi di lingkungan HTTPS dan iFrame.

---

sigma-otp-verification-system

sigma-otp-verification-system 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

sigma-otp-verification-system

sigma-otp-verification-system 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README