Difference between revisions of "Manajemen Autentikasi dan Otorisasi"

From OnnoWiki
Jump to navigation Jump to search
(Created page with "Berikut adalah struktur materi untuk kuliah "Pengenalan Deployment Aplikasi Web menggunakan Python" yang terdiri dari empat bagian utama, masing-masing dengan tiga modul: **1...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
Berikut adalah struktur materi untuk kuliah "Pengenalan Deployment Aplikasi Web menggunakan Python" yang terdiri dari empat bagian utama, masing-masing dengan tiga modul:
+
Dalam pengembangan aplikasi web, autentikasi dan otorisasi adalah dua komponen penting untuk memastikan bahwa hanya pengguna yang sah yang dapat mengakses sumber daya tertentu. Autentikasi memverifikasi identitas pengguna, sementara otorisasi menentukan hak akses pengguna tersebut terhadap sumber daya dalam aplikasi. Flask, sebagai salah satu framework web Python yang ringan, menyediakan ekstensi seperti Flask-Login untuk mempermudah implementasi sistem login dan kontrol akses pengguna. Modul ini akan membahas cara mengimplementasikan sistem autentikasi dan otorisasi menggunakan Flask-Login, dengan contoh konkret dan langkah-langkah yang dapat diterapkan pada sistem operasi Ubuntu 24.04.
  
**1. Dasar-dasar Pengembangan Web Menggunakan Python**
+
==Instalasi Flask dan Flask-Login di Ubuntu 24.04==
  
  - **1.1. Pengenalan Flask: Membuat Aplikasi Web Sederhana**
+
Sebelum memulai, pastikan bahwa Python 3 dan pip telah terinstal di sistem Anda. Berikut adalah langkah-langkah untuk menginstal Flask dan Flask-Login:
    - Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana.
 
    - Contoh: Membuat halaman "Hello, World!" menggunakan Flask.
 
    - Referensi: [Tutorial Flask oleh Miguel Grinberg](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world)
 
  
  - **1.2. Struktur Proyek Flask dan Manajemen Template**
+
1. '''Perbarui daftar paket dan instal dependensi yang diperlukan:'''
    - Mempelajari struktur proyek yang baik dalam Flask dan penggunaan template untuk memisahkan logika dan tampilan.
+
 
    - Contoh: Menggunakan Jinja2 untuk membuat template dinamis.
+
sudo apt update
    - Referensi: [Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)
+
sudo apt install python3 python3-pip python3-venv -y
  
  - **1.3. Mengelola Basis Data dengan SQLAlchemy**
+
2. '''Buat direktori proyek dan navigasikan ke dalamnya:'''
    - Integrasi Flask dengan SQLAlchemy untuk operasi basis data.
+
 
    - Contoh: Membuat model data dan melakukan operasi CRUD.
+
mkdir flask_auth
    - Referensi: [Membangun Aplikasi Web dengan Flask](https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3)
+
cd flask_auth
  
**2. Dasar-dasar Komunikasi Backend pada Web Python**
+
3. '''Buat dan aktifkan virtual environment:'''
 +
 
 +
python3 -m venv venv
 +
source venv/bin/activate
 +
 
  
  - **2.1. Routing dan Metode HTTP dalam Flask**
+
4. '''Instal Flask dan Flask-Login:'''
    - Memahami cara kerja routing dan berbagai metode HTTP (GET, POST, PUT, DELETE).
+
 
    - Contoh: Membuat endpoint dengan berbagai metode HTTP.
+
pip install Flask Flask-Login Flask-SQLAlchemy
    - Referensi: [Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)
 
  
  - **2.2. Mengelola Formulir dan Validasi Input**
+
==Konfigurasi Aplikasi Flask==
    - Menggunakan Flask-WTF untuk mengelola formulir dan validasi input pengguna.
 
    - Contoh: Membuat formulir login dengan validasi.
 
    - Referensi: [Membangun Aplikasi Web dengan Flask](https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3)
 
  
  - **2.3. Komunikasi Asinkron dengan JavaScript dan Flask**
+
Setelah instalasi, kita akan mengkonfigurasi aplikasi Flask dan mengintegrasikan Flask-Login untuk manajemen sesi pengguna.
    - Mengintegrasikan Flask dengan JavaScript untuk komunikasi asinkron menggunakan AJAX.
 
    - Contoh: Memuat data secara dinamis tanpa me-refresh halaman.
 
    - Referensi: [Komunikasi Frontend dan Backend](https://www.reddit.com/r/learnprogramming/comments/8xdh5s/how_do_you_connect_the_frontend_and_backend/)
 
  
**3. Keamanan Aplikasi Web Python**
+
1. '''Buat file `app.py` dan tambahkan kode berikut:'''
 +
 
 +
from flask import Flask, render_template, redirect, url_for, request, flash
 +
from flask_sqlalchemy import SQLAlchemy
 +
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
 +
from werkzeug.security import generate_password_hash, check_password_hash
 +
 +
app = Flask(__name__)
 +
app.config['SECRET_KEY'] = 'kunci_rahasia_anda'
 +
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
 +
db = SQLAlchemy(app)
 +
login_manager = LoginManager()
 +
login_manager.init_app(app)
 +
login_manager.login_view = 'login'
 +
 
 +
Kode di atas mengatur aplikasi Flask dengan kunci rahasia untuk sesi, mengkonfigurasi SQLAlchemy untuk menggunakan basis data SQLite, dan menginisialisasi Flask-Login dengan menentukan tampilan login default.
  
   - **3.1. Manajemen Autentikasi dan Otorisasi**
+
2. '''Definisikan model pengguna:'''
     - Implementasi sistem login dan kontrol akses pengguna.
+
    
     - Contoh: Menggunakan Flask-Login untuk manajemen sesi pengguna.
+
class User(UserMixin, db.Model):
     - Referensi: [Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)
+
     id = db.Column(db.Integer, primary_key=True)
 +
     username = db.Column(db.String(150), unique=True, nullable=False)
 +
     password = db.Column(db.String(150), nullable=False)
 +
 +
Model `User` di atas memiliki kolom `id`, `username`, dan `password`. `UserMixin` menyediakan implementasi default untuk metode yang diperlukan oleh Flask-Login.
  
  - **3.2. Mencegah Serangan Umum pada Aplikasi Web**
+
3. '''Buat tabel basis data:'''
    - Memahami dan mencegah serangan seperti SQL Injection dan Cross-Site Scripting (XSS).
 
    - Contoh: Menggunakan parameterized queries dan escaping output.
 
    - Referensi: [Analisis Keamanan Aplikasi Web dengan Python](https://bytescout.com/blog/python-tutorial-web-app-security.html)
 
  
  - **3.3. Mengamankan API dengan Tokenisasi**
+
Sebelum membuat tabel, pastikan Anda berada dalam konteks aplikasi:
    - Menggunakan token untuk mengamankan komunikasi antara klien dan server.
+
    - Contoh: Implementasi JSON Web Tokens (JWT) dalam Flask.
+
with app.app_context():
     - Referensi: [Membuat REST API dengan Flask](https://www.digitalocean.com/community/tutorials/create-a-rest-api-using-flask-on-ubuntu)
+
     db.create_all()
 +
 
  
**4. Membangun RESTful API Menggunakan Python**
+
Kode ini akan membuat tabel `User` dalam basis data sesuai dengan model yang telah didefinisikan.
  
  - **4.1. Konsep Dasar RESTful API dan Implementasi dengan Flask**
+
==Implementasi Sistem Login==
    - Memahami prinsip REST dan cara mengimplementasikannya menggunakan Flask.
 
    - Contoh: Membuat endpoint RESTful untuk operasi CRUD.
 
    - Referensi: [Membuat REST API dengan Flask](https://www.digitalocean.com/community/tutorials/create-a-rest-api-using-flask-on-ubuntu)
 
  
  - **4.2. Dokumentasi API dengan Swagger**
+
Selanjutnya, kita akan mengimplementasikan sistem login dengan Flask-Login.
    - Menggunakan Flask-Swagger untuk mendokumentasikan API yang dibuat.
 
    - Contoh: Menambahkan dokumentasi interaktif untuk endpoint yang tersedia.
 
    - Referensi: [Tutorial Flask-Swagger](https://github.com/flasgger/flasgger)
 
  
  - **4.3. Deployment Aplikasi Flask di Ubuntu 24.04**
+
1. '''Fungsi pemuat pengguna:'''
    - Langkah-langkah untuk mendeploy aplikasi Flask pada server Ubuntu 24.04 tanpa menggunakan alat dari Microsoft.
 
    - Contoh: Menggunakan Gunicorn dan Nginx untuk menjalankan aplikasi di lingkungan produksi.
 
    - Referensi: [Instalasi Flask di Ubuntu 24.04](https://support.hostinger.com/en/articles/10725412-how-to-install-flask-on-ubuntu-24-04)
 
  
Struktur ini dirancang untuk memberikan pemahaman komprehensif tentang pengembangan dan deployment aplikasi web menggunakan Python, dengan fokus pada praktik terbaik dan contoh nyata yang dapat diterapkan langsung.
+
Flask-Login memerlukan fungsi untuk memuat pengguna berdasarkan ID. Tambahkan kode berikut:
 +
 
 +
@login_manager.user_loader
 +
def load_user(user_id):
 +
    return User.query.get(int(user_id))
 +
 
 +
2. '''Route untuk registrasi pengguna:'''
 +
 
 +
Tambahkan route untuk registrasi pengguna baru:
 +
 
 +
@app.route('/register', methods=['GET', 'POST'])
 +
def register():
 +
    if request.method == 'POST':
 +
        username = request.form.get('username')
 +
        password = request.form.get('password')
 +
        hashed_password = generate_password_hash(password, method='sha256')
 +
        new_user = User(username=username, password=hashed_password)
 +
        db.session.add(new_user)
 +
        db.session.commit()
 +
        flash('Akun berhasil dibuat!', 'success')
 +
        return redirect(url_for('login'))
 +
    return render_template('register.html')
 +
 
 +
Dalam route ini, jika metode permintaan adalah POST, aplikasi akan mengambil `username` dan `password` dari formulir, mengenkripsi password, dan menyimpan pengguna baru ke dalam basis data.
 +
 
 +
3. '''Route untuk login pengguna:'''
 +
 
 +
Tambahkan route untuk login:
 +
 
 +
@app.route('/login', methods=['GET', 'POST'])
 +
def login():
 +
    if request.method == 'POST':
 +
        username = request.form.get('username')
 +
        password = request.form.get('password')
 +
        user = User.query.filter_by(username=username).first()
 +
        if user and check_password_hash(user.password, password):
 +
            login_user(user)
 +
            flash('Login berhasil!', 'success')
 +
            return redirect(url_for('dashboard'))
 +
        else:
 +
            flash('Login gagal. Periksa kembali username dan password Anda.', 'danger')
 +
    return render_template('login.html')
 +
 
 +
Route ini memverifikasi kredensial pengguna dan, jika valid, memulai sesi pengguna.
 +
 
 +
4. '''Route untuk dashboard yang dilindungi:'''
 +
 
 +
Tambahkan route untuk dashboard yang hanya dapat diakses oleh pengguna yang telah login:
 +
 +
@app.route('/dashboard')
 +
@login_required
 +
def dashboard():
 +
    return f'Halo, {current_user.username}! Selamat datang di dashboard.'
 +
 
 +
Dekorator `@login_required` memastikan bahwa hanya pengguna yang telah login yang dapat mengakses route ini.
 +
 
 +
5. '''Route untuk logout pengguna:'''
 +
 
 +
Tambahkan route untuk logout:
 +
 
 +
@app.route('/logout')
 +
@login_required
 +
def logout():
 +
    logout_user()
 +
    flash('Anda telah logout.', 'info')
 +
    return redirect(url_for('login'))
 +
 
 +
Route ini mengakhiri sesi pengguna dan mengarahkan kembali ke halaman login.
 +
 
 +
Melanjutkan pembahasan sebelumnya mengenai implementasi sistem autentikasi dan otorisasi dalam aplikasi Flask menggunakan Flask-Login, berikut adalah langkah-langkah untuk membuat template HTML yang mendukung fitur registrasi dan login pengguna.
 +
 
 +
==1. Struktur Direktori Proyek==
 +
 
 +
Pastikan struktur direktori proyek Anda seperti berikut:
 +
 
 +
Flask_auth/
 +
├── app.py
 +
├── templates/
 +
│  ├── base.html
 +
│  ├── register.html
 +
│  └── login.html
 +
└── venv/
 +
 
 +
==2. Template Dasar (`base.html`)==
 +
 
 +
Buat file `base.html` di dalam folder `templates` yang akan menjadi template dasar untuk halaman lainnya:
 +
 
 +
<pre>
 +
<!DOCTYPE html>
 +
<html lang="id">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>{% block title %}{% endblock %} - Aplikasi Flask</title>
 +
    <style>
 +
        body {
 +
            font-family: Arial, sans-serif;
 +
        }
 +
        .container {
 +
            width: 50%;
 +
            margin: auto;
 +
        }
 +
        .flash {
 +
            color: red;
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
    <div class="container">
 +
        {% with messages = get_flashed_messages(with_categories=true) %}
 +
            {% if messages %}
 +
                {% for category, message in messages %}
 +
                    <div class="flash">{{ message }}</div>
 +
                {% endfor %}
 +
            {% endif %}
 +
        {% endwith %}
 +
        {% block content %}{% endblock %}
 +
    </div>
 +
</body>
 +
</html>
 +
</pre>
 +
 
 +
 
 +
Template ini menyediakan struktur dasar dengan area untuk menampilkan pesan flash dan konten spesifik halaman.
 +
 
 +
==3. Template Registrasi (`register.html`)==
 +
 
 +
Buat file `register.html` di dalam folder `templates` dengan konten berikut:
 +
 
 +
<pre>
 +
{% extends "base.html" %}
 +
 +
{% block title %}Registrasi{% endblock %}
 +
 +
{% block content %}
 +
<h2>Registrasi Pengguna Baru</h2>
 +
<form method="POST">
 +
    <label for="username">Nama Pengguna:</label><br>
 +
    <input type="text" id="username" name="username" required><br><br>
 +
    <label for="password">Kata Sandi:</label><br>
 +
    <input type="password" id="password" name="password" required><br><br>
 +
    <button type="submit">Daftar</button>
 +
</form>
 +
<p>Sudah memiliki akun? <a href="{{ url_for('login') }}">Masuk di sini</a>.</p>
 +
{% endblock %}
 +
</pre>
 +
 
 +
Template ini menyediakan formulir untuk registrasi pengguna baru dengan field `username` dan `password`.
 +
 
 +
==4. Template Login (`login.html`)==
 +
 
 +
Buat file `login.html` di dalam folder `templates` dengan konten berikut:
 +
 
 +
<pre>
 +
{% extends "base.html" %}
 +
 +
{% block title %}Masuk{% endblock %}
 +
 +
{% block content %}
 +
<h2>Masuk</h2>
 +
<form method="POST">
 +
    <label for="username">Nama Pengguna:</label><br>
 +
    <input type="text" id="username" name="username" required><br><br>
 +
    <label for="password">Kata Sandi:</label><br>
 +
    <input type="password" id="password" name="password" required><br><br>
 +
    <button type="submit">Masuk</button>
 +
</form>
 +
<p>Belum memiliki akun? <a href="{{ url_for('register') }}">Daftar di sini</a>.</p>
 +
{% endblock %}
 +
</pre>
 +
 
 +
Template ini menyediakan formulir untuk login pengguna dengan field `username` dan `password`.
 +
 
 +
==5. Menjalankan Aplikasi==
 +
 
 +
Setelah semua file dan kode di atas disiapkan, Anda dapat menjalankan aplikasi Flask dengan perintah berikut:
 +
 
 +
python app.py
 +
 
 +
Akses aplikasi melalui browser di `http://127.0.0.1:5000/`. Anda dapat mendaftar pengguna baru melalui halaman registrasi dan kemudian masuk menggunakan kredensial yang telah didaftarkan.
 +
 
 +
==6. Catatan Keamanan==
 +
 
 +
* '''Penyimpanan Kata Sandi:''' Pastikan untuk selalu menyimpan kata sandi dalam bentuk yang telah di-hash menggunakan algoritma yang aman. Jangan pernah menyimpan kata sandi dalam bentuk teks biasa.
 +
* '''Validasi Input:''' Lakukan validasi input pada sisi server untuk mencegah serangan seperti SQL Injection atau Cross-Site Scripting (XSS).
 +
* '''Proteksi CSRF:''' Gunakan token CSRF untuk melindungi aplikasi dari serangan Cross-Site Request Forgery.
 +
 
 +
Dengan mengikuti langkah-langkah di atas, Anda telah mengimplementasikan sistem autentikasi dan otorisasi dasar dalam aplikasi Flask menggunakan Flask-Login. Untuk pengembangan lebih lanjut, pertimbangkan untuk menambahkan fitur seperti reset kata sandi, verifikasi email, dan otorisasi berbasis peran untuk meningkatkan keamanan dan fungsionalitas aplikasi Anda.
 +
 
 +
==Pranala Menarik==
 +
 
 +
* [[Web Programming]]

Latest revision as of 16:31, 7 April 2025

Dalam pengembangan aplikasi web, autentikasi dan otorisasi adalah dua komponen penting untuk memastikan bahwa hanya pengguna yang sah yang dapat mengakses sumber daya tertentu. Autentikasi memverifikasi identitas pengguna, sementara otorisasi menentukan hak akses pengguna tersebut terhadap sumber daya dalam aplikasi. Flask, sebagai salah satu framework web Python yang ringan, menyediakan ekstensi seperti Flask-Login untuk mempermudah implementasi sistem login dan kontrol akses pengguna. Modul ini akan membahas cara mengimplementasikan sistem autentikasi dan otorisasi menggunakan Flask-Login, dengan contoh konkret dan langkah-langkah yang dapat diterapkan pada sistem operasi Ubuntu 24.04.

Instalasi Flask dan Flask-Login di Ubuntu 24.04

Sebelum memulai, pastikan bahwa Python 3 dan pip telah terinstal di sistem Anda. Berikut adalah langkah-langkah untuk menginstal Flask dan Flask-Login:

1. Perbarui daftar paket dan instal dependensi yang diperlukan:

sudo apt update
sudo apt install python3 python3-pip python3-venv -y

2. Buat direktori proyek dan navigasikan ke dalamnya:

mkdir flask_auth
cd flask_auth

3. Buat dan aktifkan virtual environment:

python3 -m venv venv
source venv/bin/activate
  

4. Instal Flask dan Flask-Login:

pip install Flask Flask-Login Flask-SQLAlchemy

Konfigurasi Aplikasi Flask

Setelah instalasi, kita akan mengkonfigurasi aplikasi Flask dan mengintegrasikan Flask-Login untuk manajemen sesi pengguna.

1. Buat file `app.py` dan tambahkan kode berikut:

from flask import Flask, render_template, redirect, url_for, request, flash
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
from werkzeug.security import generate_password_hash, check_password_hash

app = Flask(__name__)
app.config['SECRET_KEY'] = 'kunci_rahasia_anda'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'
  

Kode di atas mengatur aplikasi Flask dengan kunci rahasia untuk sesi, mengkonfigurasi SQLAlchemy untuk menggunakan basis data SQLite, dan menginisialisasi Flask-Login dengan menentukan tampilan login default.

2. Definisikan model pengguna:

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    password = db.Column(db.String(150), nullable=False)

Model `User` di atas memiliki kolom `id`, `username`, dan `password`. `UserMixin` menyediakan implementasi default untuk metode yang diperlukan oleh Flask-Login.

3. Buat tabel basis data:

Sebelum membuat tabel, pastikan Anda berada dalam konteks aplikasi:

with app.app_context():
    db.create_all()
  

Kode ini akan membuat tabel `User` dalam basis data sesuai dengan model yang telah didefinisikan.

Implementasi Sistem Login

Selanjutnya, kita akan mengimplementasikan sistem login dengan Flask-Login.

1. Fungsi pemuat pengguna:

Flask-Login memerlukan fungsi untuk memuat pengguna berdasarkan ID. Tambahkan kode berikut:

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))
 

2. Route untuk registrasi pengguna:

Tambahkan route untuk registrasi pengguna baru:

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        hashed_password = generate_password_hash(password, method='sha256')
        new_user = User(username=username, password=hashed_password)
        db.session.add(new_user)
        db.session.commit()
        flash('Akun berhasil dibuat!', 'success')
        return redirect(url_for('login'))
    return render_template('register.html')
 

Dalam route ini, jika metode permintaan adalah POST, aplikasi akan mengambil `username` dan `password` dari formulir, mengenkripsi password, dan menyimpan pengguna baru ke dalam basis data.

3. Route untuk login pengguna:

Tambahkan route untuk login:

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        user = User.query.filter_by(username=username).first()
        if user and check_password_hash(user.password, password):
            login_user(user)
            flash('Login berhasil!', 'success')
            return redirect(url_for('dashboard'))
        else:
            flash('Login gagal. Periksa kembali username dan password Anda.', 'danger')
    return render_template('login.html')
  

Route ini memverifikasi kredensial pengguna dan, jika valid, memulai sesi pengguna.

4. Route untuk dashboard yang dilindungi:

Tambahkan route untuk dashboard yang hanya dapat diakses oleh pengguna yang telah login:

@app.route('/dashboard')
@login_required
def dashboard():
    return f'Halo, {current_user.username}! Selamat datang di dashboard.'
 

Dekorator `@login_required` memastikan bahwa hanya pengguna yang telah login yang dapat mengakses route ini.

5. Route untuk logout pengguna:

Tambahkan route untuk logout:

@app.route('/logout')
@login_required
def logout():
    logout_user()
    flash('Anda telah logout.', 'info')
    return redirect(url_for('login'))
  

Route ini mengakhiri sesi pengguna dan mengarahkan kembali ke halaman login.

Melanjutkan pembahasan sebelumnya mengenai implementasi sistem autentikasi dan otorisasi dalam aplikasi Flask menggunakan Flask-Login, berikut adalah langkah-langkah untuk membuat template HTML yang mendukung fitur registrasi dan login pengguna.

1. Struktur Direktori Proyek

Pastikan struktur direktori proyek Anda seperti berikut:

Flask_auth/
├── app.py
├── templates/
│   ├── base.html
│   ├── register.html
│   └── login.html
└── venv/

2. Template Dasar (`base.html`)

Buat file `base.html` di dalam folder `templates` yang akan menjadi template dasar untuk halaman lainnya:

 <!DOCTYPE html>
 <html lang="id">
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}{% endblock %} - Aplikasi Flask</title>
     <style>
         body {
             font-family: Arial, sans-serif;
         }
         .container {
             width: 50%;
             margin: auto;
         }
         .flash {
             color: red;
         }
     </style>
 </head>
 <body>
     <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
                     <div class="flash">{{ message }}</div>
                 {% endfor %}
             {% endif %}
         {% endwith %}
         {% block content %}{% endblock %}
     </div>
 </body>
 </html>


Template ini menyediakan struktur dasar dengan area untuk menampilkan pesan flash dan konten spesifik halaman.

3. Template Registrasi (`register.html`)

Buat file `register.html` di dalam folder `templates` dengan konten berikut:

 {% extends "base.html" %}
 
 {% block title %}Registrasi{% endblock %}
 
 {% block content %}
 <h2>Registrasi Pengguna Baru</h2>
 <form method="POST">
     <label for="username">Nama Pengguna:</label><br>
     <input type="text" id="username" name="username" required><br><br>
     <label for="password">Kata Sandi:</label><br>
     <input type="password" id="password" name="password" required><br><br>
     <button type="submit">Daftar</button>
 </form>
 <p>Sudah memiliki akun? <a href="{{ url_for('login') }}">Masuk di sini</a>.</p>
 {% endblock %} 

Template ini menyediakan formulir untuk registrasi pengguna baru dengan field `username` dan `password`.

4. Template Login (`login.html`)

Buat file `login.html` di dalam folder `templates` dengan konten berikut:

 {% extends "base.html" %}
 
 {% block title %}Masuk{% endblock %}
 
 {% block content %}
 <h2>Masuk</h2>
 <form method="POST">
     <label for="username">Nama Pengguna:</label><br>
     <input type="text" id="username" name="username" required><br><br>
     <label for="password">Kata Sandi:</label><br>
     <input type="password" id="password" name="password" required><br><br>
     <button type="submit">Masuk</button>
 </form>
 <p>Belum memiliki akun? <a href="{{ url_for('register') }}">Daftar di sini</a>.</p>
 {% endblock %} 

Template ini menyediakan formulir untuk login pengguna dengan field `username` dan `password`.

5. Menjalankan Aplikasi

Setelah semua file dan kode di atas disiapkan, Anda dapat menjalankan aplikasi Flask dengan perintah berikut:

python app.py

Akses aplikasi melalui browser di `http://127.0.0.1:5000/`. Anda dapat mendaftar pengguna baru melalui halaman registrasi dan kemudian masuk menggunakan kredensial yang telah didaftarkan.

6. Catatan Keamanan

  • Penyimpanan Kata Sandi: Pastikan untuk selalu menyimpan kata sandi dalam bentuk yang telah di-hash menggunakan algoritma yang aman. Jangan pernah menyimpan kata sandi dalam bentuk teks biasa.
  • Validasi Input: Lakukan validasi input pada sisi server untuk mencegah serangan seperti SQL Injection atau Cross-Site Scripting (XSS).
  • Proteksi CSRF: Gunakan token CSRF untuk melindungi aplikasi dari serangan Cross-Site Request Forgery.

Dengan mengikuti langkah-langkah di atas, Anda telah mengimplementasikan sistem autentikasi dan otorisasi dasar dalam aplikasi Flask menggunakan Flask-Login. Untuk pengembangan lebih lanjut, pertimbangkan untuk menambahkan fitur seperti reset kata sandi, verifikasi email, dan otorisasi berbasis peran untuk meningkatkan keamanan dan fungsionalitas aplikasi Anda.

Pranala Menarik