Cara menggunakan generate otp in php

Cara membuat login dengan kode OTP SMS menggunakan codeigniter - pada tutorial sebelumnya kita telah membahas bagaimana cara mengirim SMS menggunakan layanan SMS gateway Medan SMS dengan codeigniter. Nah pada tutorial tersebut saya sempat menyinggung bahwa fitur SMS ini dapat teman-teman gunakan untuk mengirim kode OTP saat login agar proses login tersebut lebih aman. Jadi kali ini kita akan belajar tentang menggunakan kode OTP saat ingin melakukan login dengan menggunakan codeigniter.

Pembukaan

Apakah teman-teman sudah tau apa itu kode OTP ? Kode OTP atau One-Time Password adalah kode verifikasi atau kata sandi sekali pakai yang terdiri dari 6 digit karakter (seringkali angka) unik dan rahasia yang umumnya dikirimkan melalui SMS atau e-mail. Setiap kode yang dikirimkan ini umumnya hanya berlaku selama 5 menit. (https://www.jenius.com/highlight/detail/pahami-pentingnya-merahasiakan-kode-otp)

Sebelum kita membahas tutorialnya, disini saya hanya menggunakan 4 digit kode dan juga masa berlaku kode tersebut selama 10 menit. Jika teman-teman ingin mengubah menjadi 6 digit ataupun 5 digit, teman-teman bisa kok mengubah jumlah digit kode sesuai dengan keinginan teman-teman. Alasan saya memberi waktu selama 10 menit adalah karena disini saya menggunakan layanan SMS Gateway yang gratisan, jadi terkadang dalam waktu 10 menit saja SMS belum terkirim, tapi jika teman-teman ingin mengubah waktu menjadi 5 menit atau sesuai keinginan teman-teman bisa diubah secara gampang sesuai dengan tutorial yang akan saya berikan.

Tutorial

Sebelum kita ke langkah pertama, alangkah baiknya teman-teman membaca terlebih dahulu tentang tutorial mengirim sms menggunakan sms geteway medan sms dengan codeigniter, karena tutorial tersebut sangat berkaitan dengan tutorial kali ini.

Baca :

Cara mengirim sms dengan codeigniter menggunakan sms gateway medan sms

Langkah pertama yang harus teman-teman lakukan adalah, download terlebih dahulu codeigniter versi 3 karena saya pada tutorial kali ini menggunakan codeigniter versi 3, atau teman-teman bisa langsung download disini 

https://api.github.com/repos/bcit-ci/CodeIgniter/zipball/3.1.11

Selanjutnya, siapkan database dengan nama otp kemudian buat 2 table dengan nama akunuser dan kodeotp. agar tutorial ini tidak terlalu panjang dan mudah dipahami maka akan langsung saya berikan databasenya, jadi teman-teman tinggal download dan langsung import ke database otp tadi. Untuk link downloadnya ada disini (download database)

Selanjutnya setelah database dan table berhasil dibuat, kemudian kita setting dulu framework codeigniter nya. Pertama kita setting dibagian autoload.php yang ada difolder application/config. Ubah kode yang ada dibawah ini :

$autoload['libraries'] = array();

Menjadi

$autoload['libraries'] = array('database','session');

Masih didalam file autoload.php yang ada difolder application/config. Ubah kode yang ada dibawah ini:

$autoload['helper'] = array();

Menjadi

$autoload['helper'] = array('url','form');

Setelah itu kita pindah ke bagian file config.php yang ada di folder application/config. Ubah kode yang ada dibawah ini:

$config['base_url'] ='';

Menjadi

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://" . $_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);

Masih didalam file config.php yang ada difolder application/config. Ubah kode yang ada dibawah ini:

$config['encryption_key'] = '';

Menjadi

$config['encryption_key'] = 'otpsms2020';

Untuk encryption_key teman-teman bebas mau mengisi dengan kata apa. Selanjutnya kita akan setting pada bagian database yang digunakan untuk mengkoneksikan sistem yang akan kita buat dengan database mysql. Masuk pada bagian file database.php yang ada dalam folder application/config. Sesuaikan hostname, username, password dan database dengan yang teman-teman punya. Berikut settingan database di file saya :

 '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'otp',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Ok setting codeigniter nya sudah selesai kita lakukan, kemudian kita akan lanjut untuk membuat halaman loginnya.

Disini saya tetap menggunakan file controller bawa'an codeigniternya itu sendiri yaitu file Welcome.php. Tapi jika teman-teman ingin membuat file controller baru silahkan, tapi sesuaikan dengan yang akan kita buat ya. Masuk ke file controller teman-teman, karena disini saya menggunakan controller Welcome.php jadi saya masuk ke file Welcome.php yang ada di folder application/controllers. Disini saya membuat sebuat construct untuk meload fungsi yang ada pada helper saat pertama kali program dijalankan. Teman-teman bisa salin kode construct yang ada dibawah ini sesudah kode class Welcome extends CI_Controller { 

public function __construct(){
    parent::__construct();
    $this->load->helper('string');
}

Disini saya menggunakan $this->load->helper('string'); untuk merandom kode otp yang akan kita buat. Selanjutnya kita akan buat fungsi index untuk menampilkan halaman login. Silahkan teman-teman salin kode yang ada dibawah ini:

public function index()
{
    $this->load->view('masuk');
}

Disini saya menggunakan file masuk.php yang ada di folder application/views, file ini nantinya akan kita gunakan untuk menampilkan halaman login. Untuk kode menampilkan halaman login nya, teman-teman bisa salin kode berikut :

	
	
	
	



    
Login Dengan OTP

    session->flashdata('gagal')){ ?>  
        session->flashdata('gagal'); ?>
    

    session->flashdata('sukses')){ ?>  
        session->flashdata('sukses'); ?>
    
    

	

	

	Login
    

Untuk form action nya, teman-teman sesuaikan nama controller nya ya, karena disini saya menggunakan nama controller Welcome.php dan proses login saya ada pada fungsi login maka saya buat form action nya .

Selanjutnya kita pindah ke file Welcome.php yang ada pada folder application/controller (atau bisa teman-teman sesuaikan nama file controller nya), sekarang kita akan membuat fungsi login untuk memproses login yang akan kita buat. Teman-teman bisa salin kode dibawah ini:

public function login()
{
    date_default_timezone_set('Asia/Jakarta');

    $user = $this->input->post('email', TRUE); //sesuaikan dengan input name form
    $pass = md5($this->input->post('pass', TRUE)); //sesuaikan dengan input name form     $cek = $this->db->get_where('akunuser', array('email' => $user)); //cek email ke table akuuser
    //apakah email ada ditable akun user, jika iya maka cek password
    if ($cek->num_rows()>0) { 
        $cek=$cek->row();         //apakah password yang dimasukkan sesuai dengan password yang ada pada tabel, jika iya maka set session
	if($cek->pass==$pass)
	    {	//ambil data yang ada pada tabel akunuser berdasarkan email dan password	
	        $datauser = $this->db->get_where('akunuser', array('email' => $user,'pass'=>$pass))->row();
		$datasession=array(
			'emailaplikasiotp' 	    => $datauser->email,
			'namaaplikasiotp' 	    => $datauser->nama,
			'nomorhandphoneaplikasiotp' => $datauser->nomor_handphone,
			'statusloginaplikasiotp'    => 'pendinglogin',
		);                //set session
		$this->session->set_userdata($datasession);

                //random kode otp sejumlah 4 digit, jika teman-teman ingin 6 digit silahkan ubah 4 menjadi 6
		$kodeOtp =  random_string('numeric', 4);                 //menentukan lama kode otp berlaku, disini saya set menjadi 10 menit, jika ingin mengubah menjadi 5 menit ubah +10 menjadi +5
		$tanggalSekarang=date('Y-m-d H:i:s');
		$datetime = new DateTime($tanggalSekarang);
		$datetime->modify('+10 minute');
		$tanggalKadaluarsa=$datetime->format('Y-m-d H:i:s');

		$data = array(
			'email' 		=> $user,
			'kode' 			=> $kodeOtp,
			'tanggal_kadaluarsa' 	=> $tanggalKadaluarsa,
			'status' 		=> 'Y'
		);
                //memasukkan kode otp kedalam tabel kodeotp
		$this->db->insert('kodeotp', $data);
                //mengirim sms kode otp ke nomor yang terdaftar pada tabel akunuser, pastikan nomor aktif
		$email_api = urlencode("xxx"); //ubah dengan email medan sms kalian
		$passkey_api = urlencode("xxx"); //ubah dengan api key medan sms kalian
		$no_hp_tujuan = urlencode($datauser->nomor_handphone);
		isi_pesan = urlencode("Kode OTP : ".$kodeOtp);

		$url = "https://reguler.medansms.co.id/sms_api.php?action=kirim_sms&email=".$email_api."&passkey=".$passkey_api."&no_tujuan=".$no_hp_tujuan."&pesan=".$isi_pesan;
		$result = file_get_contents($url);
		$data = explode("~~~", $result);
                //jika sms terkirim maka akan mengarah ke halaman validasi
		if ($data[0]==1) {
		    redirect('welcome/validasi');
		}else{
                    //jika sms tidak terkirim makan tetap pada halaman login dan mengubah status kode otp menjadi N (tidak aktif)
		    $this->db->set('status', 'N');
		    $this->db->where('email', $user);
		    $this->db->update('kodeotp');

		    $this->session->set_flashdata('gagal', "kode otp gagal dikirim, silahkan coba login kembali");
		    redirect('welcome');
		}


	    }else{  //kondisi jika katasandi salah
		$this->session->set_flashdata('gagal', "Kata sandi salah");
		redirect('welcome');
	    }

	}else{ //kondisi jika email tidak terdaftar
	    $this->session->set_flashdata('gagal', "Nama Pengguna Ditolak");
	    redirect('welcome');
	}
}

Untuk penjelasan kode nya sudah ada didalam komentar kodenya ya teman-teman.Sampai disini sebenarnya kita sudah berhasil mengirimkan kode OTP melalui SMS ke nomor handphone yang telah terdaftar, tetapi kita harus membuat halaman untuk memvalidasi apakah kode OTP tersebut cocok dengan yang ada di tabel akunuser atau tidak.

Selanjutnya kita akan buat sebuah fungsi untuk menampilkan halaman validasi. Masih di file controller Welcome.php yang ada di folder application/controllers (sesuaikan nama file dengan yang teman-teman buat), kita akan membuat fungsi dengan nama validasi. Untuk kodenya dapat teman-teman lihat dibawah ini:

public function validasi()
{
    $this->session2();
    $this->load->view('validasi');
}

Fungsi tersebut digunakan untuk memanggil file validasi.php yang ada di folder application/views, file ini dibuat untuk menampilan halaman tempat kita memasukkan kode otp yang telah dikirim melalui SMS. Selanjutnya kita buat file validasi.php di folder application/views, kemudian salin kode berikut ini:

	
	
	
	



    
Masukkan Kode OTP

    session->flashdata('gagal')){ ?>  
          session->flashdata('gagal'); ?>
    

    session->flashdata('sukses')){ ?>  
          session->flashdata('sukses'); ?>
    
    

	

	Verifikasi
	

	    batas waktu 

	    Tidak menerima sms kode otp? kirim ulang

	    Kembali Login
	
    

    
    

Pada form action, kita mengarahkan ke controller welcome kemudian fungsi validasiproses, teman-teman bisa ubah jika nama controller atau nama fungsinya berbeda. Selanjutnya kita masuk ke file Welcome.php yang ada pada folder application/controllers (sesuaikan nama file dengan yang teman-teman buat) dan membuat sebuah fungsi dengan nama validasiproses, fungsi ini nantinya yang akan mengecek kode OTP yang telah diterima melalui SMS apakah valid atau tidak valid. Untuk kode validasi proses dapat teman-teman lihat dibawah ini:

public function validasiproses()
{
    date_default_timezone_set('Asia/Jakarta');
    $user = $this->session->userdata('emailaplikasiotp');
    $kode = $this->input->post('kodeotp',TRUE);
    $waktuSekarang=date('Y-m-d H:i:s');
    //cek kode otp berdasarkan email, kode dan status
    $cek = $this->db->get_where('kodeotp', array('email' => $user,'kode'=>$kode,'status'=>'Y'));
    if ($cek->num_rows()>0) {
        $cek=$cek->row();
        if ($waktuSekarang>$cek->tanggal_kadaluarsa) {
	    $this->session->set_flashdata('gagal', "Kode OTP tidak valid");
	    redirect('welcome/validasi');	
	}else{ //jika otp sudah benar maka session akan berubah menjadi sukseslogin
            $datasession=array(
	        'statusloginaplikasiotp' 	=> 'sukseslogin',
	    );

	    $this->session->set_userdata($datasession);

	    $this->db->set('status', 'N');
	    $this->db->where('email', $user);
	    $this->db->update('kodeotp');
            redirect('welcome/dashboard');	

	}

    }else{
	$this->session->set_flashdata('gagal', "Kode OTP tidak valid");
	redirect('welcome/validasi');
    }
}

Sampai disini kita sudah selesai membuat login dengan kode OTP, tetapi kita belum memiliki file untuk menampilkan halaman setelah berhasil login, maka kita akan membuat 1 buat file untuk menampilkan halaman setelah user selesai melalukan login. Buat file dashboard.php di dalam folder application/views, kemudian salin kode berikut ini :

    
    
    


	
    
Selamat datang  session->userdata('namaaplikasiotp') ?> 
    Keluar

Selanjutnya masuk ke file controller Welcome.php yang ada difolder application/controllers(sesuaikan nama file dengan yang teman-teman buat), kemudian kita buat sebuah fungsi untuk memanggil halaman dashboard.php yang ada difolder application/views. Untuk kodenya teman-teman bisa lihat dibawah ini:

public function dashboard()
{
    $this->session1();
    $this->session2();
    $this->load->view('dashboard');
}

Masih di file controller Welcome.php yang ada di folder application/controllers(sesuaikan nama file dengan yang teman-teman buat), kita akan membuat fungsi session1 dan session2 dimana fungsi ini akan mengandle akses ke halaman dashboard dan juga halam validasi. Untuk kode sessionnya dapat dilihat dibawah ini :

function session1(){ //session jika status pendinglogin (sudah login tapi otp belum divalidasi)
    if($this->session->userdata('statusloginaplikasiotp')=="pendinglogin"){
        redirect('welcome/validasi');
    }
}

function session2(){//session jika belum melakukan login dan juga validasi otp
    if($this->session->userdata('statusloginaplikasiotp')!="pendinglogin" && $this->session->userdata('statusloginaplikasiotp')!="sukseslogin"){
        redirect('welcome');
    }
}
public function keluar() //fungsi untuk keluar
{
    $this->session->sess_destroy();
    redirect('welcome');
}
	

Sampai disini sistem login dengan menggunakan OTP sudah jadi teman-teman, kita hanya perlu 1 buah fungsi untuk mengirim ulang kode OTP apabila waktu berlaku kode OTP sudah habis, nah fungsi ini tentuntya sangat perlu dong. Untuk kode kirim ulang kode OTP dapat dilihat dibawah ini:

public function kirimulang()
{
    date_default_timezone_set('Asia/Jakarta');
    $kodeOtp =  random_string('numeric', 4);
    $tanggalSekarang=date('Y-m-d H:i:s');
    $datetime = new DateTime($tanggalSekarang);
    $datetime->modify('+10 minute');
    $tanggalKadaluarsa=$datetime->format('Y-m-d H:i:s');

    $this->db->set('status', 'N');
    $this->db->where('email', $this->session->userdata('emailaplikasiotp'));
    $this->db->update('kodeotp');


    $data = array(
        'email' 		=> $this->session->userdata('emailaplikasiotp'),
        'kode' 			=> $kodeOtp,
	'tanggal_kadaluarsa' 	=> $tanggalKadaluarsa,
	'status' 		=> 'Y'
    );

    $this->db->insert('kodeotp', $data);


    $email_api = urlencode("xxxxx");
    $passkey_api = urlencode("xxxxxx");
    $no_hp_tujuan = urlencode($this->session->userdata('nomorhandphoneaplikasiotp'));
    $isi_pesan = urlencode("Kode OTP : ".$kodeOtp);

    $url = "https://reguler.medansms.co.id/sms_api.php?action=kirim_sms&email=".$email_api."&passkey=".$passkey_api."&no_tujuan=".$no_hp_tujuan."&pesan=".$isi_pesan;
    $result = file_get_contents($url);
    $data = explode("~~~", $result);

    if ($data[0]==1) {
        $this->session->set_flashdata('sukses', "kode otp berhasil dikirim ulang");
        redirect('welcome/validasi');
    }else{
        $this->db->set('status', 'N');
	$this->db->where('email', $this->session->userdata('emailaplikasiotp'));
	$this->db->update('kodeotp');

        $this->session->set_flashdata('gagal', "kode otp gagal dikirim, silahkan coba login kembali");
	redirect('welcome/validasi');
    }
}

Nahh dengan begini sistem login dengan menggunakan kode OTP sudah bisa kita jalankan. Jika teman-teman ada yang kesulitan dalam tutorial kali ini tenang saja saya sudah menyediakan file downloadnya yang bisa teman-teman gunakan untuk bahan belajar. Karena saya paham tutorial ini terlalu panjang sehingga teman-teman ada yang kebingungan.

Untuk filenya dapat teman-teman download melalui link ini : download file

Semoga tutorial kali ini bermanfaat buat teman-teman dan terimakasih sudah berkunjung.