Tutorial Membuat Tanda Tangan Digital/Elektronik (Digital Signatur/TTE) Menggunakan Barcode Untuk Cek Keaslian File dengan CodeIgniter 3 dan JSignPdf

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari bagaimana cara membuat tanda tangan digital/elektronik (Digital Signature/TTE) menggunakan barcode dan untuk cek keaslian file pdf. Disini kita menggunakan Framework CodeIgniter dan JSignPdf untuk penerapannya.

 

Tahap#1 - Pendahuluan

Tanda tangan adalah tulisan tangan, kadang-kadang diberi gaya tulisan tertentu dari nama seseorang atau tanda identifikasi lainnya yang ditulis pada dokumen sebagai sebuah bukti dari identitas dan kemauan (Sumber : Wikipedia).

Tanda tangan digital adalah skema matematika untuk memverifikasi keaslian pesan atau dokumen digital. Tanda tangan digital yang valid, di mana prasyarat dipenuhi, memberi penerima alasan yang sangat kuat untuk percaya bahwa pesan itu dibuat oleh pengirim yang dikenal, dan bahwa pesan itu tidak diubah dalam perjalanan (Sumber : Wikipedia).

Tanda tangan elektronik dibuat melalui mekanisme kriptografi kunci publik. Kriptografi kunci publik memanfaatkan dua buah kunci yang berbeda namun saling berkaitan secara matematika, yakni kunci publik dan kunci privat. Kunci publik dapat diberikan atau diakses oleh siapa pun dan digunakan oleh pihak lain untuk melakukan verifikasi/validasi atas tanda tangan elektronik yang kita buat. Dalam Infrastruktur Kunci Publik, kunci publik ditanam dalam sertifikat elektronik yang diterbitkan/dikeluarkan oleh Certification Authority. Sedangkan private key harus dijaga kerahasiaannya, atau dalam kata lain hanya pemilik kunci saja yang dibolehkan mengetahui dan mengakses kunci tersebut (Sumber : BSRE).

Berikut scema Tanda tangan digital/elektronik

Tahap#2 - Persiapan

Untuk membuat Tanda tangan digital/elektronik kita membutuhkan tools sebagai berikut :

1. Java SE Runtime Environment
   Untuk menjalankan tanda tangan digital/elektronik kita membutuhkan Java sebagai eksekutor. Filenya bisa didownload disini
2. File P12
   Untuk authorization Tanda Tangan Digitalnya kita membutuhkan Self-signed certificate yang bisa dibuat disini  dan jika ingin menggunakan sertifikat dari Klinik Code bisa didownload disini
3. CodeIgniter
   Disini untuk penerapannya saya menggunakan Framework CodeIgniter. Filenya bisa didownload disini
4. CI QRCode
   Untuk melihat keaslian File PDF kita membutuhkan sebuah libray yaitunya CI QRCode yang bisa didownload disini
5. JSignPdf
   Untuk sign Tanda tangan digitalnya kita menggunakan JSignPdf. Filenya bisa didownload disini
6. Dokumentasi JSignPdf
   Untuk lebih menguasai JSignPdf bisa baca dokumentasinya disini
    

Tahap#3 - Installasi

Setelah persiapan pada tahap 2 diatas selesai buatlah struktur aplikasinya seperti gambar berikut :

Selanjutanya untuk library dan third_party Aplikasi pihak ketiga yaitu JSignPdf

Tahap#4 - Konfigurasi

Pada tahap ini kita akan mensetting CodeIgniternya

• application/config/autoload.php
  Disini kita membutuhkan 2 buah helper

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

   

• application/config/config.php

  $config['base_url']   = 'https://demo.klinikcode.com/digital_sign/';
  $config['index_page'] = '';

   

• application/config/routes.php

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

   

• .htaaccess
  Untuk url friendly ubahlah .htaccess menjadi

  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
  
  Header set X-XSS-Protection "1; mode=block"
  Header always append X-Frame-Options SAMEORIGIN
  Header set X-Content-Type-Options nosniff

   

Tahap#5 - Buat File Controller Digital_sign.php

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

class Digital_sign extends CI_Controller
{
  public function index()
  {
    $data = [
      'title' => 'Digital Signature'
    ];
    $this->load->view('digital_sign', $data);
  }
  
  public function sign()
  {
    $this->load->library('ciqrcode');
    $output = [
      'status'  => false,
      'message' => '',
      'error'   => ''
    ];
  
    $id   = $this->input->post('id');
  
    $config['upload_path']          = './ttd/belum_ttd/';
    $config['allowed_types']        = 'pdf';
    $config['file_name']            = 'Dokumen Contoh';
    $config['overwrite']            = true;
    $config['max_size']             = 1024;
  
    $this->load->library('upload', $config);
  
    if (!$this->upload->do_upload($id)) {
      $output['status']   = false;
      $output['message']  = $this->upload->display_errors();
    } else {
      $upload = ['upload_data' => $this->upload->data()];
      $file_name = $upload['upload_data']['file_name'];
      $token     = substr(md5($file_name), 0, 10);
      $qr_image  = strtotime(date('Y-m-d H:i')) . '-' . strtoupper($token) . '.png';
      $file_names = explode('.pdf', $file_name);
  
      $params['data']     = site_url('ttd/sudah_ttd/' . $file_names[0] . '_signed.pdf');
      $params['level']    = 'H';
      $params['size']     = 4;
      $params['savename'] = FCPATH . "ttd/qrcode/" . $qr_image;
      $this->ciqrcode->generate($params);
  
      $path_jar = APPPATH . 'third_party/jsignpdf/JSignPdf.jar';
  
      $path_pdf = realpath('./ttd/belum_ttd/' . $file_name);
  
      $path_p12 = realpath('./ttd/p12/KLINIKCODE-2020-07-22-170537.p12');
      $visualisasi = realpath('./ttd/qrcode/' . $qr_image);
      $passphrase = 'password';
      $output_path = realpath('./ttd/sudah_ttd/');
  
      $llx = 64.57554;
      $lly = 687.8667;
      $urx = 249.4964;
      $ury = 616.0;
  
      if (file_exists($path_jar)) {
        $output['java'] = "Java Valid";
      }
      if (file_exists($path_pdf)) {
        $output['pdf'] = "Dokumen Valid";
      }
      if (file_exists($path_p12)) {
        $output['sertifikat'] = "Sertifikat Valid";
      }
      if (!file_exists($path_p12)) {
        $output['status_sertifikat'] = "Sertifikat Tidak Ditemukan !";
      }
  
      if (!($cert_store = file_get_contents($path_p12))) {
        $output['read_sertifikat'] = "Sertifikat tidak bisa dibaca !";
      }
  
      if (!openssl_pkcs12_read($cert_store, $cert_info, $passphrase)) {
        $output['pass_key'] = "Pass Key Salah !";
      }
  
      $first = 1;
  
      $command = 'java -jar "' . $path_jar . '" "' . $path_pdf . '" -kst PKCS12 -ksf "' . $path_p12 . '" -ksp "' . $passphrase . '" -tsh SHA256 -ha SHA256 -d "' . $output_path . '" -os "_signed" -llx ' . $llx . ' -lly ' . $lly . ' -urx ' . $urx . ' -ury ' . $ury . ' --l4-text "" --l2-text "" --bg-scale -1 --bg-path "' . $visualisasi . '" -r "Dokumen telah ditandatangani secara elektronik" -l "Padang" -c "https://klinikcode.com" --page ' . $first . ' -V -v';
  
      exec($command, $val, $er);
  
      if ($er == 0 || $er == 3) {
        $output['status'] = true;
        @unlink($visualisasi);
      } else {
        $output['error']    = $er;
        $output['status']   = false;
      }
    }
  
    echo json_encode($output);
  }
}

1. Method index
   Berfungsi untuk menampilkan file pdf yang akan ditanda tangani
2. Method sign
   Berfungsi untuk memproses upload file pdf dan generated qrcode sampai dengan tahapan sign tanda tangan digital menggunakan JSignPdf

Tahap#6 - Buat File Views digital_sign.php

<!doctype html>
<html lang="en">

<head>
  <!-- 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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  
  <title><?= $title; ?></title>
</head>
  
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
      </div>
      <div class="col-md-8">
        <div class="card mt-3">
          <div class="card-header">
            <?= $title; ?>
          </div>
          <div class="card-body">
            <form id="form-sign">
              <div class="form-group">
                <label for="file_pdf">File PDF</label>
                <input type="file" class="form-control" id="file_pdf" name="file_pdf" required>
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">Sign</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <iframe id="tampil_pdf" style="display: none;" src="" width="100%" height="768px"></iframe>
    </div>
  </div>
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  
  <script>
    function base_url(link = '') {
      let alamat = "<?= base_url(); ?>" + link;
      return alamat;
    }
    $('#form-sign').on('submit', function(e) {
      e.preventDefault();
      let form_data = new FormData(document.getElementById("form-sign"));
      let file_data = $('#file_pdf').prop('files')[0];
      form_data.append('file', file_data);
      form_data.append('id', 'file_pdf');
  
      $.ajax({
        url: "<?php echo base_url('digital_sign/sign'); ?>",
        dataType: 'json',
        mimeType: "multipart/form-data",
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(data) {
          console.log(data);
          if (data.status = true) {
            $('#tampil_pdf').show();
            $('#tampil_pdf').attr('src', base_url('ttd/sudah_ttd/Dokumen_Contoh_signed.pdf') + '#view=FitH');
          }
        }
      });
    });
  </script>
</body>
  
</html>

Tahap#7 - Eksekusi

Jika tahapan diatas telah dilakukan dengan benar makan akan terlihat hasilnya sebagai berikut :

Untuk melihat QRCodenya bisa teman-teman download dulu file pdf yang ditampilkan. Jika sudah tampil seperti gambar berikut ini :

Tahap#8 - Testing menggunakan VeryDS

Untuk menguji coba apakah file pdf ini benar-benar sudah di tanda tangani, teman-teman bisa mendownloadnya di play store dan Scan qrcodenya. Jika berhasil akan terlihat seperti gambar dibawah ini :

Demikianlah tutorial ini saya buat, mudah-mudahan bermanfaat bagi teman-teman. Jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini.

Let's Coding...