CARA MEMBUAT FITUR OTP DENGAN LAYANAN SMS API

August 29, 2016
Posted by: Nuris Akbar
Category: Tips Dan Trik Web Security

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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 :

1

2

3

4

5

<?php

// isikan API username dan API key Anda

$apiUsername = '...';

$apiKey = '...';

?>
selesai

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.

1

2

3

4

5

6

7

8

<?php

// konfigruasi koneksi

$host       = "localhost";

$user       = "root";

$password   = "";

$database   = "latihan";

$koneksi = mysqli_connect($host,$user,$password,$database);

?>

langkah 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.

1

2

3

4

5

6

7

8

9

10

11

12

<?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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

    <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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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 :

1

2

3

4

5

6

7

8

<?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.

5 – Penutup & Kesimpulan

ini hanyalah salah satu langkah yang bisa kita gunakan untuk mengamankan akun kita, script yang saya contohkan di atas memang belum sempurna, anda bisa menambahkan fungsi untuk antisipasi SQL injection ataupun yang lain nya agar lebih aman. script ini sengaja saya buat se sederhana mungkin agar mudah dimengerti dan di impelemetasikan, kalau ada yang ingin ditanyakan silah posting di kolom komentar. terima kasih

Kumpulan Tutorial Kito

Rabu, 20 Februari 2019

OTP php untuk notifikasi login