Difference between revisions of "Manajemen Autentikasi dan Otorisasi"

From OnnoWiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
# Modul 3.1: Manajemen Autentikasi dan Otorisasi
+
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.
  
## Pendahuluan
+
==Instalasi Flask dan Flask-Login di Ubuntu 24.04==
 
 
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:
 
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:**
+
1. '''Perbarui daftar paket dan instal dependensi yang diperlukan:'''
 +
 
 +
sudo apt update
 +
sudo apt install python3 python3-pip python3-venv -y
  
  ```bash
+
2. '''Buat direktori proyek dan navigasikan ke dalamnya:'''
   sudo apt update
+
    
  sudo apt install python3 python3-pip python3-venv -y
+
mkdir flask_auth
  ```
+
cd flask_auth
  
2. **Buat direktori proyek dan navigasikan ke dalamnya:**
+
3. '''Buat dan aktifkan virtual environment:'''
 +
 
 +
python3 -m venv venv
 +
source venv/bin/activate
 +
 
  
  ```bash
+
4. '''Instal Flask dan Flask-Login:'''
  mkdir flask_auth
+
    
   cd flask_auth
+
pip install Flask Flask-Login Flask-SQLAlchemy
  ```
 
  
3. **Buat dan aktifkan virtual environment:**
+
==Konfigurasi Aplikasi Flask==
 
 
  ```bash
 
  python3 -m venv venv
 
  source venv/bin/activate
 
  ```
 
 
 
4. **Instal Flask dan Flask-Login:**
 
 
 
  ```bash
 
  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.
 
Setelah instalasi, kita akan mengkonfigurasi aplikasi Flask dan mengintegrasikan Flask-Login untuk manajemen sesi pengguna.
  
1. **Buat file `app.py` dan tambahkan kode berikut:**
+
1. '''Buat file `app.py` dan tambahkan kode berikut:'''
 
+
 
  ```python
+
from flask import Flask, render_template, redirect, url_for, request, flash
  from flask import Flask, render_template, redirect, url_for, request, flash
+
from flask_sqlalchemy import SQLAlchemy
  from flask_sqlalchemy import SQLAlchemy
+
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
  from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
+
from werkzeug.security import generate_password_hash, check_password_hash
  from werkzeug.security import generate_password_hash, check_password_hash
+
 
+
app = Flask(__name__)
  app = Flask(__name__)
+
app.config['SECRET_KEY'] = 'kunci_rahasia_anda'
  app.config['SECRET_KEY'] = 'kunci_rahasia_anda'
+
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
  app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
+
db = SQLAlchemy(app)
  db = SQLAlchemy(app)
+
login_manager = LoginManager()
  login_manager = LoginManager()
+
login_manager.init_app(app)
  login_manager.init_app(app)
+
login_manager.login_view = 'login'
  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.
 
 
  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:**
 
  
   ```python
+
2. '''Definisikan model pengguna:'''
  class User(UserMixin, db.Model):
+
    
      id = db.Column(db.Integer, primary_key=True)
+
class User(UserMixin, db.Model):
      username = db.Column(db.String(150), unique=True, nullable=False)
+
    id = db.Column(db.Integer, primary_key=True)
      password = db.Column(db.String(150), nullable=False)
+
    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.
  
  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:'''
  
3. **Buat tabel basis data:**
+
Sebelum membuat tabel, pastikan Anda berada dalam konteks aplikasi:
 +
 +
with app.app_context():
 +
    db.create_all()
 +
 
  
  Sebelum membuat tabel, pastikan Anda berada dalam konteks aplikasi:
+
Kode ini akan membuat tabel `User` dalam basis data sesuai dengan model yang telah didefinisikan.
  
  ```python
+
==Implementasi Sistem Login==
  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.
 
Selanjutnya, kita akan mengimplementasikan sistem login dengan Flask-Login.
  
1. **Fungsi pemuat pengguna:**
+
1. '''Fungsi pemuat pengguna:'''
  
  Flask-Login memerlukan fungsi untuk memuat pengguna berdasarkan ID. Tambahkan kode berikut:
+
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:'''
  
   ```python
+
Tambahkan route untuk registrasi pengguna baru:
  @login_manager.user_loader
+
    
  def load_user(user_id):
+
@app.route('/register', methods=['GET', 'POST'])
      return User.query.get(int(user_id))
+
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.
  
2. **Route untuk registrasi pengguna:**
+
3. '''Route untuk login pengguna:'''
  
  Tambahkan route untuk registrasi pengguna baru:
+
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.
  
  ```python
+
4. '''Route untuk dashboard yang dilindungi:'''
  @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.
+
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.
  
3. **Route untuk login pengguna:**
+
5. '''Route untuk logout pengguna:'''
  
  Tambahkan route untuk login:
+
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.
  
  ```python
+
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.
  @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.
+
==1. Struktur Direktori Proyek==
 
 
4. **Route untuk dashboard yang dilindungi:**
 
 
 
  Tambahkan route untuk dashboard yang hanya dapat diakses oleh pengguna yang telah login:
 
 
 
  ```python
 
  @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:
 
 
 
  ```python
 
  @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:
 
Pastikan struktur direktori proyek Anda seperti berikut:
  
```
+
Flask_auth/
flask_auth/
+
├── app.py
├── app.py
+
├── templates/
├── templates/
+
│  ├── base.html
│  ├── base.html
+
│  ├── register.html
│  ├── register.html
+
│  └── login.html
│  └── login.html
+
└── venv/
└── venv/
 
```
 
  
## 2. Template Dasar (`base.html`)
+
==2. Template Dasar (`base.html`)==
  
 
Buat file `base.html` di dalam folder `templates` yang akan menjadi template dasar untuk halaman lainnya:
 
Buat file `base.html` di dalam folder `templates` yang akan menjadi template dasar untuk halaman lainnya:
  
```html
+
<pre>
<!DOCTYPE html>
+
<!DOCTYPE html>
<html lang="id">
+
<html lang="id">
<head>
+
<head>
    <meta charset="UTF-8">
+
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %} - Aplikasi Flask</title>
+
    <title>{% block title %}{% endblock %} - Aplikasi Flask</title>
    <style>
+
    <style>
        body {
+
        body {
            font-family: Arial, sans-serif;
+
            font-family: Arial, sans-serif;
        }
+
        }
        .container {
+
        .container {
            width: 50%;
+
            width: 50%;
            margin: auto;
+
            margin: auto;
        }
+
        }
        .flash {
+
        .flash {
            color: red;
+
            color: red;
        }
+
        }
    </style>
+
    </style>
</head>
+
</head>
<body>
+
<body>
    <div class="container">
+
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
+
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
+
            {% if messages %}
                {% for category, message in messages %}
+
                {% for category, message in messages %}
                    <div class="flash">{{ message }}</div>
+
                    <div class="flash">{{ message }}</div>
                {% endfor %}
+
                {% endfor %}
            {% endif %}
+
            {% endif %}
        {% endwith %}
+
        {% endwith %}
        {% block content %}{% endblock %}
+
        {% block content %}{% endblock %}
    </div>
+
    </div>
</body>
+
</body>
</html>
+
</html>
```
+
</pre>
  
  
Template ini menyediakan struktur dasar dengan area untuk menampilkan pesan flash dan konten spesifik halaman.
+
Template ini menyediakan struktur dasar dengan area untuk menampilkan pesan flash dan konten spesifik halaman.
  
## 3. Template Registrasi (`register.html`)
+
==3. Template Registrasi (`register.html`)==
  
 
Buat file `register.html` di dalam folder `templates` dengan konten berikut:
 
Buat file `register.html` di dalam folder `templates` dengan konten berikut:
  
```html
+
<pre>
{% extends "base.html" %}
+
{% 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>
  
{% block title %}Registrasi{% endblock %}
+
Template ini menyediakan formulir untuk registrasi pengguna baru dengan field `username` dan `password`.
  
{% block content %}
+
==4. Template Login (`login.html`)==
<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:
 
Buat file `login.html` di dalam folder `templates` dengan konten berikut:
  
```html
+
<pre>
{% extends "base.html" %}
+
{% extends "base.html" %}
 
+
{% block title %}Masuk{% endblock %}
+
{% 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>
  
{% block content %}
+
Template ini menyediakan formulir untuk login pengguna dengan field `username` dan `password`.
<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 %}
 
```
 
  
 
+
==5. Menjalankan Aplikasi==
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:
 
Setelah semua file dan kode di atas disiapkan, Anda dapat menjalankan aplikasi Flask dengan perintah berikut:
  
```bash
+
python app.py
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.
 
  
 +
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==
  
  - **3.1. Manajemen Autentikasi dan Otorisasi**
+
* [[Web Programming]]
    - Implementasi sistem login dan kontrol akses pengguna.
 
    - Contoh: Menggunakan Flask-Login untuk manajemen sesi pengguna.
 
    - Referensi: [Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)
 

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