CARA MEMBUAT FITUR OTP DENGAN LAYANAN SMS API
one-time password (OTP) adalah salah satu teknik untuk perlindungan dan keamanan akun dalam sebuah layanan. Otp telah banyak digunakan di berbagai sistem layanan di internet, contohnya internet banking, tokopedia dan lainya. dengan adanya OTP maka proteksi terhadap akun kita menjadi lebih kuat karena ketika kita akan menggunakan layanan tersebut harus memasukan Kode OTP yang dikirimkan ke NO HP yang sudah kita daftarkan.
pada postingan kali ini kita akan belaajr bagaimana caranya membuat fasilitas OTP sederhana, anda bisa meggexplore lebih jauh lagi setelah memperlajari konsep dasar ini.
1. Persiapan Membuat Database Dan Tabel
Langkah Pertama yang akan kita lakukan adalah membuat tabel member untuk menyimpan data member yang yang akan menggunakan layanan ini nantinya.
Jika malas membuat manual maka anda bisa menggunakan sintaks Query berikut ini :
- CREATE TABLE `member` (
- `member_id` int(11) NOT NULL,
- `email` varchar(30) NOT NULL,
- `password` varchar(32) NOT NULL,
- `no_hp` varchar(13) NOT NULL,
- `kode_otp` varchar(6) NOT NULL,
- `last_send` datetime DEFAULT NULL
- ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
- ALTER TABLE `member`
- ADD PRIMARY KEY (`member_id`);
- ALTER TABLE `member`
- MODIFY `member_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
2. Integrasi Layanan API SMS
untuk layanan API sms kita akan menggunakan gampsms milik guru saya pak Rosihan Ari Yuana, tidak ada alasan khusus kenapa saya menggunakan layanan API ini kecuali selama 1 tahun saya berlangganan untuk sms notofikasi pengiriman No RESI pelanggan saya merasa puas.
untuk bisa menggunakan layanan API ini ada beberapa langkah yang harus kita lakukan terlebih dahulu yaitu :
- Silahkan Lakukan Pendaftaran Disini.
- Selanjutnya login menggunakan akun yang sudah anda daftarkan tadi.
- Catat API Username dan API Key anda, ini diperlukan untuk konfigurasi nantinya.
- Silahkan download Documentation yang ada dibawah info API Username Dan API Key tadi, file ini berisi secript yang digunakan untuk bisa menggunakan layanan SMS API nantinya.
- Extrack http-sms-api-pro.zip dan pindahkan folder api-module ke folder project anda
- Buka file apiconfig.php yang ada dalam folde api-module tadi dan silahkan isikan ApiUsername Dan apiKey sesuai dengan catatan anda pada langkah 3 :
<?php
// isikan API username dan API key Anda
$apiUsername = '...';
$apiKey = '...';
?>
3. Konsep Dan Membuat Form Login
Sebelum melakukan tahapan coding, kita akan buat konsep nya terlebih dahulu. jadi konsepnya adalah ketika member berhasil melakukan proses login lalu sistem akan mengirimkan SMS kode OTP ke no hp member tersebut. kode OTP ini akan di input pada tahap ke 2 setelah login berhasil.
silahkan buat sebuah file baru dengan nama koneksi.php, file ini akan digunakan untuk menyimpan konfigurasi agar bisa konek ke database pada web server.
<?php
// konfigruasi koneksi
$host = "localhost";
$user = "root";
$password = "";
$database = "latihan";
$koneksi = mysqli_connect($host,$user,$password,$database);
?>
Selanjutnya kita akan membuat sebuah file baru dengan nama library.php, file ini akan kita gunakan untuk menyimpan function yang akan menggenerate kode OTP nantinya.
<?php
function randomString($length = 6) {
$str = "";
$characters = array_merge(range('A','Z'), range('a','z'), range('0','9'));
$max = count($characters) - 1;
for ($i = 0; $i < $length; $i++) {
$rand = mt_rand(0, $max);
$str .= $characters[$rand];
}
return $str;
}
?>
silahkan buat sebuah file baru dengan nama form-login.php, file ini akan diakses oleh member ketika mereka akan melakukan proses login.
<table>
<tr><td>Email</td><td><input type="email" name="email"></td></tr>
<tr><td>Password</td><td> <input type="password" name="password"></td></tr>
<tr><td></td><td><button type="submit" name="submit">Login</button></td></tr>
</table>
</form>
<?php
include 'koneksi.php';
include 'library.php';
include 'api-module/apifunction.php';
if (isset($_POST['submit'])) {
$email = $_POST['email'];
$password = md5($_POST['password']);
$sql = mysqli_query($koneksi, "select * from member where email='$email' and password='$password'");
$result = mysqli_num_rows($sql);
if($result>0){
// kirim OTP
$new_otp = randomString(6);
// insert ke database
$member = mysqli_fetch_array($sql);
mysqli_query($koneksi, "UPDATE member SET kode_otp='$new_otp'");
// kirim sms
$message = "KODE OTP ANDA ADALAH : $new_otp";
$send = sendsms($member['no_hp'], $message);
// aktifkan session
session_start();
$_SESSION['member_id']=$member['member_id'];
if($send){
$_SESSION['hasil'] = "KODE OTP SUDAH DIKIRIM KE NO HP ANDA";
}else{
$_SESSION['hasil'] = "GAGAL MENGIRIMKAN KODE OTP, SILAHKAN COBA LAGI";
}
// redireck ke halaman step 2
header("location:step2.php");
}else{
header("location:form-login.php");
}
}
?>
langkah selanjutnya adalah membuat file untuk tahapan langkah selanjutnya, pada tahapan ini penggunaka akan diminta untuk memasukan kode OTP yang dikirimkan ke No HP nya, jika kode OTP yang dimasukan sesuai dengan Kode OTP yang terdapat pada akun nya maka sistem akan mengredirect halaman pengguna ke halaman utama, tapi jika berbeda maka pengguna masih tetap akan di halaman ini, oke sekarang buatlah sebuah file baru dengan nama step2.php dan ketiklah script berikut ini :
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<input type="text" name="kode_otp" placeholder="Masukan OTP">
<button type="submit" name="proses">Proses</button>
</form>
<?php
include 'koneksi.php';
if(isset($_POST['proses'])){
session_start();
$kode_otp = $_POST['kode_otp'];
$member_id = $_SESSION['member_id'];
// chek
$sql = mysqli_query($koneksi, "SELECT * FROM member where member_id='$member_id' and kode_otp='$kode_otp'");
$chek = mysqli_num_rows($sql);
if($chek>0){
$_SESSION['status_login']=TRUE;
header("location:index.php");
}else{
echo "KODE OTP SALAH";
}
}
?>
langkah terkahir adalah membuat halaman utama ( index.php), halaman ini diproteksi secara sederhana sehingga tidak bisa di akses kalau belum login. silahkan ketikkan script berikut :
<?php
session_start();
if($_SESSION['status_login']==FALSE){
header("location:form-login.php");
}else{
echo "selamat datang pengguna";
}
?>
4. Tahap Pengujian
pada tahap ini kita akan melakukan pengujian terhadap proses yang sudah kita buat tadi, saya sudah berhasil melakukan login dan sekarang sms yang berisi kode OTP sudah masuk Ke No HP saya.
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.