Artikel freemium, membuat kode OTP melalui Bot Telegram sebagai autentikasi login pada sebuah website dengan framework PHP Codeigniter 3.
Mengapa menggunakan Bot Telegram? Ya salah satunya karena simple, open source dan pastinya gratis, tidak perlu memikirkan dan mengeluarkan biaya tambahan untuk menyewa SMS Gateway hanya untuk generate kode OTP misalnya.
Karena tutorial sebelumnya ditulis dengan menggunakan framework Codeigniter, disini saya akan melanjutkannya masih dengan framework tersebut agar terstruktur.
Sebelum lanjut ke pembahasan, ada baiknya anda sudah membaca artikel sebelumnya yaitu:
Jika sudah paham dasar-dasarnya, mari kita lanjutkan. Oiya sekedar info, artikel ini sifatnya freemium ya, maksudnya saya tidak akan menjelaskan source code secara detail satu-persatu, melainkan hanya poin-poinnya saja.
Jika anda ingin source code secara lengkap tenang saja, silahkan order Ebook + Source Code nya pada link (nyusul).
Persiapan Awal : Tools yang Diperlukan Bot Telegram OTP
Silahkan download framework PHP Codeigniter pada website resminya disini, saya masih menggunakan versi 3. Jika anda mau pakai versi 4 silahkan disesuaikan saja, karena dasarnya tetap sama.
Sudah punya Bot Telegram? Jika belum silahkan ikuti artikel ini : Membuat Bot Telegram dari Dasar (Coding dan Tanpa Coding). Jika sudah ada, silahkan simpan atau catat Token Bot nya pada teks editor kesayangan anda.
Jika sudah ada, Let’s Coding!
Menjalankan Codeigniter dan Struktur Database
Silahkan ekstrak dan pindahkan folder Codeigniter3 tadi ke direktori web server. Sebagai contoh disini saya menggunakan nama bot_telegram_otp sebagai nama project-nya.
Sehingga tampilan defaultnya menjadi seperti ini.
Selanjutnya adalah membuat database, disini nama database yang saya gunakan bernama: bot_telegram. Jika sudah, silahkan buat struktur tabel users seperti berikut ini.
Struktur tabel ini sama dengan tulisan yang pernah saya posting pada blog ini.
Jika sudah, tahap berikut nya adalah membuat bot telegram yang akan digunakan untuk proses registrasi. Jadi biar enak, registrasi usernya dilakukan langsung via Bot Telegram, agar Telegram ID nya bisa dideteksi secara otomatis.
Bot Telegram untuk Proses Registrasi User
Sebagai informasi, bot Telegram yang saya gunakan disini yaitu menggunakan bahasa pemrograman MoonScript dengan memanfaatkan fungsi atau metode IO.popen untuk mengeksekusi perintah yang akan digunakan pada proses registrasi user.
Contoh Bot Telegram publik yang menggunakan bahasa MoonScript ini yaitu Jack Telegram Bots.
Alur registrasinya yaitu seperti ini:
- User melakukan register melalui Bot Telegram
Hal ini digunakan untuk mengambil parameter Telegram ID dari user yang akan melakukan registrasi. - Informasi dari user, yaitu: Nama dan Telegram ID tersimpan ke database
- User mendapatkan balasan dari Bot Telegram beserta link untuk melanjutkan proses registrasi dan membuat password yang akan digunakan untuk proses login.
Sampai disini, tugas Bot Telegram untuk proses registrasi telah selesai.
Membuat Logic Web dengan CodeIgniter
Seperti biasa, jangan lupa untuk merubah config database pada berkas application/config/database.php. Contohnya seperti ini :
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => 'P@ssw0rd', 'database' => 'apps_clients', '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 );
Ubah juga berkas autoload pada application/config/autoload.php menjadi seperti ini :
$autoload['packages'] = array();
$autoload['libraries'] = array('database','session');
$autoload['drivers'] = array();
$autoload['helper'] = array('url', 'file', 'form');
$autoload['config'] = array();
$autoload['language'] = array();
$autoload['model'] = array();
Jika sudah, kita lanjutkan dengan membuat Controllers dan Models.
Membuat Controllers dan Models Register
Buat Controller dengan nama Register.php pada application/controllers/Register.php.
Isinya seperti di bawah ini.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Register extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->model('m_register');
}
function index(){
$telegram_id = $this->input->get('telegram_id');
$name = $this->input->get('name');
$username = $this->input->get('username');
$password = '-';
$auth_code = '-';
$user_data = array(
'telegram_id' => $telegram_id,
'name' => $name,
'username' => $username,
'password' => $password,
'auth_code' => $auth_code
);
$existing = array(
'telegram_id' => $telegram_id
);
$result = $this->m_register->checking("users",$existing);
$cek = $this->m_register->checking("users",$existing)->num_rows();
if($cek > 0){
echo "<title>Bot Telegram OTP</title>
<code>Telegram ID : $telegram_id sudah terdaftar</code>";
echo "";
} else {
$this->db->insert('users', $user_data);
echo "<title>Bot Telegram OTP</title>
Register Sukses, Telegram ID Anda : <code>$telegram_id</code>. Klik link di bawah ini untuk melanjutkan proses registrasi.";
}
}
}
Penjelasan:
- Nama Controllers yaitu Register
- Disini saya menggunakan metode GET, hal ini nantinya bertujuan untuk mempermudah proses registrasi dengan bot Telegram
- Untuk field password dan auth_code sebagai awalan kita isi saja dengan “-” terlebih dahulu, nantinya akan di update pada saat proses melanjutkan registrasi
- Controllers di atas memanggil Models yang saya namai dengan m_register, sehingga kita harus membuat berkas Models dengan nama
M_register.php. Pada model tersebut dilakukan pengecekkan apakah user sudah terdaftar atau memang belum - Jika sudah terdaftar akan ada keterangan user sudah terdaftar, jika belum maka user akan diinput ke database
- Selesai
Untuk berkas M_register.php silahkan isikan seperti di bawah ini.
<?php class M_register extends CI_Model{ function checking($table,$where){ return $this->db->get_where($table,$where); } }Sekarang kita testing terlebih dahulu untuk memastikan fungsi register tersebut berjalan, yaitu dengan memasukan user dummy pada url. Contohnya silahkan copy paste url berikut ini:
Jika berjalan dengan baik, hasilnya akan seperti tampilan di bawah ini.
Jika sudah tidak ada error, mari kita lanjutkan dengan membuat fungsi next pada Controllers Register. Tujuannya adalah sebagai proses melanjutkan register dan membuat password, seperti alur yang sudah saya jelaskan di atas.
Edit berkas Register.php dengan menambahkan 2 (dua) fungsi berikut ini.
1) Function next : ini berisi form untuk membuat password baru.
function next()
{
$data['telegram_id'] = $this->input->get('telegram_id');
$this->load->view('next',$data);
}
2) Fungsi save : ini berfungsi untuk menyimpan password baru yang dibuat pada fungsi next.
function save(){
$telegram_id = $this->input->post('telegram_id');
$password = $this->input->post('password');
$password_hash = md5($password);
$existing = array(
'telegram_id' => $telegram_id
);
$result = $this->m_register->checking("users",$existing);
$cek = $this->m_register->checking("users",$existing)->num_rows();
if($cek > 0){
$this->db->query("UPDATE users SET password='$password_hash' WHERE telegram_id='$telegram_id';");
echo "<title>Bot Telegram OTP</title>
<code>Password baru berhasil di-buat!</code>";
} else {
echo "<title>Bot Telegram OTP</title>
<code>User tidak ditemukan!</code>";
}
}
Jika sudah mari kita lakukan testing kembali menggunakan data dummy yang tadi. Pada respon registrasi berhasil, disana bisa kita lihat terdapat link yang bertuliskan “Klik disini untuk melanjutkan proses registrasi”.
Jika kita klik, maka akan di arahkan ke halaman selanjutnya yaitu membuat password baru.
Agar lebih jelas silahkan lihat gambar berikut ini, alur registrasi via Bot Telegram sampai dengan langkah membuat password baru.
Catatan : karena ini masih local development, silahkan disesuaikan IP Address nya jika dibuka dari perangkat yang berbeda, seperti dari handphone misalnya.
Sekarang kita klik link yang diberikan oleh Bot Telegram, sehingga kita akan di arahkan ke halaman untuk membuat password baru seperti ini.
Isi dan submit form tersebut, lalu cek di database, apakah ikut berubah?
Jawabannya: Ya, password berhasil diperbarui. Langkah selanjutnya adalah membuat fungsi Login pada website dan generate OTP otomatis via Bot Telegram.
Inilah sebenarnya yang menjadi fokus bahasan pada artikel ini.
Membuat Controllers, Models dan Views Login
Untuk Controllers Login, buat berkas di folder yang sama dengan Controllers Register yaitu pada application/controllers/Login.php.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->model('m_login');
}
function index()
{
$this->load->view('login');
}
function otp_auth()
{
$this->load->view('verifikasi');
}
function validate(){
$username = strtolower($this->input->post('username'));
$password = $this->input->post('password');
$where = array(
'username' => $username,
'password' => md5($password),
);
$result = $this->m_login->cek_login("users",$where);
$avail = $this->m_login->cek_login("users",$where)->num_rows();
if($avail > 0 ){
$avail = $result->row_array();
$data_session = array(
'username' => $avail['username'],
'name' => $avail['name'],
'telegram_id' => $avail['telegram_id'],
'status' => "login"
);
$this->session->set_userdata($data_session);
// FREEMIUM
} else {
$data["error"]="Invalid credentials.";
$this->load->view('login',$data);
}
}
}
Untuk Models M_login silahkan isi dengan ini.
<?php
class M_login extends CI_Model{
function cek_login($table,$where){
return $this->db->get_where($table,$where);
}
}
Selanjutnya, buat 2 (dua) buah berkas views yaitu login.php dan verifikasi.php.
1) Views login : ini merupakan tampilan halaman Login
<!DOCTYPE html>
<html lang="id">
<head>
<title>Bot Telegram OTP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br/>
<div class="small text-muted">Home » Login</div>
<hr>
<div class="col-md-6">
<h4>Login</h4>
<form method="POST" action="<?php echo base_url()?>login/validate/">
<div class="form-group">
<label for="nama">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Username . . ." name="username" required>
</div>
<div class="form-group">
<label for="nama">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Password . . ." name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</body>
</html>
2) Views verifikasi : ini merupakan tampilan halaman untuk memasukan kode OTP jika username dan password pada halaman login cocok.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Bot Telegram OTP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br/>
<div class="small text-muted">Home » Login OTP</div>
<hr>
<div class="col-md-6">
<h4>Login OTP</h4>
<form method="POST" action="<?php echo base_url()?>login/validate/">
<div class="form-group">
<label for="nama">OTP:</label>
<input type="tel" class="form-control" id="otp" placeholder="Kode OTP . . ." name="auth_code" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Verify</button>
</form>
</div>
</div>
</body>
</html>
Jika sudah, silahkan simpan dan sekarang waktunya kita test proses login, tampilannya seperti gambar di bawah ini.
Sekarang saya akan masukan username dan password yang sebelumnya sudah dibuat pada saat registrasi.
Dan bisa kita lihat, pada bagian kanan bawah ada notifikasi dari aplikasi Telegram desktop saya yang isinya merupakan kode OTP dari Bot Telegram.
Sekarang kita cocokan, apakah kode OTP yang dikirimkan oleh Bot Telegram sesuai dengan kolom auth_code pada username saya? Mari kita buktikan.
Hasilnya adalah sama, maka jika dimasukan pada halaman verifikasi kode tersebut adalah Valid. Perlu dicatat disini saya tidak terlalu memikirkan soal security melainkan hanya dasar-dasarnya saja.
Karena tujuan saya disini adalah menjelaskan bagaimana caranya memanfaatkan Bot Telegram untuk proses autentikasi Login OTP pada sebuah website.
Jadi jika ingin lebih aman misalnya untuk menghindari SQL Injection dan yang lainnya, silahkan disesuaikan sendiri ya.
Bagaimana, apakah anda tertarik membuatnya atau perlu source code secara lengkap?
Jika ya, silahkan hubungi saya via formulir kontak atau tinggalkan komentar pada kolom yang telah disediakan.
Live Demo OTP dengan Bot Telegram >>> : Bots wadagizig.
Gak mau pusing coding buat bikin Bot Telegram? Ini dia solusinya!
Minta OTP bot