Lewati ke isi

Tutorial 3: Autentikasi, Session, dan Cookies

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024


Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:

  • Memahami konsep dasar autentikasi dalam pengembangan web.
  • Memahami peran dan fungsi cookie dan session dalam pengembangan web.
  • Memahami cara kerja cookie dan session dalam pengembangan web.
  • Mengimplementasikan cookie dan session dalam proyek web.

Pengenalan HTTP

HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.

Beberapa konsep dasar mengenai HTTP:

  1. Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.

  2. Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.

  3. OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.

  4. Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.

Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. 😉

  1. Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.

  2. Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.

  3. Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.

Pengenalan Cookies & Session

Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.

Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.

Apa yang dimaksud dengan holding state?

Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.

Proses memberitahu "siapa" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.

Cara melakukan holding state?

Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.

Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.

Selain itu, pendekatan ini lebih "tepat" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) "Oh, ini orang yang tepat!". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.

Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.

Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.

Cookies Local Storage Sessions
Kapasitas 4 KB 5 MB 5 MB
Teknologi Browser HTML4/HTML5 HTML5 HTML5
Aksesibilitas Semua window Semua window Tab yang sama
Kedaluwarsa Diatur manual Selamanya Saat tab ditutup

Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:

Pre-Tutorial Notes

Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:

  • Struktur direktori book-tracker secara lokal adalah sebagai berikut.

Struktur direktori lokal

  • Struktur repository book-tracker pada GitHub adalah sebagai berikut.

Struktur Repositori Github

Tutorial: Membuat Fungsi dan Form Registrasi

Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan suatu buku. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama (main) menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.

  1. Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)

  2. Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.

from django.shortcuts import redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib import messages

Penjelasan Kode:

UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.

  1. Tambahkan fungsi register di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.
def register(request):
    form = UserCreationForm()

    if request.method == "POST":
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            messages.success(request, 'Your account has been successfully created!')
            return redirect('main:login')
    context = {'form':form}
    return render(request, 'register.html', context)

Penjelasan Kode:

  • form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
  • form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
  • form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
  • messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.
  • return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.

  • Buatlah berkas HTML baru dengan nama register.html pada direktori main/templates. Isi dari register.html dapat kamu isi dengan template berikut.

{% extends 'base.html' %} 

{% block meta %}
<title>Register</title>
{% endblock meta %} 

{% block content %}

<div class="login">
  <h1>Register</h1>

  <form method="POST">
    {% csrf_token %}
    <table>
      {{ form.as_table }}
      <tr>
        <td></td>
        <td><input type="submit" name="submit" value="Daftar" /></td>
      </tr>
    </table>
  </form>

  {% if messages %}
  <ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

{% endblock content %}
  1. Buka urls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.
from main.views import register
  1. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
 urlpatterns = [
     ...
     path('register/', register, name='register'),
 ]

Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.

Tutorial: Membuat Fungsi Login

  1. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import authenticate dan login pada bagian paling atas.
from django.contrib.auth import authenticate, login

Penjelasan Kode:

Singkatnya, fungsi authenticate dan login yang diimport diatas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.

  1. Tambahkan fungsi login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.
def login_user(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('main:show_main')
        else:
            messages.info(request, 'Sorry, incorrect username or password. Please try again.')
    context = {}
    return render(request, 'login.html', context)

Penjelasan Kode:

authenticate(request, username=username, password=password) digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.

  1. Buatlah berkas HTML baru dengan nama login.html pada direktori main/templates. Isi dari login.html dapat kamu isi dengan template berikut.
{% extends 'base.html' %}

{% block meta %}
<title>Login</title>
{% endblock meta %} 

{% block content %}
<div class="login">
  <h1>Login</h1>

  <form method="POST" action="">
    {% csrf_token %}
    <table>
      <tr>
        <td>Username:</td>
        <td>
          <input
            type="text"
            name="username"
            placeholder="Username"
            class="form-control"
          />
        </td>
      </tr>

      <tr>
        <td>Password:</td>
        <td>
          <input
            type="password"
            name="password"
            placeholder="Password"
            class="form-control"
          />
        </td>
      </tr>

      <tr>
        <td></td>
        <td><input class="btn login_btn" type="submit" value="Login" /></td>
      </tr>
    </table>
  </form>

  {% if messages %}
  <ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
  </ul>
  {% endif %} Don't have an account yet?
  <a href="{% url 'main:register' %}">Register Now</a>
</div>

{% endblock content %}
  1. Buka urls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.
from main.views import login_user
  1. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
urlpatterns = [
   ...
   path('login/', login_user, name='login'),
]

Kita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.

Tutorial: Membuat Fungsi Logout

  1. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.
from django.contrib.auth import logout
  1. Tambahkan fungsi di bawah ini ke dalam fungsi views.py. Fungsi ini berfungsi untuk melakukan mekanisme logout.
def logout_user(request):
    logout(request)
    return redirect('main:login')

Penjelasan Kode:

  • logout(request) digunakan untuk menghapus sesi pengguna yang saat ini masuk.
  • return redirect('main:login') mengarahkan pengguna ke halaman login dalam aplikasi Django.

  • Bukalah berkas main.html yang ada pada direktori main/templates.

  • Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Book pada berkas main.html.

...
<a href="{% url 'main:logout' %}">
  <button>Logout</button>
</a>
...
  1. Buka urls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.
from main.views import logout_user
  1. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
urlpatterns = [
   ...
   path('logout/', logout_user, name='logout'),
]

Kita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi dalam proyek ini.

Tutorial: Merestriksi Akses Halaman Main

  1. Buka kembali views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.
from django.contrib.auth.decorators import login_required

Penjelasan Kode:
Kode from django.contrib.auth.decorators import login_required digunakan untuk mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.

  1. Tambahkan potongan kode @login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).
...
@login_required(login_url='/login')
def show_main(request):
...

Setelah melakukan restriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Seharusnya halaman yang muncul bukanlah daftar buku di halaman main, tetapi akan di-redirect ke halaman login.

Tutorial: Menggunakan Data Dari Cookies

Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.

  1. Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.

  2. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.

import datetime
from django.http import HttpResponseRedirect
from django.urls import reverse
  1. Pada fungsi login_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut.
...
if user is not None:
    login(request, user)
    response = HttpResponseRedirect(reverse("main:show_main"))
    response.set_cookie('last_login', str(datetime.datetime.now()))
    return response
...

Penjelasan Kode:

  • login(request, user) berfungsi untuk melakukan login terlebih dahulu
  • response = HttpResponseRedirect(reverse("main:show_main")) untuk membuat response
  • response.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response

Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.

  1. Pada fungsi show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.
context = {
    'name': 'Pak Bepe',
    'class': 'PBP A',
    'books': books,
    'last_login': request.COOKIES['last_login'],
}

Penjelasan Kode:

'last_login': request.COOKIES['last_login'] berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.

  1. Ubah fungsi logout_user menjadi seperti potongan kode berikut.
def logout_user(request):
    logout(request)
    response = HttpResponseRedirect(reverse('main:login'))
    response.delete_cookie('last_login')
    return response

Penjelasan Kode:

response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.

  1. Buka berkas main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.
...
<h5>Sesi terakhir login: {{ last_login }}</h5>
...
  1. Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.

  2. Jika kamu menggunakan browser Google Chrome, untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.

Gambar Halaman Main beserta Data Cookies

  1. Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.

Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.

Tutorial: Menghubungkan Model Book dengan User

Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.

Terakhir, kita akan menghubungkan setiap objek Book yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat buku-buku yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:

  1. Buka models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:
...
from django.contrib.auth.models import User
...
  1. Pada model Book yang sudah dibuat, tambahkan potongan kode berikut:
class Book(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    ...

Penjelasan Kode:

Potongan kode diatas berfungsi untuk menghubungkan satu buku dengan satu user melalui sebuah relationship, dimana sebuah buku pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.

  1. Buka kembali views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_book menjadi sebagai berikut:
def create_book(request):
 form = BookForm(request.POST or None)

 if form.is_valid() and request.method == "POST":
     book = form.save(commit=False)
     book.user = request.user
     book.save()
     return redirect('main:show_main')

 context = {'form': form}
 return render(request, "create_book.html", context)
 ...

Penjelasan Kode:

Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.

  1. Ubah fungsi show_main menjadi sebagai berikut.
def show_main(request):
    books = Book.objects.filter(user=request.user)

    context = {
         'name': request.user.username,
         ...
    }
...

Penjelasan Kode:

  • Potongan kode diatas berfungsi untuk menampilkan objek Book yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Book yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.
  • Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.

  • Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.

  • Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.

Migrations-1

  1. Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.

Migrations-2

  1. Lakukan python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.

Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, buku yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Book dengan User yang membuatnya.

Akhir Kata

Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. 😄

Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.

  1. Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.

Tampilan Halaman Web

  1. Pada akhir tutorial ini, struktur subdirektori main pada lokalmu terlihat seperti ini.

Struktur Direktori Lokal

  1. Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.

  2. Jalankan perintah berikut untuk melakukan add, commit dan push.

git add .
git commit -m "<pesan_commit>"
git push -u origin <branch_utama>
  • Ubah <pesan_commit> sesuai dengan keinginan. Contoh: git commit -m "tutorial 3 selesai".
  • Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.

Kontributor

  • Muhammad Nabil Mu'afa
  • Muhammad Iqbal Dwitama

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.