Keamanan data pengguna adalah hal yang sangat penting bagi pengguna website. Salah satu metode dalam meningkatkan keamanan adalah dengan menggunakan OTP.
OTP (One-Time Password) merupakan fitur yang mewajibkan pengguna untuk melakukan verifikasi suatu aksi pada website dengan suatu code yang biasanya berupa beberapa digit angka.
Jika kode OTP yang diinput sesuai dengan kode OTP yang diberikan, maka aksi pada website itu dapat dilanjutkan.
Tutorial membuat OTP ini akan menjelaskan step by step membuat OTP hingga dapat digunakan.
1. Membuat Database
Langkah awal dalam membuat OTP dengan whatsapp adalah membuat database untuk demo login dan OTP.
CREATE DATABASE demo;
CREATE TABLE `otp` ( `id` INT NOT NULL , `nomor` VARCHAR(20) NOT NULL , `otp` INT(4) NOT NULL , `waktu` INT(20) NOT NULL ) ENGINE = InnoDB;2. Membuat Koneksi
Selanjutnya agar nantinya dapat terhubung dengan database, perlu membuat sebuah file koneksi dengan membuat file otp.php dan isi dengan code dibawah ini. isi username & password user database.
<?php
date_default_timezone_set('Asia/Jakarta');
$hostname = 'localhost';
$username = '';
$password = '';
$dbname = 'demo';
$conn = mysqli_connect( $hostname , $username , $password , $dbname );
3. Membuat Struktur HTML dan PHP
Langkah terakhir adalah dengan membuat form dan skrip php untuk mengeksekusi proses request opt dan login.
Untuk bisa mengirimkan pesan, di kode ini memerlukan token untuk identifikasi device.
Silakan daftar terlebih dahulu jika belum memiliki device di fonnte.com.
Kamu bisa menggunakan device ini dengan gratis.
Setelah daftar, bisa langsung login dan buat device di menu device.
Copy tokennya dan jangan lupa untuk konekkan device dengan fonnte terlebih dahulu agar bisa mengirimkan pesan.
Selanjutnya tinggal copy code berikut lalu paste dibawah kode koneksi dan update tokennya.
if (isset($_POST['submit-otp'])) {
$nomor = mysqli_escape_string($conn, $_POST['nomor']);
if ($nomor) {
if (!mysqli_query($conn, "DELETE FROM otp WHERE nomor = $nomor")) {
echo ("Error description: " . mysqli_error($con));
}
$curl = curl_init();
$otp = rand(100000, 999999);
$waktu = time();
mysqli_query($conn, "INSERT INTO otp (nomor,otp,waktu) VALUES ( $nomor ,$otp , $waktu )");
$data = [
'target' => $nomor,
'message' => "Your OTP : " . $otp
];
curl_setopt(
$curl,
CURLOPT_HTTPHEADER,
array(
"Authorization: TOKEN",
)
);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($curl, CURLOPT_URL, "https://api.fonnte.com/send");
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
$result = curl_exec($curl);
curl_close($curl);
}
} elseif (isset($_POST['submit-login'])) {
$otp = mysqli_escape_string($conn, $_POST['otp']);
$nomor = mysqli_escape_string($conn, $_POST['nomor']);
$q = mysqli_query($conn, "SELECT * FROM otp WHERE nomor = $nomor AND otp = $otp");
$row = mysqli_num_rows($q);
$r = mysqli_fetch_array($q);
if ($row) {
if (time() - $r['waktu'] <= 300) {
echo "otp benar";
} else {
echo "otp expired";
}
} else {
echo "otp salah";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form OTP</title>
</head>
<body>
<form method="POST" action="" accept-charset="utf-8" style="margin: 100px auto;box-shadow: 0 0 15px -2px lightgray;width:100%;max-width:600px;padding:20px;box-sizing:border-box;">
<h1 style="text-align: center;">OTP</h1>
<center>
<div style="display: <?php echo isset($_POST['submit-otp']) ? "none" : "flex" ?>;flex-direction:column;margin-bottom:10px;box-sizing:border-box;"><label for="nomor" style="text-align: left;margin-bottom:5px;">Nomor</label> <input placeholder="62812xxxx" name="nomor" type="text" id="nomor" required style="padding:8px;border:2px solid lightgray;border-radius:5px;" <?php if (isset($_POST['submit-otp'])) {
echo "value='$nomor' hidden";
} ?> /></div>
<?php
if (isset($_POST['submit-otp'])) { ?>
<div style="display: flex;flex-direction:column;margin-bottom:10px;"><label for="otp" style="text-align: left;margin-bottom:5px;box-sizing:border-box;">OTP</label> <input placeholder="xxxxxx" name="otp" type="text" id="otp" style="padding:8px;border:2px solid lightgray;border-radius:5px;" /></div>
<?php }
if (!isset($_POST['submit-otp'])) { ?>
<button type="submit" id="btn-otp" style="background-color: orange;border:none;padding:8px 16px;color:white;cursor:pointer;" name="submit-otp">Request otp</button>
<?php }
if (isset($_POST['submit-otp'])) { ?>
<button type="submit" id="btn-login" style="background-color:darkturquoise;border:none;padding:8px 16px;color:white;cursor:pointer;" name="submit-login">Login</button>
<?php } ?>
</center>
</form>
</body>
</html>OTP akan expired jika waktu sudah melewati 5 menit.
Integrasi dengan WordPress
Demikian cara membuat OTP dengan whatsapp dari fonnte.
Bagi yang menggunakan CMS wordpress, bisa langsung download plugin OTP whatsapp.
Plugin ini bisa digunakan untuk mengirimkan OTP saat login.
Trima kasih tutorialnya, namun apakah bisa saya hub lewat wa? Trim kasih
Halo!
Bisa, silakan kontak saya di 082227097005.
Terimakasih
Video tutorialnya mana? Langsung ke script
Halo!
Untuk tutorial belum ada dalam bentuk video
terima kasih kak tutorialnya datanya masuk ke database , tetapi tidak tekirim ke whatsapp kak?
Halo!
Apa tokennya sudah diisi?
Apa devicenya sudah konek ke fonnte?
token sudah isi kak dan responnya bilang valid , tetapi otpnya tidak terkirim lewat whatsapp saya kak, apakah mungkin ada yang saya lewatkan ya kak dari tutorial diatas
Apa devicenya sudah konek ke fonnte?
bagaimana caranya kak ? dibagian mana?
Login dulu di fonnte, lalu di menu device mas konekkan devicenya
terima kasih kak sudah bisa
sama2
bang, kalau pake codeigniter gimana?
maaf mas, saya engga bisa framework php.
kalau di codeigniter 3 tutorial nya bagaimana mas?
kalo yang spesifik ke framework tertentu ga ada tutorialnya mas.
Apakah WA yg terkoneksi harus nyambung iternet agar fonnte bisa ngirim pesan?
selama wanya masih konek ke fonnte, ga dapet internet gapapa mas