Cara menggunakan password bcrypt in php

Pada tutorial kali ini saya akan menulis tentang bagaimana Tutorial Membuat Login menggunakan password hash dan password verify pada CodeIgniter 3, ada beberapa alasan mengapa memilih menulis CodeIgniter versi 3 terlebih dahulu, karena saya akan coba berbagi secara bertahap untuk tutorialnya nantikan saja ya untuk versi 4.

disini kita akan mengimplementasikan password hash dan password verify untuk login pada CodeIgniter 3. pada tutorial ini akan lumayan panjang, jdi siapkan kopi dan cemilan ya untuk membaca step by stepnya :) 

Pengetahuan dasar Password Hash dan Password Verify pada PHP :

Password Hash adalah salah satu fungsi pada php untuk melakukan ( one way hashing ) atau hashing satu arah untuk merubah plain text menjadi suatu kode acak atau kode enkripsi. metode ini cocok untuk mengamankan password anda, karena algoritma one way hashing ini tidak bisa kembali lagi ke data / plainteks sebelumnya 

Contoh penerapan password_hash() dengan kode script :

<?php 
    $p = password_hash('123', PASSWORD_DEFAULT);
    echo $p;
?>

• PASSWORD_DEFAULT adalah algoritma bawaan untuk melakukan hash yaitu menggunakan BCRYPT dan akan menghasilkan output sepanjang 60 karakter. Sangat disarankan untuk membuat field data pada database sepanjang 255 karakter, sebab output hasil hash dapat lebih panjang sesuai dengan algoritma yang digunakan.

disini kita akan coba mengubah plaintext (123) menjadi kode acak yg memiliki output sebagai berikut :

$2y$10$87QvYJZ7v45/ndgHAWJ9.O.tD7.Gx/8omK6mRhoyN7ZIpPW0UacwK

• sumber referensi tentang password hash pada php : https://masrud.com/post/password-hash-password-verify 

Sekarang bagaimana cara nya agar password yg sudah di hashing pada database akan cocok dengan input password yang berupa plaintext pada form login ?

pada jawabannya ialah kita menggunakan password_verify().

• Password Verify pada PHP berfungsi untuk mencocokan data yang sudah di hashing menggunakan password_hash() dengan plaintext. untuk contohnya, kita langsung melakukan penerapan pada CodeIgniter 3 :

Implementasi Password Hash dan Password Verify pada login dengan CodeIgniter 3 :

Jika anda pengguna framework CodeIgniter 3, implementasi ini akan cocok untuk anda sambil belajar membuat authentikasi login dengan codeigniter 3, untuk penerapan pada php dan framework lainnya hampir sama hanya saja akan beda penulisannya dan struktur code saja.

Langkah pertama 

Seperti biasa kita akan download kerangka kerja / framework CodeIgniter 3 terlebih dahulu, pada link : https://codeigniter.com/download download yg versi 3 yaa .

Struktur folder kita buat dengan nama login-ci3  pada htdocs dan extract file codeigniternya dan menjadiseperti ini pada tampilan text editor vscode :

Langkah kedua : Setting dan Konfigurasi CodeIgniter 3

pada langkah ini kita akan konfigurasi CodeIgniter 3 :

1. Setting base_url dan index_page terletak di folder application/config/config.php

   setting base_url

   $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']);

   - keterangan base_url ini akan secara dinamis membaca url root.

   setting index_page : disini kita akan menghilangkan / menyembunyikan index.php pada url :

   $config['index_page'] = 'index.php';

   menjadi :

   $config['index_page'] = '';

   lalu setting juga .htaccess, buatlah .htaccess pada root folder lalu isikan script berikut :

   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule ^(.*)$ index.php/$1 [L]

   - ket : pada setting index_page dan .htaccess ini mempunyai penjelasan untuk menghilangkan index.php pada url dengan contoh url sebelum di setting :

   http://localhost/login-ci3/index.php/welcome

   setelah disetting :

   http://localhost/login-ci3/welcome

2. Konfigurasi autoload.php terletak pada folder application/config/autoload.php

   disini kita akan konfigurasi autoload.php pada codeigniter 3 yang berfungsi untuk memanggil library-library dan helper yg kita akan pakai :

   Setting autoload libraries untuk memanggil penggunaan koneksi database dan session :

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

   Setting helper nya juga untuk kita bisa memanggil fungsi penggunaan base_url() :

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

3. Setting default Controller menjadi controller Login untuk root url, terletak pada folder application/config/routes.phpsebelum diubah :
   

   $route['default_controller'] = 'welcome';

   menjadi : 

   $route['default_controller'] = 'login';

   
   

Langkah ketiga : Membuat database

langkah ini kita akan membuat database, kita akan beri nama db tutorial_loginci3 dengan nama table login dengan field :

• id int(11) Primary Key auto increment
• user varchar(255)
• pass varchar(255)
• nama varchar(255)

atau copy dan import script tutorial_loginci3.sql :

-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Mar 13, 2021 at 07:39 PM
-- Server version: 10.4.14-MariaDB
-- PHP Version: 7.4.9

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `tutorial_loginci3`
--

-- --------------------------------------------------------

--
-- Table structure for table `login`
--

CREATE TABLE `login` (
  `id` int(11) NOT NULL,
  `user` varchar(255) NOT NULL,
  `pass` varchar(255) NOT NULL,
  `nama` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `login`
--

INSERT INTO `login` (`id`, `user`, `pass`, `nama`) VALUES
(1, 'admin', '$2y$10$XG7ickJghZ3jFvp1oDALne7YpNzaXqlL4Sa0oU/bXbM6MNLdxdCDW', 'Fauzan Falah');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `login`
--
ALTER TABLE `login`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `login`
--
ALTER TABLE `login`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

pada database diatas kita sudah mempunyai record atau isi :

• user : admin
• pass : 123
• nama : Fauzan Falah

Langkah keempat : setting koneksi database codeigniter 3 ke mysql

masuk ke langkah selanjutnya, kita akan mengkoneksikan codeigniter 3 ke mysql yang terletak pada folder : application/config/database.php

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root', //ubah username 
	'password' => '', // ubah password 
	'database' => 'tutorial_loginci3', // ubah nama databasenya
	'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
);

- ket : setting saja yg sudah diberi keterangan / comments diatas

Langkah kelima : Membuat Controller dan Views Form Login

1. Membuat Controller Login.php

pada langkah ini kita akan implementasikan login nya, pada controller buat file Login.php pada folder application/controller dan membuat function index  :

Controller Login.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function __construct() {
        parent::__construct();
    }

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

2. Membuat views login/index.php

lalu kita akan membuat tampilan form login nya pada folder file application/views/login/index.php

views login/index.php

<!doctype html>
<html lang="en">
    <head>
        <title>Login</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body style="background:#1689c7;">
        <div class="container">
            <!-- grid -->
            <div class="row">
                <div class="col-sm-5 mx-auto mt-5 pt-5">
                    <?php if(!empty($this->session->flashdata('failed'))){?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <?= $this->session->flashdata('failed');?>
                    </div>
                    <?php }?>
                    <div class="card">
                        <div class="card-header">
                            Form Login
                        </div>
                        <div class="card-body">
                            <form method="POST" action="<?= base_url('login/proses');?>">
                                <div class="form-group">
                                    <label for="">Username</label>
                                    <input type="text" required
                                        class="form-control" name="user" id="user" placeholder="Masukan Username">
                                </div>
                                <div class="form-group">
                                    <label for="">Password</label>
                                    <input type="password" required
                                        class="form-control" name="pass" id="pass" placeholder="Masukan Password">
                                </div>
                                <button type="submit" class="btn btn-primary btn-md float-right">Login</button>
                            </form>
                        </div>
                        <div class="card-footer text-muted">
                            Copyright &copy; <?= date('Y');?> codekop
                        </div>
                    </div>
                </div>
            </div>
            <!-- grid -->
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
</html>

3. hasil tampilan :

Langkah keenam : Membuat Proses Login dengan menggunakan Password Hash dan Password Verify

selanjutnya kita akan implementasikan password hash dan password verify di function proses() pada controller Login.php, karena action form login mengarah pada script <?= base_url('login/proses');?> untuk melakukan authentikasi data login

Controller Login.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function __construct() {
        parent::__construct();
    }

	public function index()
	{
		$this->load->view('login/index');
    }
    
    public function proses()
    {
        $user = $this->input->post('user', TRUE);
        $pass = $this->input->post('pass', TRUE);

        // select * from login where user = ?
        $cek  = $this->db->get_where('login',['user' => $user]);
        
        // cek username 
        if($cek->num_rows() > 0)
        {
            // kita ambil isi dari record
            $hasil = $cek->row();
            if(password_verify($pass, $hasil->pass))
            {
                // membuat session
                $this->session->set_userdata('id', $hasil->id);
                $this->session->set_userdata('is_login', TRUE);

                // redirect ke admin
                redirect(base_url('home'));
            }else{

                // jika password salah
                $this->session->set_flashdata('failed','Password salah !');
                redirect(base_url('login'));
            }

        }else{

            // jika username salah
            $this->session->set_flashdata('failed','Username tidak Tersedia !');
            redirect(base_url('login'));
        }
    }

}

Langkah ketujuh : Membuat Home Admin untuk Login

1. Membuat Controller Home.php

pada langkah ini, setelah membuat proses login untuk authentikasi ke halaman admin, sekarang kita akan membuat controller Home.php pada folder application/controller, sebagai page admin dan testing apakah user berhasil login atau belum :

Controller Home.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends CI_Controller {

	public function __construct() {
        parent::__construct();
        if(!empty($this->session->userdata('is_login') == FALSE)){
            // alert peringatan bahwa harus login
            $this->session->set_flashdata('failed','Anda Belum login, silahkan login terlebih dahulu !');
            redirect(base_url('login'));
        }
    }

	public function index()
	{
        $this->data = [
            'title_web' => 'Dashboard',
            'userx'     => $this->db->get_where('login', ['id' => $this->session->userdata('id')])->row(),
        ];

		$this->load->view('home/index',$this->data);
    }
}

2. Membuat Views Home Admin :

lalu kita akan membuat tampilan home setelah login nya pada folder file application/views/home/index.php

views home/index.php

<!doctype html>
<html lang="en">
    <head>
        <title><?= $title_web;?></title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                    aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?= base_url('login/logout');?>">Logout</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container mt-5">
            <div class="jumbotron">
                <p class="lead">Welcome, <?= $userx->nama;?>, anda sudah login !</p>
                <hr class="my-2">
            </div>
        </div>
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
</html>

3. Tampilan setelah Login ( dengan username : admin dan password : 123 )

Langkah kedelapan : Membuat Logout pada Controller Login.php

pada langkah ini kita akan membuat function logout(), pada Controller Login.php dimana function logout() ini berfungsi untuk logout dari sistem :

Controller Login.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function __construct() {
        parent::__construct();
    }

	public function index()
	{
		$this->load->view('login/index');
    }
    
    public function proses()
    {
        $user = $this->input->post('user', TRUE);
        $pass = $this->input->post('pass', TRUE);

        // select * from login where user = ?
        $cek  = $this->db->get_where('login',['user' => $user]);
        
        // cek username 
        if($cek->num_rows() > 0)
        {
            // kita ambil isi dari record
            $hasil = $cek->row();
            if(password_verify($pass, $hasil->pass))
            {
                // membuat session
                $this->session->set_userdata('id', $hasil->id);
                $this->session->set_userdata('is_login', TRUE);

                // redirect ke admin
                redirect(base_url('home'));
            }else{

                // jika password salah
                $this->session->set_flashdata('failed','Password salah !');
                redirect(base_url('login'));
            }

        }else{

            // jika username salah
            $this->session->set_flashdata('failed','Username tidak Tersedia !');
            redirect(base_url('login'));
        }
    }

    public function logout()
    {
        $this->session->sess_destroy();
        redirect(base_url('login'));
    }
}

Langkah terakhir : Uji coba / testing Login dan Logout 

1. Masuk url Login :

2. Lakukan testing dengan username salah, Jika salah, Username akan mengeluarkan peringatan Username tidak Tersedia !

3. Lakukan testing dengan password salah, Jika Password Salah maka akan mengeluarkan peringatan Password salah !

4. Lakukan testing dengan username dan password dengan benar, maka akan masuk halaman home admin 

5. lakukan Logout dan sekali lagi akses home admin, jika posisi kita sudah logout atau belum login maka tidak bisa mengakses home admin 

Akhir kata :

Pembahasan ini untuk Tutorial Lengkap Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3, Terima kasih sudah berkunjung, semoga tutorial ini bermanfaat, mohon maaf bila ada salah salah kata, dan kekurangan pada pembuatan tutorial kali ini. salam koding.