Press "Enter" to skip to content

Tutorial Implementasi JWT Dengan PHP dan Javascript

Pada tutorial kali ini saya membahas tentang bagaimana cara mengimplementasikan JWT dengan menggunakan PHP dan Javascript. Tutorial ini melanjutkan pembahasan sebelumnya dimana kita belajar membuat sebuah JWT dengan PHP. Sekarang kita akan membuat JWT sekaligus menyimpan token tersebut agar dapat diverifikasi apakah token sesuai atau tidak.

Untuk studi kasus kali ini kita akan menyimpan Token yang sudah kita generate lalu menyimpannya kedalam file JSON. Kemudian kita akan mengirimkan JWT yang sudah dibuat untuk dicocokkan apakah JWT tersebut sesuai atau tidak.

JWT Dengan PHP dan Javascript #Server Side

Pertama kita akan membuat sebuah class PHP dengan nama Jwt. buat file bernama jwt.class.php, ketikkan script seperti berikut :

class Jwt { 

}

Setelah itu, buat deklarasikan terlebih dahulu beberapa property didalam class Jwt seperti nama file dan juga secret key yang akan kita gunakan untuk melakukan generate JWT.

class Jwt {
  private $secretkey = 'testjwt'; // secretkey untuk generate signature
  private $file = './jwt.json'; // file json
}

Lalu kita masukkan 2 buah fungsi yaitu generate_jwt() dan juga check_jwt(). generate_jwt() digunakan untuk membuat JWT dengan menggunakan payload dari request yang berasal dari client lalu menyimpannya kedalam file JSON. Sedangkan check_jwt() digunakan untuk memeriksa apakah JWT yang dikirim dari request client sesuai dengan yang ada di dalam file JSON.

public function generate_jwt($payload) {
  try {
    // Buat Array untuk header lalu convert menjadi JSON
    $header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']);
    // Encode header menjadi Base64Url String
    $base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));

    // Buat Array payload lalu convert menjadi JSON
    $payload = json_encode(['username' => $payload]);
    // Encode Payload menjadi Base64Url String
    $base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));

    // Buat Signature dengan metode HMAC256
    $signature = hash_hmac('sha256', $base64UrlHeader.
      ".".$base64UrlPayload, $this - > secretkey, true);
    // Encode Signature menjadi Base64Url String
    $base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));

    // Gabungkan header, payload dan signature dengan tanda titik (.)
    $jwt = $base64UrlHeader.
    ".".$base64UrlPayload.
    ".".$base64UrlSignature;

    // baca data
    $content = json_decode(file_get_contents($this - > file), true);

    // isi file kosong
    if ($content == '') {
      $content = [];
      // push array
      array_push($content, $jwt);
      // tulis data ke file
      if (file_put_contents($this - > file, json_encode($content, JSON_PRETTY_PRINT))) {
        echo $jwt;
      } else {
        echo "gagal menyimpan data";
      }
    } else {
      // jika JWT sudah ada maka tampilkan gaga,jika tidak maka simpan jwt
      if (in_array($jwt, $content)) {
        echo "JWT sudah tersimpan sebelumnya.";
      } else {
        // push array
        array_push($content, $jwt);
        // tulis data ke file
        if (file_put_contents($this - > file, json_encode($content, JSON_PRETTY_PRINT))) {
          echo $jwt;
        } else {
          echo "gagal menyimpan data";
        }
      }
    }
  } catch (Exception $e) {
    echo 'Caught exception: ', $e - > getMessage(), "\n";
  }
}
public function check_jwt($jwt) {
   // Cek dahulu apakah JWT yang dikirim sama dengan yang disimpan dalam database
   $content = json_decode(file_get_contents($this->file), true);
   if (in_array($jwt, $content)) {
     echo $jwt;
     echo "";
     echo "JWT sesuai.";
   } else {
     echo $jwt.PHP_EOL;
     echo "";
     echo "JWT tidak sesuai.";
   }
 }

Setelah selesai membuat class JWT, sekarang kita membuat sebuah file PHP untuk menampung request dari client dan juga mengeksekusi fungsi yang ada di class tersebut.

server.php

require 'jwt.class.php';
if (isset($_GET['act'])) {
     $jwt = new Jwt;
     if ($_GET['act'] == 'generate') 
         $username = $_POST['username'];
         $jwt->generate_jwt($username);
     } else if ($_GET['act'] == 'check') {
         $payload = $_POST['payload'];
         $jwt->check_jwt($payload);
     } else {
         echo "404 Not Found";
     }
} else {
     echo "404 Not Found";
}

Jadi kita akan membuat 2 buah action yang terdiri yaitu generate dan juga check yang dibuat menjadi sebuah url yaitu :

  1. server.php?act=generate
  2. server.php?act=check

Jika server.php menerima request act yang berisi generate maka sistem akan mengeksekusi fungsi generate_jwt(), begitu juga untuk request check maka sistem akan mengeksekusi fungsi check_jwt().

Setelah kita selesai membuat script untuk bagian backend sekarang kita akan membuat script untuk sisi client yang mengirimkan request ke sisi backend.

client.html

<html>
  <head>
    <title>Demo JWT</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" i=""></script>
    <script src="jwt.js"></script>
    <style type="text/css">
      body {
        margin-top: 25px;
      }
      * {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
      }
    </style>
    </title>
  <body>
    <div class="container">
      <h3>DEMO IMPLEMENTASI JWT PHP & JAVASCRIPT</h3>
      <div class="row">
        <div class="col-6">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Generate JWT</h5>
              <form>
                <div class="form-group">
                  <label>Username</label>
                  <input type="text" class="form-control" id="username" placeholder="Masukkan Username">
                </div>
                <button type="button" id="generate" class="btn btn-primary">Generate JWT</button>
              </form>
              <div id="output_generate" class="alert alert-info"
                style="display: none; margin-top: 15px; font-family: monospace; font-weight: bold;"></div>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: 25px;"></div>

      <div class="row">
        <div class="col-6">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Cek JWT</h5>
              <form>
                <div class="form-group">
                  <label>Username</label>
                  <textarea class="form-control" id="jwt" rows="3" placeholder="Masukkan JWT"></textarea>
                </div>
                <button type="button" id="check" class="btn btn-primary">Cek JWT</button>
              </form>
              <div style="margin-top: 15px;"></div>
              <div id="output_check" class="alert alert-info"
                style="display: none; margin-top: 15px; font-family: monospace; font-weight: bold;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Pada script HTML diatas kita membuat 2 buah form yang terdiri dari form untuk mengirimkan request generate_jwt dan yang satunya lagi adalah form untuk mengirimkan request check_jwt(). Output yang diterima akan ditampilkan di form masing-masing.

Setelah membuat form HTML diatas, sekarang kita buat script JS untuk memproses form tersebut.

$(document).ready(function() {
  $("#generate").click(function(event) {
    event.preventDefault();
    username = $("#username").val();
    var generate = $.post('http://localhost/demo_jwt/server.php?act=generate', { username: username });
    generate.done(function(data) {
      $("#output_generate").html(data);
      $("#output_generate").show();
    });
  });

  $("#check").click(function(event) {
    event.preventDefault();
    jwt = $("#jwt").val();
    var generate = $.post('http://localhost/demo_jwt/server.php?act=check', { payload : jwt });
    generate.done(function(data) {
      $("#output_check").html(data);
      $("#output_check").show();
    });
  });
});

Sekarang kita jalankan script diatas.

implementasi-jwt-dengan-php-dan-javascript

Pada contoh gambar diatas, output yang dihasilkan pada form generate JWT adalah JWT yang dikirim dari server.php lalu diterima oleh client dengan mengirimkan request username. Sedangkan untuk Cek JWT, token yang sudah kita buat kita kirim ke sisi server untuk dicek apakah JWT yang dikirim oleh client sesuai dengan yang disimpan oleh server.

Kamu bisa mencoba kode dihalaman Github saya. Silahkan dicoba dan semoga bermanfaat.

Be First to Comment

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *