Langsung ke konten utama

Panduan Pengembangan Login, Implementasi JWT, dan CRUD Content dengan Pemrograman Python



Tutorial membuat Login, JWT, CRUD Content dengan JWT dengan bahasa pemrograman Python

1. Pembuatan Layout FE Sederhana Menggunakan Bootstrap

Bootstrap adalah kerangka kerja front-end yang memungkinkan pengembangan website yang responsif dan menarik secara visual dengan memanfaatkan HTML, CSS, dan JavaScript.

Langkah-langkah:

  1. Inisialisasi Proyek:

    • Buat folder proyek.
    • Tambahkan file HTML untuk tata letak dan struktur.
    • Gunakan Bootstrap CSS dan JavaScript dengan menambahkan CDN (Content Delivery Network) di dalam tag <head> HTML:
    <!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  2. Buat Tampilan Login:

    • Buat form login dengan Bootstrap untuk mengumpulkan informasi masuk pengguna.
    • Contoh:
    <div class="container mt-5">
    <form id="loginForm">
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password" required>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>

2. Integrasi dengan Python API menggunakan JWT

Untuk autentikasi menggunakan JWT dalam Python, Anda dapat menggunakan library seperti Flask (untuk backend API) dan PyJWT (untuk mengelola token JWT).

Langkah-langkah:

  1. Instalasi Flask dan PyJWT:

    • Instal Flask dan PyJWT melalui pip:
    pip install Flask PyJWT

  2. Buat API untuk Autentikasi:

    • Buat API endpoint untuk proses login dan pembuatan token JWT.
    from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    # Dummy authentication, replace with actual authentication logic
    if data['email'] == '[email protected]' and data['password'] == 'password':
        token = jwt.encode({'email': data['email'], 'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=30)}, app.config['SECRET_KEY'])
        return jsonify({'token': token.decode('UTF-8')})
    return jsonify({'error': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(debug=True)

  3. Konsumsi API dari Front-End:

    • Gunakan JavaScript (misalnya, dengan menggunakan Fetch API) untuk berkomunikasi dengan API yang telah dibuat di Flask.
    document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    fetch('http://localhost:5000/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ email: email, password: password })
    })
    .then(response => response.json())
    .then(data => {
        if (data.token) {
            // Simpan token di localStorage atau gunakan sesuai kebutuhan
            localStorage.setItem('token', data.token);
            // Redirect atau lakukan hal lain setelah login berhasil
            console.log('Login successful');
        } else {
            console.error('Login failed:', data.error);
        }
    })
    .catch(error => console.error('Error:', error));
});

Penjelasan:

  • Bootstrap: Digunakan untuk membangun tampilan FE yang responsif dan menarik.
  • Flask: Kerangka kerja Python untuk membuat API backend.
  • PyJWT: Library Python untuk membuat dan memvalidasi token JWT.
  • Login API Endpoint: Menerima permintaan login, melakukan autentikasi (dalam contoh ini, autentikasi sederhana dengan dummy credentials), dan menghasilkan token JWT.
  • Front-End Interaction with API: Menggunakan JavaScript (Fetch API) untuk mengirimkan permintaan login ke API Flask, dan menyimpan token JWT untuk otorisasi permintaan ke endpoint yang memerlukan autentikasi.

3. Tambahkan Endpoint API untuk POST Konten

Tambahkan endpoint di aplikasi Flask yang memungkinkan pengguna yang terotentikasi untuk membuat konten baru.

from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

# Fungsi untuk memeriksa token JWT
def verify_token(token):
    try:
        # Lakukan verifikasi token
        payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        return payload['email']  # Mengembalikan email yang terkandung dalam token
    except jwt.ExpiredSignatureError:
        return 'Signature expired. Please log in again.'
    except jwt.InvalidTokenError:
        return 'Invalid token. Please log in again.'

# Endpoint untuk membuat konten
@app.route('/create_content', methods=['POST'])
def create_content():
    token = request.headers.get('Authorization')
    
    if not token:
        return jsonify({'error': 'Token is missing'}), 401
    
    token = token.split("Bearer ")[1]  # Mengambil token dari header
    email = verify_token(token)

    if isinstance(email, str):
        return jsonify({'error': email}), 401

    # Di sini Anda dapat menambahkan logika untuk membuat konten baru
    # Misalnya, dapat menyimpan konten ke database atau melakukan operasi lainnya
    # Dalam contoh ini, hanya menunjukkan bahwa konten telah berhasil dibuat
    return jsonify({'message': 'Content created successfully by ' + email})

if __name__ == '__main__':
    app.run(debug=True)

4. Front-End: Menambahkan Kode untuk Menggunakan Token

Pada bagian front-end yang telah Anda buat sebelumnya, tambahkan fitur untuk mengirimkan token JWT saat mengakses endpoint untuk membuat konten baru.

// Mendapatkan token dari localStorage
const token = localStorage.getItem('token');

// Fungsi untuk membuat konten baru
function createContent() {
    fetch('http://localhost:5000/create_content', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}` // Mengirim token sebagai Bearer Token
        },
        body: JSON.stringify({ /* data konten yang ingin dibuat */ })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.message); // Pesan dari server setelah membuat konten
    })
    .catch(error => console.error('Error:', error));
}

// Panggil fungsi untuk membuat konten saat diperlukan
createContent();

Penjelasan:

  • /create_content Endpoint: Endpoint yang digunakan untuk membuat konten baru.
  • verify_token Function: Fungsi untuk memverifikasi token JWT yang diberikan. Jika token valid, akan mengembalikan email pengguna yang terotentikasi.
  • Front-End Interaction with API: Memperbarui kode JavaScript untuk memasukkan token JWT saat mengakses endpoint untuk membuat konten baru. Token dikirim dalam header Authorization dengan format Bearer Token.

Tentu, berikut ini adalah langkah-langkah untuk menambahkan fitur menampilkan daftar konten dengan otentikasi Bearer Token JWT pada Python sebagai backend API menggunakan Flask.

5. Tambahkan Endpoint API untuk List Konten

Tambahkan endpoint di aplikasi Flask yang memungkinkan pengguna yang terotentikasi untuk mendapatkan daftar konten.

from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

# Fungsi untuk memeriksa token JWT
def verify_token(token):
    try:
        # Lakukan verifikasi token
        payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        return payload['email']  # Mengembalikan email yang terkandung dalam token
    except jwt.ExpiredSignatureError:
        return 'Signature expired. Please log in again.'
    except jwt.InvalidTokenError:
        return 'Invalid token. Please log in again.'

# Endpoint untuk mendapatkan daftar konten
@app.route('/list_content', methods=['GET'])
def list_content():
    token = request.headers.get('Authorization')
    
    if not token:
        return jsonify({'error': 'Token is missing'}), 401
    
    token = token.split("Bearer ")[1]  # Mengambil token dari header
    email = verify_token(token)

    if isinstance(email, str):
        return jsonify({'error': email}), 401

    # Di sini Anda dapat menambahkan logika untuk mendapatkan daftar konten
    # Misalnya, dapat mengambil konten dari database atau sumber lainnya
    # Dalam contoh ini, hanya menunjukkan bahwa daftar konten berhasil diambil
    content_list = [
        {'title': 'Sample Content 1', 'description': 'This is a sample content'},
        {'title': 'Sample Content 2', 'description': 'Another sample content'}
    ]
    return jsonify({'content': content_list})

if __name__ == '__main__':
    app.run(debug=True)

6. Front-End: Menambahkan Kode untuk Mendapatkan Daftar Konten

Pada bagian front-end, tambahkan fitur untuk mengambil daftar konten dengan mengirimkan token JWT saat mengakses endpoint yang menampilkan daftar konten.

// Mendapatkan token dari localStorage
const token = localStorage.getItem('token');

// Fungsi untuk mendapatkan daftar konten
function getContentList() {
    fetch('http://localhost:5000/list_content', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}` // Mengirim token sebagai Bearer Token
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('Content List:', data.content); // Daftar konten dari server
    })
    .catch(error => console.error('Error:', error));
}

// Panggil fungsi untuk mendapatkan daftar konten saat diperlukan
getContentList();

Penjelasan:

  • /list_content Endpoint: Endpoint yang digunakan untuk mendapatkan daftar konten.
  • verify_token Function: Fungsi untuk memverifikasi token JWT yang diberikan. Jika token valid, akan mengembalikan email pengguna yang terotentikasi.
  • Front-End Interaction with API: Memperbarui kode JavaScript untuk mengirimkan token JWT saat mengakses endpoint yang menampilkan daftar konten. Token dikirim dalam header Authorization dengan format Bearer Token.

7. Tambahkan Endpoint API untuk Mendapatkan Detail Konten

Tambahkan endpoint di aplikasi Flask yang memungkinkan pengguna yang terotentikasi untuk mendapatkan detail dari sebuah konten.

from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

# Fungsi untuk memeriksa token JWT
def verify_token(token):
    try:
        # Lakukan verifikasi token
        payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        return payload['email']  # Mengembalikan email yang terkandung dalam token
    except jwt.ExpiredSignatureError:
        return 'Signature expired. Please log in again.'
    except jwt.InvalidTokenError:
        return 'Invalid token. Please log in again.'

# Data dummy untuk konten
content_data = {
    '1': {'title': 'Sample Content 1', 'description': 'This is a sample content'},
    '2': {'title': 'Sample Content 2', 'description': 'Another sample content'}
}

# Endpoint untuk mendapatkan detail konten berdasarkan ID
@app.route('/content/<content_id>', methods=['GET'])
def get_content_detail(content_id):
    token = request.headers.get('Authorization')
    
    if not token:
        return jsonify({'error': 'Token is missing'}), 401
    
    token = token.split("Bearer ")[1]  # Mengambil token dari header
    email = verify_token(token)

    if isinstance(email, str):
        return jsonify({'error': email}), 401

    # Dapatkan detail konten berdasarkan ID
    content = content_data.get(content_id)
    if content:
        return jsonify({'content': content})
    else:
        return jsonify({'error': 'Content not found'}), 404

if __name__ == '__main__':
    app.run(debug=True)

8. Front-End: Menambahkan Kode untuk Mendapatkan Detail Konten

Pada bagian front-end, tambahkan fitur untuk mendapatkan detail konten dengan mengirimkan token JWT saat mengakses endpoint yang memberikan detail konten berdasarkan ID.

// Mendapatkan token dari localStorage
const token = localStorage.getItem('token');

// ID konten yang ingin dilihat detailnya (diganti dengan ID yang valid)
const contentId = '1'; // Misalnya, mengambil detail konten dengan ID 1

// Fungsi untuk mendapatkan detail konten berdasarkan ID
function getContentDetail() {
    fetch(`http://localhost:5000/content/${contentId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}` // Mengirim token sebagai Bearer Token
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Content Detail:', data.content); // Detail konten dari server
    })
    .catch(error => console.error('Error:', error));
}

// Panggil fungsi untuk mendapatkan detail konten saat diperlukan
getContentDetail();

Penjelasan:

  • /content/<content_id> Endpoint: Endpoint yang digunakan untuk mendapatkan detail konten berdasarkan ID.
  • verify_token Function: Fungsi untuk memverifikasi token JWT yang diberikan. Jika token valid, akan mengembalikan email pengguna yang terotentikasi.
  • Front-End Interaction with API: Memperbarui kode JavaScript untuk mengirimkan token JWT saat mengakses endpoint yang memberikan detail konten berdasarkan ID. Token dikirim dalam header Authorization dengan format Bearer Token.

9. Tambahkan Endpoint API untuk Edit Konten

Tambahkan endpoint di aplikasi Flask yang memungkinkan pengguna yang terotentikasi untuk mengedit konten.

from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

# Fungsi untuk memeriksa token JWT
def verify_token(token):
    try:
        # Lakukan verifikasi token
        payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        return payload['email']  # Mengembalikan email yang terkandung dalam token
    except jwt.ExpiredSignatureError:
        return 'Signature expired. Please log in again.'
    except jwt.InvalidTokenError:
        return 'Invalid token. Please log in again.'

# Data dummy untuk konten
content_data = {
    '1': {'title': 'Sample Content 1', 'description': 'This is a sample content'},
    '2': {'title': 'Sample Content 2', 'description': 'Another sample content'}
}

# Endpoint untuk mengedit konten berdasarkan ID
@app.route('/edit_content/<content_id>', methods=['PUT'])
def edit_content(content_id):
    token = request.headers.get('Authorization')
    
    if not token:
        return jsonify({'error': 'Token is missing'}), 401
    
    token = token.split("Bearer ")[1]  # Mengambil token dari header
    email = verify_token(token)

    if isinstance(email, str):
        return jsonify({'error': email}), 401

    # Dapatkan data konten yang akan diubah
    content = content_data.get(content_id)
    if content:
        # Ambil data yang dikirim dari front-end untuk melakukan perubahan
        data = request.get_json()
        content['title'] = data.get('title', content['title'])
        content['description'] = data.get('description', content['description'])
        return jsonify({'message': 'Content updated successfully', 'content': content})
    else:
        return jsonify({'error': 'Content not found'}), 404

if __name__ == '__main__':
    app.run(debug=True)

10. Front-End: Menambahkan Kode untuk Mengedit Konten

Pada bagian front-end, tambahkan fitur untuk mengedit konten dengan mengirimkan token JWT saat mengakses endpoint yang digunakan untuk mengubah konten.

// Mendapatkan token dari localStorage
const token = localStorage.getItem('token');

// ID konten yang ingin diedit (diganti dengan ID yang valid)
const contentId = '1'; // Misalnya, mengedit konten dengan ID 1

// Data yang ingin diubah pada konten
const newData = {
    title: 'Updated Title',
    description: 'Updated description for the content'
};

// Fungsi untuk mengedit konten berdasarkan ID
function editContent() {
    fetch(`http://localhost:5000/edit_content/${contentId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}` // Mengirim token sebagai Bearer Token
        },
        body: JSON.stringify(newData) // Mengirim data yang ingin diubah
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Message:', data.message); // Pesan dari server setelah mengedit konten
        console.log('Updated Content:', data.content); // Konten yang telah diperbarui
    })
    .catch(error => console.error('Error:', error));
}

// Panggil fungsi untuk mengedit konten saat diperlukan
editContent();

Penjelasan:

  • /edit_content/<content_id> Endpoint: Endpoint yang digunakan untuk mengedit konten berdasarkan ID.
  • verify_token Function: Fungsi untuk memverifikasi token JWT yang diberikan. Jika token valid, akan mengembalikan email pengguna yang terotentikasi.
  • Front-End Interaction with API: Memperbarui kode JavaScript untuk mengirimkan token JWT saat mengakses endpoint yang digunakan untuk mengedit konten. Token dikirim dalam header Authorization dengan format Bearer Token.

11. Tambahkan Endpoint API untuk Hapus Konten

Tambahkan endpoint di aplikasi Flask yang memungkinkan pengguna yang terotentikasi untuk menghapus konten.

from flask import Flask, jsonify, request
import jwt
import datetime

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey'

# Fungsi untuk memeriksa token JWT
def verify_token(token):
    try:
        # Lakukan verifikasi token
        payload = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
        return payload['email']  # Mengembalikan email yang terkandung dalam token
    except jwt.ExpiredSignatureError:
        return 'Signature expired. Please log in again.'
    except jwt.InvalidTokenError:
        return 'Invalid token. Please log in again.'

# Data dummy untuk konten
content_data = {
    '1': {'title': 'Sample Content 1', 'description': 'This is a sample content'},
    '2': {'title': 'Sample Content 2', 'description': 'Another sample content'}
}

# Endpoint untuk menghapus konten berdasarkan ID
@app.route('/delete_content/<content_id>', methods=['DELETE'])
def delete_content(content_id):
    token = request.headers.get('Authorization')
    
    if not token:
        return jsonify({'error': 'Token is missing'}), 401
    
    token = token.split("Bearer ")[1]  # Mengambil token dari header
    email = verify_token(token)

    if isinstance(email, str):
        return jsonify({'error': email}), 401

    # Hapus konten berdasarkan ID
    content = content_data.get(content_id)
    if content:
        del content_data[content_id]
        return jsonify({'message': 'Content deleted successfully'})
    else:
        return jsonify({'error': 'Content not found'}), 404

if __name__ == '__main__':
    app.run(debug=True)

12. Front-End: Menambahkan Kode untuk Menghapus Konten

Pada bagian front-end, tambahkan fitur untuk menghapus konten dengan mengirimkan token JWT saat mengakses endpoint yang digunakan untuk menghapus konten.

// Mendapatkan token dari localStorage
const token = localStorage.getItem('token');

// ID konten yang ingin dihapus (diganti dengan ID yang valid)
const contentId = '1'; // Misalnya, menghapus konten dengan ID 1

// Fungsi untuk menghapus konten berdasarkan ID
function deleteContent() {
    fetch(`http://localhost:5000/delete_content/${contentId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}` // Mengirim token sebagai Bearer Token
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Message:', data.message); // Pesan dari server setelah menghapus konten
    })
    .catch(error => console.error('Error:', error));
}

// Panggil fungsi untuk menghapus konten saat diperlukan
deleteContent();

Penjelasan:

  • /delete_content/<content_id> Endpoint: Endpoint yang digunakan untuk menghapus konten berdasarkan ID.
  • verify_token Function: Fungsi untuk memverifikasi token JWT yang diberikan. Jika token valid, akan mengembalikan email pengguna yang terotentikasi.
  • Front-End Interaction with API: Memperbarui kode JavaScript untuk mengirimkan token JWT saat mengakses endpoint yang digunakan untuk menghapus konten. Token dikirim dalam header Authorization dengan format Bearer Token.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Fungsi lain tombol penerima panggilan di headset

Kegunaan tombol yang berada di headset utamanya adalah untuk menerima panggilan dan pause panggilan. Dan headset itu sendiri, kadang juga digunakan untuk mendengarkan music, digunakan bersama saat main game, supaya suara yang dikeluarkan oleh gadget tidak terlalu keras sehingga mengurangi beban gadget. Dengan mengurangi beban gadget, ada beberapa yang beranggapan kalau itu akan menghemat batere.
3 komentar
Baca selengkapnya

Apa itu index file seperti index.html, index.php kegunaannya dan bagaimana membuat custom nya

Index file adalah file yang berfungsi sebagai halaman utama atau tampilan pertama dari sebuah website. File ini memiliki nama default yang bervariasi, tergantung pada jenis server dan konfigurasinya, namun beberapa nama default yang umum digunakan adalah index.html, index.php, index.jsp, atau index.asp.
Posting Komentar
Baca selengkapnya

Membersihkan cache dan dalvik-cache menggunakan link2sd

Mungkin banyak yang menanyakan kenapa internalnya selalu berkurang free space nya. Padahal tidak menginstall applikasi baru. Hanya melakukan aktifitas normal. Dan sampai pada waktunya, internal memory low dan tidak bisa menambah aplikasi baru lagi.  Ada kemungkinan file cache dari sebuah aplikasi atau dalvik yang dibuat oleh OS android sudah  mulai membengkak. Sehingga perlu di bersihkan secara manual supaya tersedia penyimpanan kosong yang banyak. Sebelum mengetahui cara membersihkan cache dan dalvik cache, kita kupas sekilas apa itu cache dan dalvik cache. Cache adalah sebuah data file sementara yang di hasilkan oleh sebuah applikasi guna mempercepat pemrosesan dimasa yang akan datang (Cache Wikipedia) .  Dalvik-cache adalah ruang kosong sementara yang di pake oleh java virtual machine untuk menjalankan aplikasi android (Dalvik Wikipedia) .
2 komentar
Baca selengkapnya