Membuat OTP Dengan Whatsapp

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 , `nomer` 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 koneksi.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 Proses

Kemudian buat file proses.php file ini digunakan untuk cek otp dan nomer apakah valid / tidak, isi file dengan code dibawah ini.

<?php

include "koneksi.php";

if (isset($_POST['nomer']) and isset($_POST['otp'])) {
    
    $nomer = $_POST['nomer'];
    $otp = $_POST['otp'];
    
    if ($nomer == "" or $otp == "") {
        echo "Ulangi Lagi"; exit;
    } else {
        
        if(strpos(substr($nomer,0,3), '08') !== false){
        	$awal = str_replace("08", "628", substr($nomer,0,3));
        	$nomer = $awal. substr($nomer,3);
        }
        
        $qotp = mysqli_query($conn, "select * from otp where nomer='".$nomer."' and otp=".$otp." limit 1");
        $cekotp = mysqli_num_rows($qotp);
        
        if ($cekotp == 0) {
            echo "Otp Salah"; exit;
        } else {
            $data = mysqli_fetch_array($qotp);
            if ((time() - $data['waktu']) < 300) {
                echo "OTP Valid"; exit;
            } else {
                echo "OTP Sudah Kadaluarsa"; exit;
            }
        }
            
    }
    
} else {
    echo "Silahkan coba lagi";
}

?>

4. Menghubungkan OTP dengan whatsapp

Lalu kita buat file req-otp.php yang digunakan untuk membuat code otp yang menggunakan api whatsapp dari fonnte.com, masukkan code dibawah ini pada file req-otp.php

Jika belum memiliki akun, silakan mendaftar terlebih dulu untuk mendapatkan token dan menggunakan api dibawah ini secara gratis.

<?php

include "koneksi.php";

function send($otp, $target){
    $curl = curl_init();
    
    $data = [
        'phone' => $target,
        'type' => 'text',
        'delay' => 0,
        'delay_req' => 0,
        'text' => "Your OTP : ".$otp
    ];
    
    curl_setopt($curl, CURLOPT_HTTPHEADER,
        array(
            "Authorization: TOKEN LU",
        )
    );
    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://fonnte.com/api/send_message.php");
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    $result = curl_exec($curl);
    curl_close($curl);
    
    return $result;
}


if (isset($_POST['nomer'])) {
    
    $nomer = $_POST['nomer'];
    
    if ($nomer == "") {
        echo "Ulangi Lagi"; exit;
    } else {
        
        if(strpos(substr($nomer,0,3), '08') !== false){
        	$awal = str_replace("08", "628", substr($nomer,0,3));
        	$nomer = $awal. substr($nomer,3);
        }
    
        $qotp = mysqli_query($conn, "select * from otp where nomer='".$nomer."'");
        $cekotp = mysqli_num_rows($qotp);
        $otp_baru = rand(0000, 9999);
        
        if ($cekotp == 0) {
            $insert = mysqli_query($conn, "insert into otp (nomer, otp, waktu) values('".$nomer."', ".$otp_baru.", ".time().")");
            if ($insert) {
                $kirim = json_decode(send($otp_baru, $nomer), true);
                if ($kirim['status'] == true) {
                    echo "Otp sudah dikirim"; exit;
                } else {
                    echo "Gagal Request Otp"; exit;
                }
            } else {
                echo "Gagal Request Otp"; exit;
            }
        } else {
            $hapus = mysqli_query($conn, "delete from otp where nomer='".$nomer."'");
            if ($hapus) {
                $insert = mysqli_query($conn, "insert into otp (nomer, otp, waktu) values('".$nomer."', ".$otp_baru.", ".time().")");
                if ($insert) {
                    $kirim = json_decode(send($otp_baru, $nomer), true);
                    if ($kirim['status'] == true) {
                        echo "Otp sudah dikirim"; exit;
                    } else {
                        echo "Gagal Request Otp"; exit;
                    }
                } else {
                    echo "Gagal Request Otp"; exit;
                }
            } else {
                echo "Gagal Request Otp"; exit;
            }
        }
        
    }
    
} else {
    echo "Silahkan coba lagi";
}



?>

5. Membuat Struktur HTML

Langkah terakhir adalah dengan membuat form untuk melakukan request / cek otp, buatlah file index.php dan isi dengan code dibawah ini

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Form OTP</title>
</head>
<body>

<form id="salsa" method="POST" accept-charset="utf-8">
    <center>
    <label for="Nomer">Nomer</label> <input placeholder="62812xxxx" name="nomer" type="number" id="nomer" required/>
	<br>
	<label for="OTP">OTP</label> <input name="otp" type="number" id="otp"/>
	<br>
    <br>
    <button type="submit" id="btn-otp" >Request otp</button>
    <br>
    <br>
    <button type="submit" id="btn-login" >Login</button>
    </center>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
$("#btn-login").click(function(){
$.ajax({
    url: "proses.php",
    type: "post",
    data: $('#salsa').serialize(),
    success: function (response) {
        alert(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
});
return false;
});

$("#btn-otp").click(function(){
$.ajax({
    url: "req-otp.php",
    type: "post",
    data: $('#salsa').serialize(),
    success: function (response) {
        alert(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
});
return false;
});
</script>
</body>
</html>

6. Demo

Demikian cara membuat OTP dengan whatsapp dari fonnte. untuk mencoba hasil dari tutorial diatas, silakan menuju halaman demo.

Disclaimer : demo diatas dibuat dengan asumsi setiap nomor yang diinput adalah nomor user yang sudah terdaftar pada website/database.

Leave a Comment