Latihan - Mengelola siklus hidup permintaan
Tailwind Traders membutuhkan aplikasi mereka untuk memiliki beberapa keamanan dasar. Aplikasi Express harus membedakan antara pelanggan terdaftar yang memiliki akses, dan pengguna lain yang seharusnya tidak memiliki akses. Fitur lain, seperti manajemen peran, mungkin ditambahkan di kemudian hari.
Tambahkan otorisasi dasar ke kerangka kerja Ekspres
Sebagian besar aplikasi memiliki bagian yang dapat diakses siapa saja. Tapi, beberapa bagian perlu dilindungi. Ada berbagai cara untuk melindungi aplikasi. Dalam latihan ini, implementasikan sistem perlindungan sederhana untuk memahami cara kerja mekanisme middleware dalam kerangka kerja Ekspres.
Membuat server web
Dalam latihan ini, terus gunakan kontainer dev. Proyek sampel yang memiliki file produk dan kode aplikasi pemula disediakan untuk Anda. Anda akan mengisi bagian proyek yang hilang untuk menyelesaikan pembaruan aplikasi bagi pelanggan.
Buka folder node-essentials/nodejs-http/exercise-express-middleware di terminal dengan mengklik kanan nama folder dan memilih Buka di terminal terintegrasi.
Folder ini memiliki tiga file: app.js, client.js, dan package.json.
File package.json berisi dependensi bernama
express
. Jalankan perintah berikut untuk memasang dependensi:npm install
npm
membaca dari bagiandependencies
dalam file package.json dan menginstal paket yang diperlukan.Di editor kode, buka file app.js dan periksa kontennya:
const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => res.send("Hello World!")); app.get("/users", (req, res) => { res.json([ { id: 1, name: "User Userson", }, ]); }); app.get("/products", (req, res) => { res.json([ { id: 1, name: "The Bluest Eye", }, ]); }); app.listen(port, () => console.log(`Example app listening on port ${port}!`));
Kode berisi aplikasi Ekspres yang berfungsi dengan tiga rute: garis miring
/
,/users
, dan/products
.
Membuat aplikasi klien
Di editor kode, buka file aplikasi client.js dan periksa kontennya:
const http = require('http');
const options = {
port: 3000,
hostname: 'localhost',
path: '/users',
headers: {}
};
const req = http.get(options, (res) => {
console.log(`Connected - Status Code ${res.statusCode}`);
res.on('data', (chunk) => {
console.log("Chunk data: ", chunk.toString());
});
res.on('end', () => {
console.log('No more data');
});
res.on('close', () => {
console.log('Connection closed');
});
});
req.on('error', (error) => {
console.error('An error occurred: ', error);
});
req.end();
Kode ini adalah klien HTTP sederhana yang terhubung ke aplikasi Express. Ini bukan browser web. Ini tidak merender HTML. Ini hanya terhubung ke server dan membaca data yang dikembalikan. Ini adalah contoh yang baik untuk menggunakan modul HTTP dari Node.js.
Kode aplikasi klien terhubung ke alamat http://localhost:3000/users
untuk /users
rute. Klien mendengarkan tiga peristiwa: data
, end
, dan close
. Saat memancarkan peristiwa, semua fungsi yang melekat pada peristiwa tertentu tersebut disebut secara sinkron. Ini memastikan urutan peristiwa yang tepat dan membantu menghindari kondisi balapan dan kesalahan logika. Jika sesuai, fungsi pendengar dapat beralih ke mode operasi asinkron menggunakan setImmediate()
metode atau process.nextTick()
. Ini tidak tercakup dalam modul ini.
Jalankan program Ekspres
Sekarang Anda siap untuk mencoba program Ekspres dengan aplikasi klien.
Di terminal, mulai program server Ekspres dengan memasukkan perintah ini:
node app.js
Catatan
Pastikan Anda menjalankan file app.js yang terletak di
/nodejs-http/exercise-express-middleware
.Buka terminal kedua dan mulai aplikasi klien:
node client.js
Di terminal kedua, Anda akan melihat output berikut dari klien:
connected - statusCode: 200 chunk [{"id":1,"name":"User Userson"}] No more data Closing connection
Server Express merespons dengan beberapa data pengguna,
chunk [{"id":1,"name":"User Userson"}]
. Semua bagian aplikasi berfungsi.Aplikasi klien berakhir setelah menampilkan output.
Di terminal pertama (server Ekspres), tekan Ctrl + C untuk menghentikan program.
Melindungi rute
Untuk melindungi rute ini, kita akan menambahkan beberapa kode ke aplikasi Ekspres.
Di editor kode, buka file /nodejs-http/exercise-express-middleware/app.js . Perhatikan pernyataannya
const app = express()
. Setelah pernyataan ini, tambahkan kode berikut:function isAuthorized(req, res, next) { const authHeader = req.headers.authorization; if (!authHeader || authHeader !== 'secretpassword') { return res.status(401).send('Unauthorized: Access Denied'); } next(); }
Selanjutnya, temukan bagian kode berikut dalam file yang sama:
app.get("/users", (req, res) => { res.json([ { id: 1, name: "User Userson", }, ]); });
Ganti bagian ini dengan kode berikut sehingga
isAuthorized
middleware adalah argumen kedua:app.get("/users", isAuthorized, (req, res) => { res.json([ { id: 1, name: "User Userson", }, ]); });
Jalankan program Ekspres dan panggil middleware
Coba aplikasi klien lagi dengan program server yang diperbarui.
Di terminal pertama, jalankan perintah berikut untuk menghidupkan ulang program Ekspres:
node app.js
Di terminal kedua, mulai ulang aplikasi klien:
node client.js
Di terminal kedua, Anda akan melihat output berikut dari klien:
connected - statusCode: 401 chunk Not permitted No more data Closing connection
Kali ini, middleware
isAuthorized()
dipanggil dan mencari headerauthorization
yang memiliki nilai tertentu. Karena Anda tidak memberikan nilai sebagai bagian dari permintaan Anda, kode tidak merespons dengan data pengguna. Sebaliknya, responsnya adalahchunk Not permitted
. Anda akan menambahkan otorisasi tertentu di bagian berikutnya.Di terminal pertama, tekan Ctrl + C untuk menghentikan program.
Menambahkan header otorisasi
Anda perlu menambahkan authorization
header untuk nilai tertentu.
Di editor kode, buka file nodejs-http/exercise-express-middleware/client.js lagi. Periksa pernyataan berikut:
headers: {},
Ganti pernyataan ini dengan kode berikut:
headers: { authorization: 'secretpassword' },
Jalankan program Ekspres dengan otorisasi klien
Coba klien lagi dengan header authorization
.
Di terminal pertama, jalankan perintah berikut untuk menghidupkan ulang program Ekspres:
node app.js
Di kedua terminal, jalankan perintah berikut untuk menjalankan klien lagi:
node client.js
Di terminal kedua, Anda sekarang akan melihat output berikut dari klien:
connected - statusCode: 200 chunk [{"id":1,"name":"User Userson"}] No more data Closing connection
Data pengguna dikembalikan karena Anda melewati
authorization
header dengan nilai yang diterima.Di terminal pertama, tekan Ctrl + C untuk menghentikan program.
Selamat! Anda mempelajari cara menggunakan middleware di Express untuk menambahkan prapemroseduran, otorisasi dasar, ke program Ekspres Anda.
Perhatian
Ketahuilah bahwa autentikasi/otorisasi yang dimaksudkan untuk penggunaan dunia nyata harus lebih kuat daripada contoh ini. Ada baiknya mencari konsep seperti OAuth, JSON Web Tokens, JWT, dan pustaka bcrypt untuk memastikan aplikasi Anda memiliki perlindungan dari pengguna yang tidak sah.
Membersihkan kontainer pengembangan
Setelah menyelesaikan proyek, Anda mungkin ingin membersihkan lingkungan pengembangan Anda atau mengembalikannya ke keadaan khasnya.
Menghapus lingkungan GitHub Codespaces memastikan bahwa Anda dapat memaksimalkan jumlah pemberian izin per jam inti gratis yang Anda dapatkan untuk akun Anda.
Penting
Untuk informasi selengkapnya tentang penetapan akun GitHub Anda, lihat GitHub Codespaces bulanan yang disertakan penyimpanan dan jam inti.
Masuk ke dasbor GitHub Codespaces (https://github.com/codespaces).
Temukan Codespace Yang sedang berjalan yang bersumber dari
MicrosoftDocs/node-essentials
repositori GitHub.Buka menu konteks untuk codespace dan pilih Hapus.