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: "admin@localhost.com", 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. ![hasil-cli-seeder](https://cbs.ambrizal.net/posts/adonis_basicauth_img2.png) ## 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````. ![contoh-kode-keseluruhan](https://cbs.ambrizal.net/posts/adonis_basicauth_img3.png) ## 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 : ```````````` ```````````` ### 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 : ````````````

Anda berhasil login, ingin keluar ?

```````````` ## Ingin mencoba ? Jika anda ingin mencoba materi ini anda dapat mengunjungi repository [qa\_adonis](https://github.com/ambrizals/qa_adonis) di akun github saya pada perubahan atau commit bernama (9bee47b) [Update: Basic Authentication](https://github.com/ambrizals/qa_adonis/commit/9bee47b139f6063486a34d03496824da83d6bb53). ![contoh-hasil-jadi](https://cbs.ambrizal.net/posts/adonis_basicauth_img4.png) Github Repo : [https://github.com/ambrizals/qa\_adonis](https://github.com/ambrizals/qa_adonis) Related Commit : [https://github.com/ambrizals/qa\_adonis/commit/9bee47b139f6063486a34d03496824da83d6bb53](https://github.com/ambrizals/qa_adonis/commit/9bee47b139f6063486a34d03496824da83d6bb53) Cover Icon : [Rawpixel by Freepik.com](https://www.freepik.com/free-photos-vectors/icon)

AdonisJS: Pengenalan Modul Basic Authentication