យន្តការត្រួតពិនិត្យគឺជាដំណើរការត្រួតពិនិត្យមើលថា តើអ្នកចុះឈ្មោះចូលទៅកាន់ទំព័រគ្រប់គ្រង (dashboard) ពិតជាត្រូវបានចុះបញ្ជីរនៅក្នុងមូលដ្ឋានទិន្នន័យ MongoDB ដែរឬទេ។ ការត្រួតពិនិត្យគឹធ្វើឡើងដោយយក Email និងពាក្យសំងាត់របស់អ្នកចុះឈ្មោះទៅផ្ទៀងផ្ទាត់មើលនៅក្នុងមូលដ្ឋានទិន្នន័យ បើសិនពិតជាមាន អ្នកចុះឈ្មោះនឹងត្រូវអនុញ្ញាតិអោយចូលទៅកាន់ទំព័រគ្រប់គ្រង (dashboard) បើអត់មានទេ អ្នកនោះនឹងមិនត្រូវអនុញ្ញាតិអោយចូលទៅទំព័រគ្រប់គ្រង និងប្រាប់ពីកំហុសបណ្តាលមកពីខុស Email ឬខុសពាក្យសំងាត់។
យន្តការត្រួតពិនិត្យនេះទាមទារអោយយើងប្រើប្រាស់កញ្ចប់ JSON Web Token (JWT) មួយទៀត ក្នុងការរក្សាទុកនៅក្នុង browser នូវ ឈ្មោះ អត្តសញ្ញាណ និង តួនាទី របស់អ្នកដែលត្រូវបានផ្ទៀងផ្ទាត់ថាមានឈ្មោះនៅក្នុងមូលដ្ឋានទិន្នន័យរួចហើយ។ ឈ្មោះ អត្តសញ្ញាណ និង តួនាទី ទាំងនោះនឹងត្រូវកែអោយទៅជាកូដដែលមនុស្សមិនអាចមើលយល់ឬកែប្រែបាន មានតែកំព្យូទ័រដែលដឹងពីពាក្យសំងាត់របស់យើងតែប៉ុណ្ណោះ ដែលអាចបកប្រែកូដនោះអោយទៅជាអក្សរដើមវិញបាន។ លើសពីនេះទៀត កូដអាថ៌កំបាំងនោះនឹងត្រូវប្រើការលែងកើតនៅក្នុងរយៈពេលមួយដែលត្រូវបានកំណត់ដោយអ្នកសរសេរកម្មវិធីគេហទំព័រ។
ដូចនេះយើងចាំបាច់ត្រូវតំលើងកញ្ចប់ JSON Web Token (JWT) នៅក្នុងកម្មវិធីគេហទំព័ររបស់យើងដោយសរសេរនៅលើបង្អួច Terminal ថា៖
npm install jsonwebtoken
យើងអាចប្រើប្រាស់ក្បួនចុងផ្លូវឬ API Endpoint ណាមួយក្នុងការទទួលយក Email និងពាក្យសំងាត់របស់អ្នកចុះឈ្មោះ ទៅផ្ទៀងផ្ទាត់មើលជាមួយមូលដ្ឋានទិន្នន័យ MongoDB ។ ដោយហេតុថា យើងបានបង្កើតរួចមកហើយនូវក្បួនចុងផ្លូវឬ API Endpoint សំរាប់ផ្លូវ /login ដូចនេះយើងអាចកែតំរូវក្បួនចុងផ្លូវនេះសំរាប់យន្តការត្រួតពិនិត្យអ្នកចុះឈ្មោះ។ លើសពីនេះទៀត យើងត្រូវបង្កើតពាក្យសំងាត់មួយនៅក្នុងឯកសារ .env ទុកសំរាប់អោយកញ្ចប់ JWT យកទៅប្រើក្នុងការបង្កើតកូដអាថ៌កំបាំង និងបកប្រែកូដនោះមកជាភាសាសាមញ្ញវិញនៅពេលត្រូវការ។ ពាក្យសំងាត់នោះអាចត្រូវតាងដោយអថេរ SECRET_KEY ។
// src/pages/api/login.js
import bcrypt from "bcryptjs"
import jwt from "jsonwebtoken"
const SECRET_KEY = import.meta.env.SECRET_KEY
export async function POST({cookies, redirect, request, locals}){
const prisma = locals.prisma
const body = await request.json()
const user = await prisma.user.findUnique({ where: {email: body.email }})
if(user){
if(bcrypt.compareSync(body.password, user.password)){
const data = {userId: user.id, userRole: user.role, userName: user.title}
const token = jwt.sign(data, SECRET_KEY, {expiresIn: "12h"})
cookies.set("access_token", token, { httpOnly: true, path: "/"})
return redirect('/admin', 302)
}else{
const message = 'ពាក្យសំងាត់មិនត្រឹមត្រូវទេ'
return new Response(JSON.stringify(message))
}
}else{
const message = 'Email មិនត្រឹមត្រូវទេ'
return new Response(JSON.stringify(message))
}
}
ទន្ទឹមនឹងនេះ យើងក៏ត្រូវសរសេរកូដបន្ថែមមួយចំនួនទៀតនៅក្នុងទំព័រ login.astro ដើម្បីអាចចំលងយក Email និងពាក្យសំងាត់របស់អ្នកចុះឈ្មោះ និងបញ្ជូនវាទៅកាន់ក្បួនចុងផ្លូវ login.js សំរាប់ការផ្ទៀងផ្ទាត់។
<!--src/pages/login.astro-->
---
const result = ""
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>ទំព័រចូលក្នុង</title>
<link rel="icon" href="/images/siteLogo.png" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script is:inline src="/scripts/jquery.js"></script>
</head>
<body class="text-sm leading-normal bg-gray-300">
<section class="w-[300px] mx-auto mt-20 bg-white">
<div class="text-center bg-teal-600 text-white font-display text-base py-1">
ចុះឈ្មោះចូលទំព័រគ្រប់គ្រង
</div>
<form id="login" class="p-5" action="/api/login" method="post">
<input class="w-full border px-2 py-1 mb-2" value="guest@khmerweb.app"
type="email" name="email" required placeholder="Email"/>
<input class="w-full border px-2 py-1 mb-2" value="password"
type="password" name="password" required placeholder="ពាក្យសំងាត់"/>
<input class="w-full bg-gray-300 px-2 py-1"
type="submit" value="បញ្ជូន"/>
<div id="info" class="text-center pt-1">{result}</div>
</form>
</section>
<script>
$('#login').on( "submit", function(event){
event.preventDefault()
const email = $('#login input[name="email"]').val()
const password = $('#login input[name="password"]').val()
const response = fetch('/api/login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({password, email}),
redirect: 'follow'
}).then(response => {
if(response.redirected){
window.location.replace(response.url)
return
}
return response.json()
}).then(response => $('#login #info').html(response))
})
</script>
</body>
</html>
យ៉ាងណាម៉ិញ សំរាប់ប្រព័ន្ធ Netlify បើគ្មានតំណរភ្ជាប់ទៅកាន់មូលដ្ឋានទិន្នន័យ MongoDB និងពាក្យសំងាត់សំរាប់កញ្ចប់ JWT ទេ កម្មវិធីគេហទំព័ររបស់យើងនឹងមិនអាចដំណើរការនៅលើប្រព័ន្ធនេះបានឡើយ ពីព្រោះអ្វីៗដែលត្រូវបានកត់ត្រាទុកនៅក្នុងឯកសារ .env គឺសំរាប់ប្រើប្រាស់តែនៅក្នុងកំព្យូទ័រផ្ទាល់ខ្លួនតែប៉ុណ្ណោះ វានឹងមិនត្រូវបានចំលងទៅប្រព័ន្ធ GitHub ឬប្រព័ន្ធ Netlify ឡើយ។ តែមានវិធីមួយដែលអាចដោះស្រាយបញ្ហានេះបាន គឺយើងត្រូវចំលងយកពាក្យសំងាត់និងតំណរភ្ជាប់ទៅកាន់មូលដ្ឋានទិន្នន័យ MongoDB ទៅដាក់នៅលើប្រព័ន្ធ Netlify ដោយខ្លួនយើងផ្ទាល់តែម្តង។
នៅលើប្រព័ន្ធ Netlify យើងអាចចំលងយកពាក្យសំងាត់និងតំណរភ្ជាប់ទៅមូលដ្ឋានទិន្នន័យ ទៅដាក់នៅលើប្រព័ន្ធនោះបានដោយចុចលើកម្មវិធីគេហទំព័រដែលត្រូវការពាក្យសំងាត់និងតំណរភ្ជាប់នោះ រួចចុច Site configuration និងចុច Environment variables ចុច Add a variable ចុច Import from a .env file និងចំលងយកអ្វីៗទាំងអស់នៅក្នុងឯកសារ .env ទៅដាក់នៅកន្លែង Contents of .env file ចុងក្រោយបង្អស់ចុច Import variables ៕
