Authentication merupakan sebuah tindakan yang membuktikan sebuah pernyataan, seperti identitas penggunaan sistem. Otentikasi atau Authentication biasa kita temui pada sistem - sistem besar maupun aplikasi yang sudah kita gunakan setiap hari layaknya seperti aplikasi sosmed atau aplikasi jual beli. Pada artikel Adonis - Web Framework Yang Mirip Laravel saya sempat menjanjikan sebuah tutorial mengenai pengenalan modul otentikasi, untuk melanjutkan artikel tersebut maka saya akan membagikan sebuah materi mengenai modul basic authentication yang terdapat pada adonis js.
Pendahuluan
Secara default jika anda menginstall adonis dengan menggunakan opsi fullstack
atau api
maka anda tidak perlu menginstall paket tambahan, namun diluar kedua opsi tersebut maka anda perlu menambahkan paket ini sebelum melanjutkan materi ini.
// Jika menggunakan adonis-cli
adonis install @adonisjs/auth
// Jika menggunakan npm
npm install @adonisjs/auth --save
Mendaftarkan Provider dan Middleware
Setelah paket telah terpasang, langkah selanjutnya tambahkan beberapa line pada file start/app.js
const providers = [
'@adonisjs/auth/providers/AuthProvider'
]
Dalam keadaan default anda dapat menggunakan middleware yang telah disediakan pada paket ini, namun dalam beberapa kasus penggunakan middleware yang disediakan pada paket ini hanya digunakan untuk mengecek otentikasi dan anda mungkin tidak dapat menambahkan beberapa aksi jika otentikasi tidak berhasil.
const globalMiddleware = [
'Adonis/Middleware/AuthInit'
]
const namedMiddleware = {
auth: 'Adonis/Middleware/Auth'
}
Persiapan Basis Data
Setelah paket telah disiapkan dan di konfigurasi dengan benar, langkah selanjutnya adalah melakukan persiapan pada basis data yang akan digunakan untuk menampung data - data termasuk data untuk melakukan otentikasi, pada umumnya pengguna sistem akan mendapatkan sebuah identitas yang memerlukan kata sandi untuk mengakses sebuah sistem. Anggap saja identitas berupa username, password dan email telah tersimpan pada tabel users
.
Pada adonisjs file migration dan model yang berkaitan dengan tabel users
sudah dibuatkan pada direktori App/Models
dan databases/migrations
, sehingga anda hanya perlu menyesuaikan dengan kebutuhan sistem yang akan anda buat.
Migration
File - file yang terdapat pada direktori databases/migrations
merupakan file yang digunakan untuk mendefinisikan sebuah tabel pada basis data, pada file - file tersebut anda dapat menspesifikasikan operasi yang ingin dijalankan apakah file tersebut digunakan untuk membuat sebuah tabel, mengubah tabel atau bahkan menghapus tabel. Anda dapat membaca dokumentasi lengkap migrations pada situs adonis.
Model
File - file yang terdapat pada direktori App/Models
merupakan file yang digunakan untuk mendefinisikan sebuah tabel untuk melakukan operasi pada basis data, file - file ini akan menghubungkan metode yang anda buat dalam serangkaian kode ke basis data dalam method yang singkat. Anda dapat membaca dokumentasi lengkap model pada dokumentasi Lucid pada situs adonis.
Konfigurasi File Environment
Setelah anda memahami kedua hal tersebut maka lakukan konfigurasi pada file environment yang ada pada root project adonis anda, file ini bernama .env
dan contoh penggunaan file environment terletak pada file bernama .env.example
HOST=127.0.0.1
PORT=3333
NODE_ENV=development
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=NFjrourcMfNJXGGeRVdfrUmWOcKQv6M2
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=123456
DB_DATABASE=qa_adonis
SESSION_DRIVER=cookie
HASH_DRIVER=bcrypt
Ada beberapa variabel yang harus anda ganti sesuai dengan lingkungan perangkat yang anda gunakan yaitu :
- DB_CONNECTION untuk mengatur koneksi database yang digunakan apakah menggunakan mysql, sqlite, redis dan database lainnya yang didukung adonisjs.
- DB_USER untuk mengatur user yang digunakan untuk mengakses database.
- DB_PASSWORD untuk mengatur kata sandi dari user yang telah digunakan pada variabel DB_USER.
- DB_DATABASE untuk mengatur nama database yang akan digunakan sistem.
Adapun aturan - aturan lain dapat anda temukan pada dokumentasi berikut.
Menambahkan Database Driver
AdonisJS tidak memasukkan database driver secara default sehingga anda perlu menambahkan driver secara manual, anda dapat menambahkan driver tersebut dengan menggunakan npm. Adapun database yang didukung oleh adonis adalah sebagai berikut :
- PostgreSQL (pg)
- MySQL {mysql / mysql2)
- SQLite3 (sqite3)
- MariaDB (mariasql)
- Oracle (oracledb / strong-oracle)
- MSSQL (mssql)
Membuat Seeder
Untuk memastikan apakah database dapat berjalan pada adonis, maka anda perlu membuat seeder untuk mencoba memasukkan sebuah data ke dalam tabel pada basis data yang anda buat. Sebelum membuat seeder pastikan lakukan migration terlebih dahulu dan membuat file seeder menggunakan adonis-cli.
// Menjalankan migrasi untuk membuat tabel pada basis data
adonis migration:run
// Membuat seeder dengan nama file UserSeeder.js
adonis make:seed UserSeeder
Untuk menjalankan seeder saya akan menggunakan Hash untuk mengenskripsi password, database sebagai query builder dan moment untuk memasukkan tanggal pada tabel created_at
dan updated_at
const Factory = use("Factory");
const Hash = use("Hash");
const Database = use("Database");
const Moment = use("moment");
class UserSeeder {
async run() {
const user = await Database.table("users").insert({
username: "admin",
email: "[email protected]",
password: await Hash.make("admin1234"),
updated_at: await Moment().format("YYYY-MM-DD"),
created_at: await Moment().format("YYYY-MM-DD")
});
console.log(user);
}
}
Pada kode tersebut saya menggunakan query builder untuk memasukkan data username, email, password, created_at dan updated_at pada tabel users, penggunaan console.log()
hanya bertujuan untuk mengecek apakah data telah dimasukkan ke tabel atau tidak. Untuk menjalankan seeder ini saya hanya perlu mengetikkan adonis seed
dan setelah anda mendapati pesan seeded database maka data berhasil di simpan pada tabel dan adonis dapat kita simpulkan terhubung dengan basis data.
Membuat Controller
Dalam keadaan default adonis js telah menyediakan file model users dan migration untuk membuat tabel user, pada langkah ini kita akan membuat controller untuk proses otentikasi ini. Controller merupakan sebuah file yang memuat kumpulan method yang berisikan perintah atau logic untuk memproses data yang di terima oleh sistem, seluruh proses akan terjadi pada controller jika pengguna mengaksesnya melalui url yang didaftarkan pada route.
Pada pembuatan otentikasi akan dibutuhkan sebuah controller dengan beberapa method untuk menjalankan otentikasi ini, adapun yang akan dibuat akan meliputi :
- Membuat halaman yang berisikan form login
- Proses login atau membuat sesi login baru pada web.
- Proses pengguna untuk mengetahui apakah pengguna telah login pada web.
- Proses logout atau menghapus sesi login pada web
Untuk membuat file controller anda dapat menggunakan perintah adonis make:controller Auth
dan dengan menggunakan perintah tersebut pada command line atau terminal maka file AuthController.js
akan terbuat secara otomatis pada direktori App/Controllers/Http
.
Membuat halaman login
Langkah pertama kita akan membuat sebuah method bernama loginForm untuk menampilkan halaman login, pada tahap ini kita hanya membutuhkan sebuah fungsi bernama view
untuk merender atau menampilkan halaman login.
async loginForm({ view }) {
return view.render("auth.login");
}
Membuat proses login
Langkah kedua kita akan membuat sebuah method bernama login untuk memproses request yang dikirimkan oleh pengguna untuk melakukan login pada web. Pada tahap ini kita akan membutuhkan sebuah fungsi request
untuk mendapatkan value request yang dikirim pengguna, fungsi auth
untuk menjalankan proses otentikasi dan fungsi response
untuk mengirimkan respon ke pengguna.
async login({ request, auth, response }) {
const { username, password } = request.all();
await auth.attempt(username, password);
return response.route("auth.check");
}
Adapun penjelasan dari baris tersebut yaitu :
- Baris ke - 2 : berfungsi untuk membuat sebuah konstanta bernama
username
danpassword
- Baris ke - 3 : berfungsi untuk melakukan aksi otentikasi berdasarkan value dari konstanta
username
danpassword
- Baris ke - 4 : berfungsi untuk mengembalikan value berupa response untuk melakukan redirect atau pengalihan halaman ke route bernama
auth.check
Membuat halaman pengguna
Langkah ketiga kita akan membuat sebuah method bernama account untuk menampilkan halaman pengguna, pada tahap ini kita hanya membutuhkan fungsi view
untuk menampilkan halaman tersebut.
async account({ view }) {
return view.render("auth.account");
}
Membuat proses logout
Langkah terakhir kita akan membuat sebuah method bernama logout untuk menghapus sesi yang tersimpan pada web, pada tahap ini kita akan membutuhkan fungsi auth
dan response
.
async logout({ auth, response }) {
await auth.logout();
return response.route("auth.loginForm");
}
Pada proses ini controller akan menghapus sesi login yang dibuat oleh pengguna dan akan memberikan response dalam bentuk redirect ke route bernama auth.loginForm
.
Membuat Middleware
Setelah controller telah selesai dibuat, selanjutnya kita perlu membuat sebuah middleware yang berguna untuk membatasi pengguna dalam mengakses sebuah halaman. Biasanya middleware dibuat untuk memberikan batasan agar pengguna yang belum melakukan login tidak dapat mengakses halaman pengaturan maupun profilenya. Cara membuat middleware dengan menggunakan addonis cli hanyalah memanggil perintah adonis make:middleware Auth
untuk membuat file bernama Auth.js
pada direktori App/Middleware
, pada middleware kita akan menggunakan fungsi auth
untuk mengecek sesi pengguna.
class Auth {
/**
* @param {object} ctx
* @param {Request} ctx.request
* @param {Function} next
*/
async handle({ response, auth }, next) {
// call next to advance the request
try {
await auth.check();
// Jika user telah melakukan login, halaman ditampilkan
await next();
} catch (err) {
// Jika user belum melakukan login, user diarahkan pada halaman login
return response.route("auth.loginForm");
}
}
}
Mendaftarkan Route
Pada tahap ini kita akan membuat sebuah route yang berguna untuk membuat alamat URL yang nantinya diakses oleh pengguna melalui web browser, pada pembuatan route kita akan lebih sering mendefinisikan sebuah controller dan middleware karena pengaplikasi middleware sangat efektif dilakukan pada route.
Anda dapat membuat route pada routes.js
pada direktori start
"use strict";
/*
|--------------------------------------------------------------------------
| Routes
|--------------------------------------------------------------------------
|
| Http routes are entry points to your web application. You can create
| routes for different URL's and bind Controller actions to them.
|
| A complete guide on routing is available here.
| http://adonisjs.com/docs/4.1/routing
|
*/
/** @type {typeof import('@adonisjs/framework/src/Route/Manager')} */
const Route = use("Route");
Route.on("/").render("welcome");
// Membuat route group dengan prefix auth
Route.group(function() {
// Method get hanya akan berfungsi pada jenis permintaan GET
Route.get("login", "AuthController.loginForm").as("auth.loginForm");
Route.get("/", "AuthController.account")
.as("auth.account")
.middleware("auth");
// Method post hanya akan berfungsi pada jenis permintaan POST
Route.post("logout", "AuthController.logout")
.as("auth.logout")
.middleware("auth");
Route.post("login", "AuthController.login").as("auth.login");
}).prefix("auth");
Membuat View
Pada materi ini terdapat dua method pada controller yang melakukan render halaman atau menampilkan sebuah halaman, karena adonis menggunakan konsep MVC maka kita perlu menambahkan view untuk menampilkan halaman. Kita akan membuat sebuah file bernama account.edge
dan login.edge
pada direktori resources/views/auth
login.edge
View ini berfungsi untuk membuat sebuah form berisikan input username dan password, adapun code yang saya gunakan untuk membuat sebuah tampilan view login.edge adalah sebagai berikut :
<form action="{{ route('auth.login') }}" method="post">
{{ csrfField() }}
<div>
<label for="username">Username :</label>
<input type="text" name="username" placeholder="Masukkan Username" />
</div>
<div>
<label for="password">Password :</label>
<input type="password" name="password" placeholder="Masukkan Password" />
</div>
<button type="submit">Login</button>
</form>
account.edge
View ini berfungsi untuk menampilkan halaman account yang berisikan tulisan anda berhasil login dan satu form dengan tombol keluar sekarang sebagai fungsi untuk melakukan logout, adapun code yang saya gunakan untuk membuat tampilan tersebut yaitu :
<p>Anda berhasil login, ingin keluar ?</p>
<form action="{{ route('auth.logout') }}" method="post">
{{ csrfField() }}
<button type="submit">Keluar Sekarang</button>
</form>
Ingin mencoba ?
Jika anda ingin mencoba materi ini anda dapat mengunjungi repository qa_adonis di akun github saya pada perubahan atau commit bernama (9bee47b) Update: Basic Authentication.
Github Repo : https://github.com/ambrizals/qa_adonis
Related Commit : https://github.com/ambrizals/qa_adonis/commit/9bee47b139f6063486a34d03496824da83d6bb53
Cover Icon : Rawpixel by Freepik.com