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

Menggunakan Passport dengan Sequelize dan MySQL

by
Read Time:18 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Sequelize adalah ORM Node.js yang berbasis promise. Ini bisa digunakan dengan PostgreSQL, MySQL, MariaDB, SQLite, dan MSSQL. Dalam tutorial ini, kita akan mengimplementasikan otentikasi untuk pengguna dengan aplikasi situs. Dan kita akan menggunakan Passport, otentikasi yang populer dengan node, bersama dengan Sequelize dan MySQL untuk mengimplementasikan registrasi dan login pengguna.

Memulai

Pastikan kamu telah memiliki hal di bawah ini terpasang:

  • Node
  • MySQL

Di tutorial ini, kita akan menggunakan Node.js bersama dengan Express, mari lanjut ke memasang yang kita butuhkan.

Tahap 1: Membuat berkas package.json

Membuat direktori untuk aplikasimu. Di dalam direktori tersebut, jalankanlah memalui terminal atau command prompt:

Ini akan memunculkan npm Dependency Manager. Ini akan menghadirkan serangkain perinta yang bisa digunakan secara cepat.

  • Tulis dari nama aplikasimu tanpa spasi dan tekan Enter untuk 'name'
  • Tekan Enter untuk 'version'
  • Untuk 'description', di tutorial ini kita akan menulis "menggunakan passport dengan Sequelize and MySQL" sebagai deskripsi dan tekan Enter. Ini juga bisa dibiarkan kosong.
  • Untuk 'entry point (index.js)' ketik server.js dan tekan Enter.
  • Untuk 'text commnad', tekan Enter
  • Untuk 'git repository', kamu bisa memasukkan git repo di mana aplikasimu berada. Jika kamu hanya memiliki satu maka biarkan saja kosong dan tekan Enter.
  • Untuk 'keywords', tekan Enter.
  • Untuk 'author', tekan Enter atau ketik nama.
  • Untuk 'license' tekan Enter.
  • Untuk '(Is this okay)', dia menampilkan paket jsonmu akan terlihat seperti apa. Ketik Yes dan tekan Enter.

Tahap 2: Memasang Dependensi.

Dependensi utama dari tutorial ini adalah:

  • Express
  • Sequelize
  • MySQL
  • Passport
  • Passport Local Strategy
  • Body Parser
  • Express Session
  • Bcrypt Nodejs
  • Express Handlebars for the views

Untuk memasangnya, dari terminal atau command prompt jalan kode di bawah ini satu persatu.

Jika kamu menggunakan Git di proyek ini:

Di dalam folder proyek buat sebuah berkas .gitignore

Tambahkan baris berikut ke berkas .gitignore.

node_modules

Tahap 3: Mempersiapkan Aplikasi

Sekarang, kita akan membuat berkas server. Ini akan menjadi berkas utama yang dipanggil ketika kamu mengetik berikut:

Akan menjalankan aplikasinya. Kamu juga bisa menjalankan aplikasi dengan mengetik node server.js.

Lalu, dalam folder proyek, kita membuat berkas baru dan dinamai server.js

Di dalam berkas server.js, kita akan memasukkan berikut:

Baris pertama memasukkan modul ekspres ke variabel ekspres. Lalu kita memunculkan expres dan memberi nama variabel: app.

Lalu, buat aplikasi mendengarkan port 5000. Kamu bisa memilih nomor port manapun di komputermu.

Sekarang panggil app.get() express routing function yang akan memberi respon dengan "Welcome to Passport With Sequelize" ketika permintaan GET dbuat ke "/".

Untuk mengetesnya di komputermu, jalankan ini dari dalam folder proyekmu:

Jika kamu melihat teks "Welcome to Passport with Sequelize" saat mengunjungi https://localhost:5000/ maka selamat. Jika tidak, pastikan kamu telah menyelesaikan semua sesuai yang tertulis di atas.

Lalu, impor modul yang ktia perlukan seperti passport, express-session dan body-parser.

Setelah var app = express() kita tambahkan baris berikut:

Di dua baris pertama, kita mengimpor modul passport dan express-session, keduanya kita butuh untuk mengurus otentikasi.

Lalu, kita impor modul body-parser. Ini mengambil seluruh bagian dari permintaan yang datang dan mengeksposnya dalam format yang lebih mudah untuk dikerjakan. Dalam kasus ini, kita menggunakan format JSON.

Untuk membuat aplikasi kita memiliki body parser, kita menambahkan baris beberapa spasi di bawah baris impor:

Lalu, kita menjalankan passport dan express session dan menambahkan mereka sebagai middleware. kita melakukannya dengan menambah beberapa baris setelah baris impor body parser.

Kita akan mulai bekerja pada otentikasi yang sebenarnya sekarang.

Kita akan melakukannya dalam empat langkah:

  • Menyiapkan Sequelize dengan MySQL
  • Membuat model user.
  • Menyiapkan views.
  • Menulis passport strategy.

1. Menyiapkan Sequelize dengan MySQL

Pertama, buat sebuah database di MySQL. Beri nama yang diinginkan. Untuk tutorial ini, mari buat database dengan nama sequelize_passport di MySQL.

Lalu atur konfigurasi to menghandle detil dari DB

Pertama, impor modul dot-env untuk mengatur envrionment variable.

Jalankan ini dari root folder proyekmu:

Lalu, impor ke berkas server utama, sever.js, di bawah impor-impor yang lain.

Lalu, buat sebuah berkas di folder proyek dengan nama .env.

Langkah berikut opsional jika kamu tidak menggunakan Git:

Kita akan menambahkan berkas .env ke berkas .gitignore mu.

Berkas .gitignore mu harusnya tampak seperti berikut:

Lalu, kita menambahkah environment ke berkas .env dengan menambahkan baris berikut:

NODE_ENV='development'

Lalu kita membuat berkas config.json yang akan digunakan Sequelize to mengatur environments yang berbeda-beda.

Hal pertama yang harus dilakukan adalah membuat sebuah folder bernama config di folder proyek. Di dalam folder, kita membuat sebuah berkas config.json. Berkas ini harus ditolak jika kamu mendorong ke repositori. Untuk melakukannya, kita menambahkan kode berikut ke .gitignore:

config/config.json

Lalu, salin kode berikut ke berkasconfig.json:

Jangan lupa mengganti nilai di blok development dengan detil otentikasi database.

Lalu, pasang sequelize dengan npm. Untuk melakukannya jalan kode berikut di folder proyek:

Sekarang waktunya untuk membuat folder models.

Pertama, kita membuat direktori bernama app di folder proyek.

Di dalam folder app, kita membuat sebuah folder baru bernama models dan membuat sebuah berkas baru bernama index.js di dalam folder models.

Di dalam berkas index.js, salin kode berikut.

Berkas ini digunakan untuk mengimpor semua models yang ditempatkan di folder models dan mengekspornya.

Untuk mengetesnya, kita memasukkan ini ke berkas server.js.

Di sini, kita mengimpor models, dan memanggil fungsi sinkronisasi Sequelize.

Jalankan ini untuk melihat apakah berjalan lancar.]:

Jika kamu mendapat pesan "Site is live Nice! Database looks fine", maka kamu telah menyiapkan Sequelize dengan benar.

Jika tidak, kembali dengan hati-hati dan coba debug isu dengan help.

2. Membuat user model.

Hal selanjutnya yang akan kita buat adalah user model, yang pada dasarnmya adalah user table. INi akan berisi data dasar pengguna.

Di dalam folder models, buat berkas bernama user.js. Path lengkapnya harus seperti app/models/user.js.

Buka berkas user.js dan masukkan kdoe berikut:

Sekarang jalankan:

Harusnya kamu melihat pesan "Site is live. Nice! Database looks fine". Ini berarti model Sequelize telah disinkronisasikan dengan sempurna, dan jika kamu cek database kamu bisa melihat user table dengan kolom yang telah hadir.

3. Menyiapkan Views

Pertama mari buat view untuk mendaftar.

Ha; pertama yang dilakukan adalah mengimpor modul express handlebars yang digunakan untuk view di tutorial ini.

Tambahkan baris berijut ke berkas server.js.

var exphbs = require('express-handlebars')

Pada titik ini harusnya blok impormu tampak seperti ini.

Lalu, kita tambahkan baris berikut ke berkas server.js.

Sekarang, di folder aplikasi, kita buat tiga folder bernama views, controllers, dan routes.

Dalam folder views, kita buat sebuah folder bernama signup.hbs dan salin kode berikut.

Lalu di folder controllers, buat sebuah berkas baru dan beri nama authcontroller.js.

Dalam berkas ini, kita salin controller berikut untuk route signup yang akan kita buat nanti.

Lalu, kita buat sebuah route untuk signup. Dalam folder routes, kita buat sebuah berkas dengan nama auth.js dan dalam berkas tersebut kita impor auth controller dan menentuka signup route nya.

Sekarang, kita akan mengimpor route ke server.js dan melewatkan aplikasi sebagai argumen.

Di server, setelah impor models, tambahkan baris berikut:

Jalankan ini:

Sekarang kunjugi http://localhost:5000/signup dan kamu akan melihat form pendaftaran.

Ulangi tahapan untuk formulir sign in. Kita akan membuat berkas signin,hbs di dalam folder views dan menyalin kode berikut ke dalamnya.

Lalu, tambahkan controller untuk sign in di app/controllers/authcontroller.js.

Lalu, dalam app/routes/auth.js, tambahkan route sign in seperti berikut

app.get('/signin', authController.signin);

Sekarang saat kamu jalankan:

Dan mengunjungi http://localhost:5000/signin/, kamu harusnya melihat formulir sign in.

Tahap final dan utama adalah menulis passport strategy.

4. Menulis Passport Strategy

Di app/config, buat sebuah folder baru bernama passport.

Lalu, di dalam folder baru app/config/passport, buat sebuah berkas baru bernama passport.js. Berkas ini akan berisi passport strategy.

Di dalam passport.js, kita akan menggunakan user model dan passport.

Pertama, impor bcrypt yang kita butuh untuk menjaga password:

var bCrypt = require('bcrypt-nodejs');

Lalu, tambahkan module.exports seperti berikut:

Dalam blok ini, kita memulai passport local strategy, dan user model, yang akan dillewati sebgai argumen. Ini cara melakukannya:

Lalu kita tentukan strategi dengan contoh kita dengan berkas LocalStrategy seperti ini:

Sekarang kita telah menyatakan request fields kita yaitu dan usernameField dan passwordField.

Variabel terakhir, passReqToCallback, mengizinkan kita untuk melewati seluruh permintaan panggilan kembali, yang sangat berguna untuk sign up.

Setelah koma terakhir, kita tambahkan fungsi callback.

Di fungsi ini, kita menghandle penyimpanan detil pengguna.

Pertama, kita menambahkan fungsi pembuat hashed password di dalam fungsi callback.

Lalu, gunakan Sequelize user model yang kita mulai sebelumnya sebagai User, kita cek untuk melihat apakah user benar-benar ada, dan jika tidak kita tambahkan.

User.create() adalah metode Sequelize untuk menambahkan entri baru ke database. Perhatikan bahwa nilai di data object didapat dari req.body yang mengandung masukkan dari formulir pendaftaran.

passport.js mu harusnya terlihat seperti berikut:

Sekarang kita akan mengimpor strategy di server.js.

Untuk melakukannya, kita tambahkan baris berikut di bawah impor routes di server.js.

server.js mu harusnya terlihat seperti ini sekarang:

Sekarang kita akan menerapkan strategy untuk /signup route.

Cara nya adalah:

Pertama, ke app/routes/auth,js tambahkan route untuk memosting ke signup seperti ini:

Karena kita butuh passport, kita harus melewatkannya ke metode ini. Kita bisa mengimpor passport di skrip ini atau melewatinya ke server.js. Mari lakukan yang kedua.

Ubah fungsi yang diekspor di app/routes/auth.js untuk memiliki passport sebagai parameter. Kode di app/routes/auth.js harus terlihat seperti ini sekarang:

Lalu di server.js kita ubah routes import dan tambahkan passport sebagai argumen seperti ini:

var authRoute = require('./app/routes/auth.js')(app,passport);

Lalu pergi ke  http://localhost:5000/signup/ dan coba untuk mendaftar.

Saat kamu mendaftar kamu akan mendapat error "Failed to serialize user into session". Ini karena passport menyimpan user ID di sesi dan menggunakannya untuk mengatur data pengguna ketika dibutuhkan

Untuk memperbaikinya, kita akan mengimplementasikan baik serialize dan deserialize di passport dalam app/config/passport/passport.js.

Pertama, kita tambahkan fungsi serialize. Fungsi ini akan menyimpan user id ke sesi.

Untuk melakukannya, ktia tambahkan baris berikut ke inisialisasi di local strategy.

Lalu, kita implementasikan fungsi deserialisasi. Tambahkan fungsi ini dibawah fungsi serialisasi.

Dalam fungsi deserialisasi di atas kita menggunakan premis findById Sequelize untuk mendapatkan pengguna dan berhasil. Sebuah contoh dari Sequelize dikembalikan. Untuk mendapatkan USer object dari contoh ini, kita akan menggunakan fungsi getter Sequelize sepertiL: user.get()

Lalu, jalankan lagi:

Setelah berusaha mendaftar. Jika kamu mendpat pesan "Cannot Get /dashboard" itu artinya otentikasi berhasil. Ingat, kita dialihkan ke /dashboard di passport.authenticate di routes/auth.js

Sekarang maju dan tambahkan route. Lalu, tambahkan middleware sehingga laman hanya bisa diakses ketika pengguna masuk ke sesi.

Di folder app/folder, buat sebuah berkas bernama dashboard.hbs dan tambah kode berikut.

Di routes/auth.js, tambahkan baris di dalam block module.exports:

app.get('/dashboard',authController.dashboard);

Lalu ke app/controllers/authController.js dan tambahkan dashboard cotroller.

AuthController.js harusnya terlihat seperti berikut:

Jalankan aplikasi lagi, dan daftar dengan email yang berbeda. Kamu akan dialihkan ke route /dashboard.

Tapi /dashboard bukanlah route yang terlindungi, yang berarti bahkan yang tidak masuk bisa melihatnya. Kita tidak ingin ini sehingga kita menambahkan /logout route untuk mengeluarkan pengguna, lalu melindungi route dan tes yang telah kita kerjakan.

Mari kita lakukan:

Dalam routes/auth.js tambahkan baris berikut:

app.get('/logout',authController.logout);

Lalu tambahkan controller di app/controllers/authControllers.js.

Jalankan aplikasi kembalu dan daftar dengan email yang berbeda.

Lalu kunjungi untuk  http://localhost:5000/logout log out pengguna dan sekarang kunjungi http://localhost:5000/dashboard.

Kamu akan lihat itu bisa terakses sedikit. Mari tambahkan middleware untuk melindunginya.

Caranya, buka app/routes/auth.js dan tambahkan fungsi ini ke module.exports, di bawah semua kode.

Lalu ubah handler route dashboard menjadi seperti ini:

app.get('/dashboard',isLoggedIn, authController.dashboard);

Sekarang saat kamu mengunjungi aplikasi lagi untuk mengunjungi dashboard dan kamu tidak masuk, kamu kan diarahkan ke halaman login.

Ini waktunya untuk menerapkan bagian akhir: sign-in

Pertama, buat sebuah local strategy baru untuk sign-in di app/config/passport/passport.js.

Dalam strategi ini, isValidPassword adalah fungsi pembanding password yang dimasukka dengan metode perbandingan bCrypt karena password disimpan dalam bCrypt.

Jika detilnya benar, pengguna akan masuk.

Sekarang ke routes/auth.js tambahkan route untuk posting di /signin

Routes/auth,js harus terlihat seperti ini:

Sekarang jalankan aplikasi dan coba untuk masuk. Kamu harusnya bisa masuk dengan detil apapun yang digunakan ketika mendaftar, dan kamu akan dialihkan ke http://localhost:5000/dashboard/.

Selamat jika kamu berhasil! Kamu telah mampu menggunakan Sequelize dan Passport dengan database MySQL.

Kode lengkap dari tutorial ini bisa ditemukan di GitHub.

Kesimpulan

Ini menjadi kesimpulan dari tutorial menggunakan Passport untuk otentikasi pengguna dengan Sequelize dan MySQL. Sequelize sangat berguna bersama MySQL ketika menggunakan node. Saya merasa ini berguna, dan kamu akan mempertimbangkannya di aplikasi Node-MySQL berikutnya.

Referensi

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.