AdonisJS: Pengenalan Modul Basic Authentication

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 :

1. DB_CONNECTION untuk mengatur koneksi database yang digunakan apakah menggunakan mysql, sqlite, redis dan database lainnya yang didukung adonisjs.
2. DB_USER untuk mengatur user yang digunakan untuk mengakses database.
3. DB_PASSWORD untuk mengatur kata sandi dari user yang telah digunakan pada variabel DB_USER.
4. 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 :

1. PostgreSQL (pg)
2. MySQL {mysql / mysql2)
3. SQLite3 (sqite3)
4. MariaDB (mariasql)
5. Oracle (oracledb / strong-oracle)
6. 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 :

1. Membuat halaman yang berisikan form login
2. Proses login atau membuat sesi login baru pada web.
3. Proses pengguna untuk mengetahui apakah pengguna telah login pada web.
4. 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 :

1. Baris ke - 2 : berfungsi untuk membuat sebuah konstanta bernama username dan password
2. Baris ke - 3 : berfungsi untuk melakukan aksi otentikasi berdasarkan value dari konstanta username dan password
3. 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