Membuat OTP Generator dengan Javascript dan HTML

2 min read

OTP Generator Javascript HTML
Photo by Yura Fresh on Unsplash

TeknoCerdas.com – Salam cerdas untuk kita semua. Two Factor Authentication atau disingkat 2FA adalah salah satu cara untuk meningkatkan keamanan akses terhadap suatu akun. One Time Password (OTP) adalah salah satunya. Jenis OTP yang digunakan biasanya terbagi menjadi hardware token atau software token. Tulisan ini menunjukkan bagaimana membuat OTP Generator dengan Javascript dan HTML yang bisa digunakan untuk 2FA.

Terdapat dua metode OTP yang umum yaitu HOTP (HMAC-based One-Time Password) dan TOTP (Time-based OTP). Saat ini yang lebih banyak digunakan adalah TOTP termasuk aplikasi Google Authenticator menggunakan metode ini. Agar kode OTP antara server dan client generator sama maka keduanya bergantung pada jam (timestamp) yang harus sinkron agar menghasilkan kode yang valid.

Baja Juga
Membuat Javascript Promise Timeout dengan Promise.race

Pada sisi server proses pengecekan biasanya memberikan toleransi beberapa detik untuk berjaga-jaga jika terdapat delay waktu.

Memilih Pustaka OTP Generator

Pustaka Javascript untuk membuat token OTP yang akan digunakan pada tulisan ini adalah OTPAuth yang dapat diperoleh dari GitHub di alamat URL.

https://github.com/hectorm/otpauth

Pustaka ini mendukung penggunaan untuk Node.js dan Browser. Pada tulisan ini kita akan menggunakan Browser sehingga pustaka tersebut dapat dipanggil langsung dari url CDN.

<script src="https://cdn.jsdelivr.net/npm/otpauth/dist/otpauth.umd.min.js"></script>

Membuat OTP Generator

OTP Generator yang akan dibuat sangat sederhana dan hanya terdiri dari sebuah file index.html saja. OTP akan otomatis dibuat ulang per 30 detik sesuai dengan standar umum yang digunakan. Panjang OTP ini adalah 6 digit.

Buat direktori baru untuk menyimpan script ini. Kita akan namakan otp-generator.

$ mkdir otp-generator
$ cd otp-generator

Berikut ini adalah kode HTML dan Javascript untuk pembuatan OTP Generator. Simpan file dibawah ini dengan nama index.html.











OTP Token Generator

New token in 30 sec
<script src="https://cdn.jsdelivr.net/npm/otpauth/dist/otpauth.umd.min.js"></script>

Kode diatas menggunakan algoritma SHA1 dengan tenggang waktu 30 detik dan jumlah digit 6 yang harusnya bisa digunakan dan kompatibel dengan Google Authenticator.

Untuk melakukan tes aplikasi ini sangat mudah cukup buka file index.html dengan Browser tidak perlu koneksi internet.

Berikut adalah gambar hasil tes yang dilakukan dengan plugin populer di Chrome bernama Authenticator. Dimana token yang dihasilkan sama.

Perbandingan OTP Generator dengan Authenticator
Perbandingan OTP Generator dengan Authenticator