Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular 2+
Code

Autentikasi Angular Dengan JWT

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Keamanan adalah bagian penting dari setiap aplikasi web, dan pengembang harus memastikan bahwa mereka mendesain aplikasi dengan otentikasi yang aman. Dalam tutorial ini, Anda akan belajar bagaimana menerapkan otentikasi berbasis JWT di aplikasi Angular dengan bantuan server Express sederhana.

Kode lengkap dapat ditemukan di repositori GitHub kami. Aplikasi yang akan kita bangun akan terlihat seperti ini:

Final Look

Konsep Token Web JSON

JSON Web Token (JWT) pada dasarnya adalah objek yang diwakili oleh tiga string yang digunakan untuk mengirimkan informasi pengguna. Tiga string, yang dipisahkan oleh titik-titik, adalah:

  • header
  • payload
  • signature

Ketika seorang pengguna log in ke suatu halaman web dengan username dan passwordnya, server otentikasi biasanya membuat dan mengirim kembali JWT. JWT ini kemudian diteruskan bersama dengan panggilan API berikutnya ke server. JWT tetap valid kecuali kedaluwarsa atau pengguna log out dari aplikasi.

Proses ini dapat diilustrasikan dalam diagram di bawah ini.

JWT authorization flow

Cookies vs. Penyimpanan Lokal

Kita akan menggunakan penyimpanan lokal untuk menyimpan token. Penyimpanan lokal adalah sarana tempat data disimpan secara lokal dan hanya dapat dihapus melalui JavaScript atau dengan mengosongkan cache di browser. Data yang tersimpan di penyimpanan lokal dapat bertahan untuk waktu yang sangat lama. Cookies, di sisi lain, adalah pesan yang dikirim dari server ke browser dan hanya menawarkan penyimpanan terbatas.

Membangun Server Express

Kita akan mulai dengan membangun server back-end yang akan menampilkan endpoint berikut:

  • POST <webservice>/login
  • POST <webservice>/profile

Mari kita mulai dengan membuat direktori untuk aplikasi Express dan kemudian jalankan perintah npm init untuk mengatur file yang diperlukan untuk proyek tersebut.

Berikutnya, buat file server.js dan instal modul: express, jsonwebtoken, cors, dan bodyParser.

Sekarang buka server.js dan mulai dengan mengimpor modul.

Kemudian buat aplikasi Express dan tentukan secret key yang akan digunakan untuk encode dan decode kode detail pengguna.

Kita tidak akan menggunakan database untuk contoh ini. Namun, konsepnya akan serupa jika Anda sedang membangun server database-backed yang tepat.

Untuk contoh, kita hanya akan menggunakan variabel untuk menentukan pengguna tes seperti yang ditunjukkan di bawah ini.

Langkah terakhir adalah membuat rute untuk mengautentikasi pengguna.

Mari kita bahas kode untuk route di atas.

Pertama kita periksa apakah ada data di badan permintaan. Jika tidak ada data yang ditemukan, kita meminta pengguna untuk memasukkan beberapa data. Pada saat pengguna telah memberikan data yang tepat, kita membandingkannya dengan data dari testUser dan, jika cocok, kita menggunakan id pengguna untuk menghasilkan token unik dan mengirim kembali tanggapan kepada pengguna.

Akhirnya, kita membuat endpoint untuk menjalankan aplikasi.

Sekarang back-end kita sudah selesai, dan Anda dapat mengujinya dengan Postman atau CURL dan lihat jenis data yang akan dikembalikan kepada pengguna.

Membangun Aplikasi Angular

Aplikasi Angular kita akan menampilkan halaman-halaman berikut:

  • Home — Laman ini akan berisi tautan ke laman login dan profile.
  • Login — Di laman ini, pengguna akan memasukkan email dan passsword mereka, yang akan dikirim ke server untuk otentikasi. Jika kredensial benar, maka token JWT akan dikembalikan dan pengguna akan dialihkan ke halaman profile.
  • Profile — Ini adalah laman yang dilindungi yang hanya dapat diakses oleh pengguna dengan token yang valid.

Buat aplikasi Angular dan buat komponen Login dan Profile seperti yang ditunjukkan di bawah ini:

Selanjutnya, tambahkan kode untuk laman home di app.component.html.

Selanjutnya, impor RouterModule dan tentukan rute di app.module.ts.

Membuat Halaman Login

Halaman login akan berisi dua kolom input untuk email dan password, dan tombol submit seperti yang ditunjukkan di bawah ini:

Membuat Halaman Profile

Laman profil hanya akan menjadi pesan sederhana seperti yang ditunjukkan di bawah ini:

Auth dengan JWT di Angular

Kita akan mulai dengan membuat Layanan Auth yang akan memfasilitasi validasi input dan komunikasi pengguna dengan server.

Ini menciptakan dua file, tetapi kita terutama akan tertarik pada file auth.service.ts di mana kita akan menulis semua kode yang berinteraksi dengan server. Kita akan memulai dengan mendefinisikan REST API dan token seperti yang ditunjukkan di bawah ini:

Selanjutnya, kita akan menulis kode yang melakukan permintaan POST ke server dengan kredensial pengguna. Di sini, kita membuat permintaan ke API — jika berhasil, kita simpan token di localStorage dan mengalihkan pengguna ke halaman profil.

Kami juga mendefinisikan fungsi login dan logout seperti yang ditunjukkan di bawah ini.

  • Logout — membersihkan token dari penyimpanan lokal
  • LogIn — mengembalikan properti boolean yang menentukan apakah pengguna diautentikasi

Selanjutnya kita perbarui properti logIn di halaman home seperti yang ditampilkan di bawah ini.

Menanggapi User Event

Sekarang kita selesai dengan kode yang berinteraksi dengan server, kita akan melanjutkan untuk menangani kejadian yang dibuat pengguna untuk front-end.

Kita akan menulis fungsi yang akan mendengarkan peristiwa klik dari laman login dan kemudian meneruskan nilai ke AuthService untuk mengotentikasi pengguna. Perbarui file login.component.ts Anda agar terlihat seperti ini:

Sekarang jika Anda menjalankan ng serve dan mengarahkannya ke http://localhost:4200, Anda dapat menguji aplikasi Anda.

Klik tautan login dan berikan kredensial pengguna — ingat, kredensial yang valid didefinisikan dalam aplikasi Express. Sekarang, ketika Anda mengklik tombol login, Anda akan dialihkan ke halaman profil.

Kesimpulan

Dalam tutorial ini, Anda telah belajar bagaimana memulai dengan otentikasi JWT di Angular. Sekarang Anda dapat mengotentikasi dan mengotorisasi dengan JWT di aplikasi Angular Anda. Ada banyak aspek JWT yang tidak dibahas dalam tutorial in — lihat apakah Anda dapat mengeksplor beberapa dari mereka sendiri!

Perhatikan bahwa tutorial ini ditulis untuk Angular 6, tetapi konsep yang sama harus bekerja dengan Angular 2 atau Angular 4.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.