Tutorial 3: Autentikasi, Session, dan Cookie

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

---

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:

• Memahami cara kerja autentikasi
• Memahami kegunaan cookie dan session dalam konteks pengembangan web
• Memahami cara kerja cookie dan session pada web
• Menggunakan cookie dan session sesuai dengan fungsinya

---

Pengenalan HTTP

HTTP merupakan singkatan dari HyperText Transfer Protocol. HTTP adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless; artinya 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 adalah sebagai berikut.

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

2. Stateless: Setiap aktivitas (request/response) bersifat independen.

3. OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan tujuh 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: Situs web berjalan pada application layer. 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. 😉

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

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

7. 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 dan 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.

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 adalah sebagai berikut.

• Session & Cookies
• Cookies History
• Cookies vs. Local Storage vs. Session

---

Tutorial: Membuat Form Registrasi Akun

Catatan: Pada tutorial ini, kamu akan menggunakan proyek yang sudah kamu buat pada tutorial sebelumnya.

Kita akan membuat akses halaman money tracker yang sebelumnya telah dibuat menjadi restricted, dengan tujuan pengguna yang ingin mengakses halaman money tracker harus mempunyai akun dan melakukan login ke situs web agar mendapatkan akses.

1. Jalankan virtual environment terlebih dahulu.

2. Buka views.py yang ada pada folder money_tracker dan buatlah fungsi dengan nama register yang menerima parameter request.

3. 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
   

4. Tambahkan potongan kode di bawah ini ke dalam fungsi register yang sudah kamu buat sebelumnya. Potongan kode 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, 'Akun telah berhasil dibuat!')
               return redirect('money_tracker:login')
   
       context = {'form':form}
       return render(request, 'register.html', context)
   

5. Buatlah berkas HTML baru dengan nama register.html pada folder money_tracker/templates. Isi dari register.html dapat kamu isi dengan template berikut.

   {% extends 'base.html' %}
   
   {% block meta %}
   <title>Registrasi Akun</title>
   {% endblock meta %}
   
   {% block content %}  
   
   <div class = "login">
   
       <h1>Formulir Registrasi</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 %}
   

6. Buka urls.py yang ada pada folder money_tracker dan impor fungsi yang sudah kamu buat tadi.

   from money_tracker.views import register #sesuaikan dengan nama fungsi yang dibuat
   

7. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

   ...
   path('register/', register, name='register'), #sesuaikan dengan nama fungsi yang dibuat
   ...
   

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

---

Tutorial: Membuat Form Login

1. Buka views.py yang ada pada folder money_tracker dan buatlah fungsi dengan nama login_user yang menerima parameter request.

2. Tambahkan import authenticate dan login pada bagian paling atas.

   from django.contrib.auth import authenticate, login
   

3. Tambahkan potongan kode di bawah ini ke dalam fungsi login yang sudah kamu buat sebelumnya. Potongan kode 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('money_tracker:show_tracker')
           else:
               messages.info(request, 'Username atau Password salah!')
       context = {}
       return render(request, 'login.html', context)
   

4. Buatlah berkas HTML baru dengan nama login.html pada folder money_tracker/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 %}
   
       Belum mempunyai akun? <a href="{% url 'money_tracker:register' %}">Buat Akun</a>
   
   </div>
   
   {% endblock content %}
   

5. Buka urls.py yang ada pada folder money_tracker dan impor fungsi yang sudah kamu buat tadi.

   from money_tracker.views import login_user #sesuaikan dengan nama fungsi yang dibuat
   

6. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

   ...
   path('login/', login_user, name='login'), #sesuaikan dengan nama fungsi yang dibuat
   ...
   

7. Modifikasi variable name pada context dalam fungsi show_tracker yang berada pada money_tracker/views.py menjadi kode berikut agar dapat menampilkan nama sesuai pengguna yang logged in.

   ...
   'name': request.user.username,
   ...
   

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

---

Tutorial: Membuat Fungsi Logout

1. Buka views.py yang ada pada folder money_tracker dan buatlah fungsi dengan nama logout_user yang menerima parameter request.

2. Tambahkan import logout pada bagian paling atas.

   from django.contrib.auth import logout
   

3. Tambahkan potongan kode di bawah ini ke dalam fungsi logout yang sudah kamu buat sebelumnya. Potongan kode ini berfungsi untuk melakukan mekanisme logout.

   def logout_user(request):
       logout(request)
       return redirect('money_tracker:login')
   

4. Bukalah berkas tracker.html yang ada pada folder money_tracker/templates.

5. Tambahkan potongan kode di bawah ini setelah line break tag (<br>) pada berkas tracker.html. Potongan kode ini berfungsi untuk menambahkan tombol logout.

   ...
   <a href="{% url 'money_tracker:logout' %}">
       <button>
           Logout
       </button>
   </a>
   ...
   

6. Buka urls.py yang ada pada folder money_tracker dan impor fungsi yang sudah kamu buat tadi.

   from money_tracker.views import logout_user #sesuaikan dengan nama fungsi yang dibuat
   

7. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

   ...
   path('logout/', logout_user, name='logout'), #sesuaikan dengan nama fungsi yang dibuat
   ...
   

Kita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi pada proyek money_tracker. Selanjutnya, kita akan merestriksi akses halaman money tracker agar pengguna yang belum terautentikasi tidak dapat mengakses halaman money tracker.

---

Tutorial: Merestriksi Akses Halaman Money Tracker

1. Buka views.py yang ada pada folder money_tracker dan tambahkan import login_required pada bagian paling atas.

   from django.contrib.auth.decorators import login_required
   

2. Tambahkan kode @login_required(login_url='/tracker/login/') di atas fungsi show_tracker agar halaman money tracker hanya dapat diakses oleh pengguna yang sudah login (terautentikasi). Apabila pengguna belum terautentikasi, maka aplikasi akan menampilkan halaman login kepada pengguna.

   ...
   @login_required(login_url='/tracker/login/')
   def show_tracker(request):
   ...
   

Setelah merestriksi akses halaman money tracker, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/tracker di browser favoritmu untuk melihat hasilnya.

---

Tutorial: Menambahkan Cookies

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

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

2. Buka views.py yang ada pada folder money_tracker dan tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.

   import datetime
   from django.http import HttpResponseRedirect
   from django.urls import reverse
   

3. Pada fungsi login_user, kita akan menambahkan fungsi untuk 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) # melakukan login terlebih dahulu
       response = HttpResponseRedirect(reverse("money_tracker:show_tracker")) # membuat response
       response.set_cookie('last_login', str(datetime.datetime.now())) # membuat cookie last_login dan menambahkannya ke dalam response
       return response
   ...
   

4. Pada fungsi show_tracker, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.

   context = {
       'list_of_transactions': transaction_data,
       'name': 'Kak Athal',
       'last_login': request.COOKIES['last_login'],
   }
   

5. Ubah fungsi logout_user menjadi seperti potongan kode berikut. Potongan kode ini menambahkan mekanisme penghapusan cookie last_login saat pengguna melakukan logout.

   def logout_user(request):
       logout(request)
       response = HttpResponseRedirect(reverse('money_tracker:login'))
       response.delete_cookie('last_login')
       return response
   

6. Buka berkas tracker.html dan tambahkan potongan kode berikut di antara tabel dan line break tag untuk menampilkan data last login.

   ...
   <h5>Sesi terakhir login: {{ last_login }}</h5>
   ...
   

7. 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 money tracker.

8. 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.

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

---

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.

Seperti biasa, jangan lupa untuk melakukan add, commit, dan push perubahan yang sudah kamu lakukan untuk menyimpannya ke dalam repositori GitHub sebelum kamu menutup pekerjaan kamu. 😉

---

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. 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

---

Pembaruan terakhir: 11 April 2023 12:57:34
Dibuat: 1 Maret 2023 10:58:31