Latihan - Mengelola siklus hidup permintaan

7 menit

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 bagian dependencies 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 header authorization yang memiliki nilai tertentu. Karena Anda tidak memberikan nilai sebagai bagian dari permintaan Anda, kode tidak merespons dengan data pengguna. Sebaliknya, responsnya adalah chunk 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.

Pengembangan jarak jauh (browser)
Pengembangan lokal (Docker)

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.

Lanjutkan