Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Authtentikasi Berbasis Token dengan AngularJS & NodeJS

by
Read Time:18 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Authtentikasi adalah salah satu bagian yang paling penting dari aplikasi web. Dalam tutorial ini, kita akan membahas sistem otentikasi berbasis token dan bagaimana mereka berbeda dari sistem login tradisional. Pada akhir tutorial ini, Anda akan melihat sebuah sepenuhnya kerja demo ditulis dalam AngularJS dan NodeJS

Sistem Authtentikasi Tradisional

Sebelum melanjutkan dengan sistem otentikasi berbasis token, mari kita lihat sistem otentikasi tradisional terlebih dahulu.

  1. Pengguna memberikan username dan password dalam login form dan klik Log In.
  2. Setelah request dibuat, memvalidasi pengguna pada backend oleh query dalam database. Jika permintaan berlaku, membuat sesi dengan menggunakan informasi pengguna yang diambil dari database, dan kemudian kembali informasi sesi di header respon untuk menyimpan ID sesi dalam browser.
  3. Berikan informasi sesi untuk mengakses endpoints yang di batasi dalam aplikasi.
  4. Jika informasi sesi berlaku, membiarkan pengguna mengakses endpoint tertentu, dan merespon dengan konten HTML.

Semuanya baik-baik saja sampai titik ini. Aplikasi web bekerja dengan baik, dan dapat mengotentikasi pengguna sehingga mereka dapat mengakses Endpoint terbatas; Namun, apa yang terjadi ketika Anda ingin mengembangkan klien lain, mengatakan untuk Android, untuk aplikasi Anda? Anda akan dapat menggunakan aplikasi saat ini untuk mengotentikasi klien selular dan melayani konten terbatas? Seperti saat ini berdiri, tidak Ada dua alasan utama untuk ini:

  1. Sesi dan cookies tidak masuk akal untuk aplikasi mobile. Anda tidak dapat berbagi sesi atau cookie yang dibuat pada sisi server dengan klien mobile.
  2. Pada saat ini aplikasi, HTML yang dibuatnya dikembalikan. Di klien mobile, Anda perlu sesuatu seperti JSON atau XML untuk dimasukkan sebagai respon.

Dalam kasus ini, Anda memerlukan sebuah aplikasi klien-independen.

Otentikasi berbasis token

Dalam otentikasi berbasis token, cookie dan sesi tidak akan digunakan. Token akan digunakan untuk otentikasi pengguna untuk setiap permintaan ke server. Mari kita merancang ulang skenario pertama dengan otentikasi berbasis token.

Itu akan menggunakan aliran berikut kontrol:

  1. Pengguna memberikan username dan password dalam login form dan klik Log In.
  2. Setelah roquest dibuat, validasi pengguna pada backend oleh query dalam database. Jika permintaan berlaku, membuat tanda dengan menggunakan informasi pengguna yang diambil dari database, dan kemudian kembali informasi dalam header respon sehingga kita dapat menyimpan token browser penyimpanan lokal.
  3. Berikan informasi token di setiap header permintaan untuk mengakses titik akhir terlarang dalam aplikasi.
  4. Jika token diambil dari informasi header permintaan valid, biarkan pengguna mengakses end point yang ditetapkan, dan merespon dengan JSON atau XML.

Dalam kasus ini, kami tidak memiliki mengembalikan sesi atau cookie, dan kita tidak mengembalikan konten HTML apapun. Itu berarti bahwa kita dapat menggunakan arsitektur ini untuk setiap klien untuk aplikasi tertentu. Anda dapat melihat arsitektur skema di bawah ini:

Jadi, apa itu JWT ini?

JWT

JWT adalah singkatan dari JSON Web Token dan merupakan format token yang digunakan dalam header authorization. Token ini membantu Anda merancang komunikasi antara dua sistem dalam cara yang aman. Mari kita ulang kata-kata JWT sebagai "pembawa token" untuk tujuan dari tutorial ini. Tanda pembawa terdiri dari tiga bagian: header, payload, dan signature.

  • Header adalah bagian dari token yang membuat token jenis dan metode enkripsi, yang juga dienkripsi dengan base-64.
  • Payload mencakup informasi. Anda dapat memasukkan data apa pun seperti info pengguna, info produk, dan sebagainya, yang semuanya disimpan dengan enkripsi basis-64.
  • Signature ini terdiri dari kombinasi header, payload, dan secret key. Kunci rahasia harus disimpan dengan aman di sisi server.

Anda dapat melihat skema JWT dan token contoh di bawah ini;

Anda tidak perlu mengimplementasikan generator token pembawa karena Anda dapat menemukan versi yang sudah ada dalam beberapa bahasa. Anda dapat melihat beberapa dari mereka di bawah ini:

Bahasa URL Perpustakaan
NodeJS http://GitHub.com/auth0/node-jsonwebtoken
PHP http://github.com/firebase/php-jwt
Java http://github.com/auth0/java-jwt
Ruby http://github.com/progrium/ruby-jwt
.NET http://github.com/AzureAD/azure-activedirectory-identitymodel-extensions-for-dotnet
Python http://github.com/progrium/pyjwt/

Sebuah contoh praktis

Setelah mengkover beberapa informasi dasar tentang otentikasi berbasis token, kita sekarang dapat melanjutkan dengan contoh praktis. Lihatlah schema berikut, setelah itu kita akan menganalisis secara lebih rinci:

  1. Permintaan dibuat oleh beberapa klien seperti aplikasi web, klien seluler, dll, ke API untuk tujuan tertentu.
  2. Permintaan yang dibuat untuk layanan seperti https://api.yourexampleapp.com. Jika banyak orang menggunakan aplikasi, beberapa server mungkin diminta untuk melayani operasi yang diminta.
  3. Di sini, beban pengimbang digunakan untuk menyeimbangkan permintaan yang sesuai dengan aplikasi server di back-end. Ketika Anda membuat permintaan untuk https://api.yourexampleapp.com, pertama beban pengimbang akan menangani permintaan, dan kemudian itu akan mengarahkan klien ke server tertentu.
  4. Ada satu aplikasi, dan aplikasi ini dideploy untuk beberapa server (server-1, server-2,..., server-n). Setiap kali permintaan yang dibuat untuk https://api.yourexampleapp.com, aplikasi back-end akan mencegat permintaan header dan mengekstrak informasi token dari header otorisasi. Database query akan dibuat dengan menggunakan token ini. Jika token ini berlaku dan memiliki izin yang diperlukan untuk mengakses akhir diminta, itu akan berlanjut. Jika tidak, itu akan kembali kode respon 403 (yang menunjukkan status forbidden).

Keuntungan

Otentikasi berbasis token dilengkapi dengan beberapa keunggulan yang memecahkan masalah serius. Beberapa dari mereka adalah sebagai berikut:

  • Layanan Independen Klien. Dalam otentikasi berbasis token, token ditransfer melalui header request, bukan menyimpan informasi otentikasi di sesi atau cookie. Ini berarti no state. Anda dapat mengirim request ke server dari setiap jenis klien yang dapat membuat permintaan HTTP.
  • CDN. Dalam aplikasi web terbaru, view yang diberikan pada back-end dan konten HTML kembali ke browser. Logika front-end tergantung pada kode back-end. Ada tidak perlu untuk membuat dependency tersebut. Ini datang dengan beberapa masalah. Misalnya, jika Anda bekerja dengan sebuah desain agency yang mengimplementasikan Anda front-end HTML, CSS, dan JavaScript, Anda perlu untuk mengambil kode front-end dan bermigrasi ke kode back-end untuk melakukan render beberapa atau mempopulasikan operasi. Setelah beberapa waktu, konten HTML yang diberikan akan berbeda jauh dari apa yang kode agenci implementasikan. Dalam otentikasi berbasis token, Anda dapat mengembangkan sebuah proyek front-end terpisah dari kode pendukungnya. Kode back-end akan mengembalikan respons JSON bukan HTML, dan Anda dapat menempatkan the minified, gzip versi kode front-end ke CDN. Ketika Anda pergi ke halaman web Anda, konten HTML akan disajikan dari CDN, dan konten halaman akan diisi oleh API Layanan menggunakan token dalam header otorisasi
  • Tanpa Cookie-Session (atau Tanpa CSRF). CSRF adalah masalah utama dalam keamanan modern web karena itu tidak memeriksa apakah sumber permintaan dipercaya atau tidak. Untuk mengatasi masalah ini, Kolam token yang digunakan untuk mengirim token pada formulir setiap posting. Dalam otentikasi berbasis tanda, tanda digunakan dalam header otorisasi, dan CSRF tidak termasuk informasi tersebut.
  • Persistent Token Store. Ketika sesi membaca, menulis, atau Hapus operasi dilakukan dalam aplikasi, itu akan membuat file operasi dalam sistem operasi temp folder, setidaknya untuk pertama kalinya. Katakanlah bahwa Anda memiliki beberapa server dan sesi dibuat pada server pertama. Ketika Anda membuat permintaan lain dan tetes permintaan Anda di server lain, informasi sesi tidak akan ada dan akan mendapatkan respons "unauthorized". Aku tahu, Anda dapat menyelesaikan yang dengan sesi lengket. Namun, dalam otentikasi berbasis token, kasus ini adalah dipecahkan secara alami. Ada tidak lengket sesi masalah, karena token permintaan adalah dicegat pada setiap permintaan pada server.

Mereka adalah keuntungan paling umum otentikasi berbasis token dan komunikasi. Itu adalah akhir dari teoritis dan arsitektur berbicara tentang otentikasi berbasis token. Waktu untuk sebuah contoh praktis.

Contoh aplikasi

Anda akan melihat dua aplikasi untuk menunjukkan otentikasi berbasis tanda:

  1. Token-berbasis-auth-backend
  2. Token-berbasis-auth-frontend

Dalam proyek back-end, akan ada layanan implementasi, dan layanan hasil akan dikembalikan dalam format JSON. Ada tidak ada kembalian view pada services. Dalam proyek front-end, akan ada AngularJS proyek untuk front-end HTML dan kemudian front-end app akan diisi oleh AngularJS layanan untuk membuat permintaan untuk layanan back-end.

token-based-auth-backend

Dalam proyek back-end, ada tiga file utama:

  • package.json untuk dependency management.
  • models\user.js berisi model User yang akan digunakan untuk membuat operasi database tentang pengguna.
  • server.js adalah untuk bootstrap proyek dan penanganan permintaan.

Itu dia! Proyek ini sangat sederhana, sehingga Anda dapat memahami konsep utama dengan mudah tanpa melakukan menyelam yang mendalam.

package.json berisi dependensi untuk proyek: express untuk MVC, body-parser untuk simulasi posting permintaan penanganan di NodeJS, morgan untuk permintaan penebangan, mongoose untuk kerangka ORM kami untuk terhubung ke MongoDB, dan jsonwebtoken untuk menciptakan JWT tanda-tanda dengan menggunakan model pengguna kami. Ada juga sebuah atribut yang disebut engines yang mengatakan bahwa proyek ini dibuat dengan menggunakan NodeJS Versi > = 0.10.0. Hal ini berguna untuk layanan PaaS seperti Heroku. Kami juga akan mencakup topik itu di bagian lain.

Kami mengatakan bahwa kami akan menghasilkan tanda dengan menggunakan pengguna model payload. Model ini membantu kita untuk membuat pengguna beroperasi pada MongoDB. Dalam User.js, pengguna-schema didefinisikan dan User model dibuat dengan menggunakan model luwak. Model ini sangat siap untuk operasi database.

Dependensi kita didefinisikan, dan model user kami didefinisikan, jadi sekarang mari kita menggabungkan semua orang untuk membangun sebuah layanan untuk menangani permintaan khusus.

Di NodeJS, Anda dapat menyertakan sebuah modul dalam proyek Anda dengan menggunakan require. Pertama, kita perlu mengimpor modul yang diperlukan ke proyek:

Layanan kami akan melayani melalui port tertentu. Jika variabel port manapun didefinisikan dalam variabel lingkungan sistem, Anda dapat menggunakannya, atau kami telah mendefinisikan port 3001. Setelah itu, User model disertakan, dan koneksi database didirikan untuk melakukan beberapa operasi pengguna. Jangan lupa untuk mendefinisikan environment variabel —MONGO_URL— untuk URL koneksi database.

Di bagian atas, kami telah membuat beberapa konfigurasi untuk simulasi permintaan HTTP penanganan di NodeJS dengan menggunakan Express. Kita membiarkan permintaan datang dari domain yang berbeda untuk mengembangkan sistem klien-independen. Jika Anda tidak mengizinkan ini, Anda akan memicu kesalahan CORS (Cross asal permintaan berbagi) dalam web browser.

  • Access-Control-Allow-Origin diperbolehkan untuk semua domain.
  • Anda dapat mengirim POST dan GET request untuk layanan ini.
  • X-Requested-With dan content-type header diperbolehkan.

Kami telah mengimpor semua modul yang diperlukan dan didefinisikan konfigurasi kami, jadi sekarang saatnya untuk menentukan penangan permintaan. Dalam kode di atas, setiap kali Anda membuat POST request untuk /authenticate dengan username dan password, Anda akan mendapatkan JWT token. Pertama, database query yang diproses dengan menggunakan username dan password. Jika ada pengguna, data pengguna akan dikembalikan dengan tokennya. Namun, bagaimana jika ada user tersebut pencocokan username dan/atau password?

Ketika Anda membuat permintaan POST untuk /signin dengan username dan password, pengguna baru akan dibuat dengan menggunakan diposting informasi pengguna. Di baris 19, Anda dapat melihat bahwa tanda JSON baru yang dihasilkan dengan menggunakan modul jsonwebtoken, yang telah ditetapkan ke variabel jwt. Bagian otentikasi OK. Bagaimana jika kita mencoba mengakses endpoint yang dibatasi? Bagaimana kita bisa mengelola untuk mengakses endpoint itu?

Ketika Anda membuat GET request untuk /me, Anda akan mendapatkan info pengguna saat ini, tapi untuk melanjutkan dengan akhir yang diminta, fungsi ensureAuthorized akan dieksekusi.

Dalam fungsi ini, request header diintercept dan header authorization diekstrak. Jika bearer token ada dalam header ini, token yang diberikan kepada req.token untuk digunakan di seluruh request, dan request dapat dilanjutkan dengan menggunakan fungsi next(). Jika tidak ada token, Anda akan mendapatkan respons 403 (Forbidden). Mari kita kembali ke handler /me, dan menggunakan req.token untuk mengambil data pengguna dengan token ini. Setiap kali Anda membuat pengguna baru, tanda dihasilkan dan disimpan di model user di DB. Token tersebut unik.

Kami memiliki tiga penangan untuk proyek ini sederhana. Setelah itu, Anda akan melihat;

Aplikasi NodeJS mungkin crash jika terjadi error. Dengan kode diatas, kecelakaan yang dicegah dan error log yang dicetak di konsol. Dan akhirnya, kita dapat mulai server dengan menggunakan kode snippet berikut.

Untuk meringkas:

  • Modul yang diimpor.
  • Konfigurasi yang dibuat.
  • Permintaan penangan didefinisikan.
  • Middleware didefinisikan untuk mencegat Endpoint dibatasi.
  • Server dimulai.

Kami selesai dengan layanan back-end. Sehingga dapat digunakan oleh beberapa klien, Anda dapat menyebarkan aplikasi server sederhana ini untuk server Anda, atau mungkin Anda dapat mendeploy di Heroku. Ada file bernama Procfile di folder akar proyek. Mari kita mendeploy layanan kami di Heroku.

Heroku Deployment

Anda dapat clone proyek back-end dari GitHub repositori  ini.

Saya tidak akan membahas cara membuat aplikasi di Heroku; Anda dapat merujuk ke artikel ini untuk membuat sebuah aplikasi Heroku jika Anda belum melakukan hal ini sebelumnya. Setelah Anda membuat aplikasi Heroku Anda, Anda dapat menambahkan tujuan untuk proyek Anda saat ini dengan menggunakan perintah berikut:

Sekarang Anda memiliki sebuah proyek kloning dan menambahkan tujuan. Setelah git add dan git commit, Anda dapat menge-push kode Anda untuk Heroku dengan melakukan git push heroku master. Ketika Anda berhasil push sebuah proyek, Heroku akan melakukan perintah npm install untuk men-download dependensi ke folder temp pada Heroku. Setelah itu, itu akan mulai aplikasi Anda dan Anda dapat mengakses layanan Anda dengan menggunakan protokol HTTP.

token-based-auth-frontend

Dalam proyek front-end, Anda akan melihat sebuah proyek AngularJS. Di sini, saya hanya akan menyebutkan bagian utama dalam proyek front-end, karena AngularJS bukanlah sesuatu yang dapat dibahas dalam tutorial tunggal.

Anda dapat clone proyek dari repositori GitHub ini. Dalam proyek ini, Anda akan melihat struktur folder berikut:

Folder StructureFolder StructureFolder Structure

ngStorage.js adalah perpustakaan untuk AngularJS untuk memanipulasi penyimpanan lokal operasi. Juga, ada tata letak utama index.html dan parsial yang memperpanjang tata letak yang utama di bawah folder partials. controllers.js adalah untuk menentukan tindakan controller kita di front-end. services.js adalah untuk membuat permintaan layanan untuk layanan kami yang saya sebutkan dalam proyek sebelumnya. Kami memiliki bootstrap-seperti file bernama app.js dan dalam file ini, konfigurasi dan modul impor diterapkan. Akhirnya, client.js adalah untuk melayani file HTML statis (atau hanya index.html, dalam kasus ini); ini membantu kami untuk melayani file HTML statis bila Anda menggunakan server tanpa menggunakan Apache atau server web lain.

Dalam tata letak utama HTML file, semua file JavaScript diperlukan disertakan untuk berhubungan dengan AngularJS libraries, serta custom controller, service, dan app file.

Pada kode diatas, HomeCtrl controller didefinisikan dan beberapa diperlukan modul disuntikkan seperti $rootScope dan $scope. Dependency injeksi adalah salah satu sifat terkuat AngularJS. $scope adalah variabel jembatan antara controller dan view di AngularJS yang berarti Anda dapat menggunakan test melihat jika Anda tetapkan dalam controller tertentu seperti $scope.test=...

Dalam controller ini, beberapa fungsi utilitas didefinisikan, seperti:

  • signin untuk mengatur tombol masuk pada sign-in form
  • signup untuk penanganan formulir pendaftaran
  • me untuk menentukan tombol Me dalam layout

Dalam layout yang utama, dalam daftar menu utama, Anda dapat melihat atribut data-ng-controller dengan nilai HomeCtrl. Itu berarti bahwa ini menu dom elemen dapat berbagi scope dengan HomeCtrl. Ketika Anda mengklik tombol Pendaftaran dalam form, fungsi sign-up dalam controller file akan dieksekusi, dan dalam fungsi ini, Layanan pendaftaran digunakan dari layanan Main yang sudah inject dalam controller ini.

Struktur utama adalah view -> controller -> service. Layanan ini membuat request Ajax sederhana untuk back-end untuk mendapatkan data tertentu.

Pada kode diatas, Anda dapat melihat fungsi-fungsi layanan seperti membuat resuest untuk otentikasi. Di controller.js, Anda mungkin sudah menyadari bahwa ada fungsi seperti Main.me. Main service ini telah inject di controller, dan di controller, layanan milik layanan ini disebut secara langsung.

Fungsi ini yang hanya Ajax request sederhana untuk layanan kami yang kami digunakan bersama-sama. Jangan lupa untuk memasukkan URL layanan di baseUrl dalam kode di atas. Bila Anda mendeploy layanan Anda untuk Heroku, Anda akan mendapatkan layanan URL seperti appname.herokuapp.com. Pada kode di atas, Anda akan mengatur var baseUrl = "appname.herokuapp.com".

Di bagian pendaftaran atau sign in aplikasi, token pembawa menanggapi permintaan dan token ini disimpan ke local storage. Setiap kali Anda membuat permintaan untuk layanan di back-end, Anda harus menempatkan ini token dalam header. Anda dapat melakukan ini dengan menggunakan AngularJS interceptor.

Pada kode di atas, setiap permintaan diintercept dan header otorisasi dan nilai yang dimasukkan di header.

Dalam proyek front-end, kami memiliki beberapa halaman partial seperti signinsignupprofile details dan vb. Halaman ini sebagian terkait dengan controller tertentu. Anda dapat melihat hubungan langsung di app.js:

Seperti Anda dapat dengan mudah mengerti dalam kode di atas, ketika Anda pergi ke /, halaman home.html yang akan di-render. Contoh lain: jika Anda pergi ke /signup, signup.html akan di render. Operasi render ini akan dilakukan pada browser, bukan pada sisi server.

Kesimpulan

Anda dapat melihat bagaimana segala sesuatu yang kita bahas dalam tutorial ini bekerja dalam praktek dengan memeriksa demo kerja ini.

Sistem autentikasi berbasis token membantu Anda membangun sistem otentikasi / otorisasi saat Anda mengembangkan layanan klien-independen Dengan menggunakan teknologi ini, Anda hanya akan fokus pada Layanan (atau API).

Bagian otentikasi otorisasi yang akan ditangani oleh sistem otentikasi berbasis token sebagai lapisan di depan layanan Anda. Anda dapat mengakses dan menggunakan layanan dari klien seperti browser web, Android, iOS, atau desktop klien.

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.