Tutorial: Mengautentikasi pengguna dengan Django di Visual Studio

2025-06-12

Artikel ini menyajikan Langkah 5 dalam seri tutorial Bekerja dengan kerangka kerja web Django di Visual Studio.

Autentikasi adalah persyaratan umum untuk aplikasi web. Templat Django Web Project di Visual Studio menyediakan semua modul yang diperlukan untuk autentikasi dalam file settings.py proyek Django. Langkah 4 dalam seri tutorial ini membuat aplikasi web Django dengan menggunakan templat ini. Di Langkah 5, Anda menjelajahi kemampuan autentikasi templat dan bekerja dengan fitur di aplikasi yang sedang berjalan.

Di Langkah 5 tutorial, Anda mempelajari cara:

Jelajahi alur autentikasi di templat Django Web Project di Visual Studio
Memeriksa kode yang mendukung proses autentikasi
Mengubah kode untuk mengaktifkan akses ke antarmuka administrator Django
Jalankan aplikasi web Django dan gunakan fitur autentikasi

Prasyarat

Solusi Visual Studio dan aplikasi web Django berdasarkan templat Django Web Project (DjangoWeb). Langkah 4: Gunakan templat Django Web Project lengkap menjelaskan cara membuat aplikasi ini.
Aplikasi web Django harus memiliki akun pengguna super (administrator). Langkah 4 (Buat pengguna super Django) menjelaskan cara membuat info masuk pengguna super.
Tinjau bagian Prasyarat di Langkah 1 dari seri tutorial ini untuk detail tentang versi templat Django, proyek Visual Studio versus proyek Django, dan pengembangan Python di Mac.

Menjelajahi alur autentikasi

Bagian ini menjelaskan alur autentikasi default yang disediakan oleh templat Django Web Project untuk aplikasi web Django.

Di Visual Studio, pilih Debug>Mulai Debugging (F5) untuk memulai aplikasi web Django (DjangoWeb).
Saat aplikasi terbuka di browser, perhatikan opsi Masuk di sebelah kanan di bilah navigasi:

Aplikasi Django yang sedang berjalan memiliki bilah navigasi dengan tiga opsi halaman, Beranda, Tentang, dan Kontak, dan opsi Masuk. Konfigurasi autentikasi memungkinkan setiap pengguna untuk melihat konten di halaman "Beranda," "Tentang," dan "Kontak".
Untuk akses terautentikasi ke aplikasi web Django, pengguna super yang ditunjuk dapat menggunakan opsi Masuk, yang membuka halaman "Masuk":
Setelah pengguna super masuk, mereka dapat mengakses tampilan halaman terbatas untuk situs dan menyelesaikan tugas administrasi:
Pengguna super dapat menggunakan opsi Log off untuk keluar dari aplikasi web Django dan kembali ke halaman "Beranda" aplikasi web Django sebagai pengguna yang tidak diautentikasi.

Di bagian berikut, Anda memodifikasi konfigurasi autentikasi untuk mendukung akses situs administratif Django untuk pengguna super.

Memeriksa kode autentikasi

Sekarang setelah Anda memahami fitur autentikasi umum aplikasi web Django, Anda siap untuk memeriksa kode dasar yang disediakan oleh templat Django Web Project:

Di Solution Explorer, perluas folder proyek aplikasi/templat/aplikasi. Langkah-langkah berikut meninjau beberapa file dalam folder ini.
Buka file templat dasar, layout.html. Gulir ke elemen <div class="navbar ...> dan temukan tag {% include app/loginpartial.html %}.

Tag {% include %} menginstruksikan sistem templat Django untuk menarik konten file yang disertakan pada titik ini dalam templat yang berisi.

Buka file loginpartial.html. Amati bagaimana templat ini menggunakan tag kondisional {% if user.is_authenticated %} bersama dengan tag {% else %} untuk merender elemen UI yang berbeda tergantung pada apakah pengguna diautentikasi:

{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
    {% csrf_token %}
    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
    <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

Saat Anda memulai aplikasi, tidak ada pengguna super yang diautentikasi dan kode templat hanya merender tautan Masuk. Tautan menargetkan jalur "login" relatif situs yang ditentukan dalam file URL proyek Django (DjangoWeb/DjangoWeb/urls.py), seperti yang dijelaskan dalam Langkah 4 (Periksa pola rute URL). Rute "masuk" dipetakan ke tampilan django.contrib.auth.views.login dan tampilan menerima data berikut:
```
{
    'template_name': 'app/login.html',
    'authentication_form': app.forms.BootstrapAuthenticationForm,
    'extra_context':
    {
        'title': 'Log in',
        'year': datetime.now().year,
    }
}
```
Kode ini mendefinisikan tiga properti:
- template_name mengidentifikasi templat untuk halaman "Masuk" yang ditentukan dalam aplikasi /login.html file. Ingat, tautan ini relatif terhadap situs. Jalur folder lengkap adalah app/templat/app/login.html.
- extra_context menambahkan informasi ke data konteks default yang diberikan ke templat. Dalam hal ini, informasi tersebut mencakup judul "Log in", bersama dengan tanggal, waktu, dan tahun.
- authentication_form menentukan kelas formulir yang akan digunakan dengan prosedur masuk. Dalam templat, nilai properti ini muncul sebagai objek form. Nilai default adalah AuthenticationForm (dari django.contrib.auth.views), tetapi templat proyek Visual Studio menggunakan formulir yang ditentukan dalam file proyek aplikasi/forms.py:
```
from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.utils.translation import ugettext_lazy as _

class BootstrapAuthenticationForm(AuthenticationForm):
    """Authentication form which uses bootstrap CSS."""
    username = forms.CharField(max_length=254,
                            widget=forms.TextInput({
                                'class': 'form-control',
                                'placeholder': 'User name'}))
    password = forms.CharField(label=_("Password"),
                            widget=forms.PasswordInput({
                                'class': 'form-control',
                                'placeholder':'Password'}))
```
  Kelas formulir berasal dari AuthenticationForm dan secara khusus menggantikan bidang nama pengguna dan kata sandi untuk menambahkan placeholder. Templat Visual Studio menyertakan kode eksplisit ini pada asumsi bahwa Anda mungkin ingin menyesuaikan formulir, seperti menambahkan validasi kekuatan kata sandi.

Saat interaksi pengguna dengan aplikasi membuka halaman "Masuk", aplikasi merender templat login.html. Variabel {{ form.username }} dan {{ form.password }} merender formulir CharField dari kelas BootstrapAuthenticationForm. Ada juga bagian bawaan untuk menampilkan kesalahan validasi, dan elemen siap pakai untuk login sosial jika Anda memilih untuk menambahkan layanan tersebut:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}</h2>
<div class="row">
    <div class="col-md-8">
        <section id="loginForm">
            <form action="." method="post" class="form-horizontal">
                {% csrf_token %}
                <h4>Use a local account to log in.</h4>
                <hr />
                <div class="form-group">
                    <label for="id_username" class="col-md-2 control-label">User name</label>
                    <div class="col-md-10">
                        {{ form.username }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_password" class="col-md-2 control-label">Password</label>
                    <div class="col-md-10">
                        {{ form.password }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="hidden" name="next" value="/" />
                        <input type="submit" value="Log in" class="btn btn-default" />
                    </div>
                </div>
                {% if form.errors %}
                <p class="validation-summary-errors">Please enter a correct user name and password.</p>
                {% endif %}
            </form>
        </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm"></section>
    </div>
</div>

{% endblock %}

Saat pengguna memilih Masuk pada formulir halaman, Django mencoba mengautentikasi kredensial, seperti kredensial pengguna super:
- Jika autentikasi gagal, pengguna tetap berada di halaman "Masuk" dan tag form.errors diatur ke true:
- Jika autentikasi berhasil, Django membuka URL relatif di bidang next, <input type="hidden" name="next" value="/" />, yang dalam hal ini adalah halaman "Beranda" (/).
Saat aplikasi merender halaman "Beranda" setelah pengguna diautentikasi, properti user.is_authenticated benar saat templat loginpartial.html dirender. Dalam hal ini, bilah navigasi memperlihatkan pesan Hello (nama pengguna) dan opsi Log off menggantikan opsi Masuk:

Anda dapat menggunakan properti user.is_authenticated di bagian lain dari kode aplikasi untuk memeriksa autentikasi.

Mengakses antarmuka administrator Django

Untuk memeriksa apakah pengguna yang diautentikasi berwenang untuk mengakses sumber daya tertentu, Anda perlu mengambil izin khusus pengguna dari database Anda.

Pengguna super atau administrator, khususnya, berwenang untuk mengakses antarmuka administrator Django bawaan dengan menggunakan URL relatif situs /admin/ dan /admin/doc/. Untuk informasi selengkapnya, lihat Menggunakan sistem autentikasi Django (dokumen Django).

Untuk mengaktifkan akses ke antarmuka administrator Django, ikuti langkah-langkah berikut:

Instal paket Python docutils ke lingkungan Anda. Untuk petunjuknya, lihat Menginstal paket untuk lingkungan Python.
Di Solution Explorer, perluas folder proyek Django, DjangoWeb/DjangoWeb/. Langkah-langkah berikut memperbarui beberapa file dalam folder ini.
Buka file urls.py proyek Django dan ubah kontennya sebagai berikut:
1. Di bagian atas file, tambahkan impor paket berikut untuk URL ke akhir daftar saat ini:
```
from django.conf.urls import include
```
2. Setelah daftar impor, tambahkan pernyataan berikut:
```
admin.autodiscover()
```
3. Temukan definisi urlpatterns, dan tambahkan entri jalur berikut sebelum entri 'admin/':
```
path('admin/doc/', include('django.contrib.admindocs.urls')),
```
Buka file settings.py proyek Django dan temukan koleksi INSTALLED_APPS. Tambahkan entri berikut segera setelah entri app:
```
'django.contrib.admindocs',
```
Hentikan dan mulai ulang aplikasi web Django.
Di bidang alamat URL browser, ubah tampilan halaman aplikasi ke rute /admin/ atau /admin/doc/. Halaman-halaman ini memberi pengguna super akses ke tugas administratif Django seperti membuat akun pengguna atau grup, mengubah kata sandi, dan melihat dokumentasi Django:

Menjelajahi perilaku log keluar

Ada dua cara pengguna super dapat keluar dan mengakhiri sesi yang diautentikasi. Aplikasi web Django menyertakan opsi Log off pada bilah navigasi dan situs administratif Django menyediakan opsi Log Out.

Keluar dari situs administratif Django

Jika pengguna super melihat halaman di situs administratif Django, mereka dapat memilih Keluar pada bilah navigasi situs. Browser me-refresh untuk menampilkan halaman "Log off" untuk situs:

Di halaman ini, pengguna memiliki dua opsi, Home dan Masuk lagi. Kedua opsi mengembalikan pengguna ke halaman "Beranda" untuk situs administratif Django (/admin), di mana pengguna diminta untuk memasukkan kembali kredensial mereka.

Keluar dari aplikasi web Django

Jika pengguna super melihat halaman di aplikasi web Django, seperti "Tentang" atau "Kontak", mereka dapat memilih Log off di bilah navigasi aplikasi web Django. Tingkah laku log off minimal saja. Ini hanya mengakhiri sesi terautentikasi dan menelusuri pengguna kembali ke halaman "Beranda" aplikasi.

Anda dapat mengerjakan ulang perilaku log off sehingga lebih informatif bagi pengguna:

Di Solution Explorer, perluas folder aplikasi/templat/aplikasi proyek, dan buka file loginpartial.html.
Dalam file templat, perhatikan bahwa tautan Log off hanya melakukan operasi HTTP POST (action="/logout" method="post") ke jalur URL relatif situs "/login" (href="{% url 'login' %}").
```
{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
   {% csrf_token %}
   <ul class="nav navbar-nav navbar-right">
      <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
   <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}
```
Fungsi tampilan bawaan django.contrib.auth.views.logout menangani proses keluar ini.

Perilaku saat ini tidak menampilkan UI apa pun yang memungkinkan pengguna mengetahui bahwa mereka log keluar. Proses ini hanya menelusuri pengguna kembali ke halaman "Beranda" aplikasi web Django sesuai dengan pola jalur 'logout/' yang ditentukan dalam file URL proyek Django (DjangoWeb/DjangoWeb/urls.py):
```
 path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
```
Untuk menampilkan konfirmasi log off yang lebih informatif, Anda dapat membuat halaman "Log off" untuk aplikasi.
Di folder aplikasi/templat/aplikasi, buat file templat HTML baru bernama loggedoff.html.

Tambahkan konten berikut ke file templat baru:

{% extends "app/layout.html" %}
{% block content %}
<h3>You have been logged off</h3>
{% endblock %}

Dalam file URL proyek Django, DjangoWeb/DjangoWeb/urls.py, ubah pola URL untuk jalur 'logout/' sebagai berikut:
```
path('logout/', LogoutView.as_view(template_name='app/loggedoff.html'), name='logout'),
```
Kode yang diperbarui menambahkan properti template_name untuk bekerja dengan templat HTML baru untuk halaman "Log off".
Hentikan dan mulai ulang aplikasi web Django. Masuk lagi, lalu pilih Keluar. Kali ini, aplikasi menunjukkan pesan yang lebih informatif kepada pengguna untuk mengonfirmasi bahwa mereka keluar:
Hentikan server dan tutup jendela browser aplikasi.

Simpan proyek ke kontrol sumber

Jika Anda telah menerapkan solusi Visual Studio Anda untuk kontrol sumber sepanjang rangkaian tutorial ini, sekarang saat yang tepat untuk melakukan penerapan lain. Ikuti instruksi dalam Langkah 2 (terapkan perubahan pada kontrol sumber) dalam seri tutorial ini.

Solusi Anda harus cocok dengan kode sumber tutorial di GitHub: Microsoft/python-sample-vs-learning-django.

Gunakan tag {% csrf_token %} dalam elemen formulir

Tag {% csrf_token %} mencakup perlindungan pemalsuan permintaan lintas situs (csrf) bawaan Django (dokumen Django). Anda biasanya menambahkan tag ini ke elemen apa pun yang melibatkan metode permintaan POST, PUT, atau DELETE, seperti formulir. Fungsi penyajian templat (render) kemudian menyisipkan perlindungan yang diperlukan.

Ulasan tutorial

Selamat atas penyelesaian tutorial ini tentang Django di Visual Studio.

Dalam tutorial ini, Anda belajar cara:

Membangun berbagai jenis proyek Django dengan menggunakan berbagai templat di Visual Studio
Membuat aplikasi web Django dengan beberapa halaman
Menggunakan templat untuk membuat rute dan tampilan halaman yang berbeda
Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat
Menyediakan akses terautentikasi ke halaman dan fitur aplikasi terbatas serta antarmuka administratif Django

Autentikasi pengguna di Django (docs.djangoproject.com)
Kode sumber Tutorial di GitHub (Microsoft/python-sample-vs-learning-django)

Bagikan melalui