Node.js සිංහලෙන් ඉගෙන ගමු - පාඩම් මාලාව 6
මෙම පාඩමෙන් අපේ Website එකේ Registration හා Login ක්‍රියාවලිය සකසා ගමු. මේ සදහා පළමුව ArticlesPage.html නමින් Webpage එකක් public Folder එක තුල සකසාගමු. User කෙනෙක් Website එකට Log වීමෙන් අනතුරුව ArticlesPage.html එක පෙන්වීම සිදුවේ.එම සකසාගත් ArticlesPage.html Webpage එකට පහත Code එක අතුලත් කරන්න. මෙහිදී කිසිවක් සිදුනොවන අතර, Articles ලෙස Webpage එකෙහි Title එක පමනක් පෙන්වයි.
<!DOCTYPE html>
<html>
<head>
<link href="assets/css/bulma.min.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet" />
<script src="assets/js/scripts.js" type="text/javascript"></script>
<title>My Blog</title>
</head>
<body onload="checkLogin()">
<div class="box flex-wrap">
<h1 class="subtitle is-1">My Blog</h1>
</div>
<div class="columns">
<div class="column has-text-centered">
<h3 class="title is-3">Articles</h3>
</div>
</div>
</body>
</html>
දැන් මෙම Webpage එක ලබාගැනීම සදහා server.js එකේ Endpoint එකක් පහත ආකාරයට සාදාගමු.
app.get("/home", (request, response) => {
response.sendFile(path.join(__dirname, "/public/ArticlesPage.html"));
});
function register() {
var registerName = document.getElementById("reg_name").value;
var registerEmail = document.getElementById("reg_email").value;
var registerPassword = document.getElementById("reg_password").value;
var registerUserDetails = {
"name": registerName,
"email": registerEmail,
"password": registerPassword
};
var registerRequest = new XMLHttpRequest();
registerRequest.onreadystatechange = function() {
if(registerRequest.readyState === XMLHttpRequest.DONE) {
var status = registerRequest.status;
if (status === 0 || (status >= 200 && status < 400)) {
alert("Successfully Registered. Login to your account now.");
onLoginClick();
} else {
alert("Registration Failed");
}
}
}
registerRequest.open("POST", "http://localhost:3000/register", true);
registerRequest.setRequestHeader("Content-Type", "application/json");
registerRequest.send(JSON.stringify(registerUserDetails));
}
function login() {
var loginEmail = document.getElementById("login_email").value;
var loginPassword = document.getElementById("login_password").value;
var loginUserDetails = {
"email": loginEmail,
"password": loginPassword
};
var loignRequest = new XMLHttpRequest();
loignRequest.onreadystatechange = function() {
if(loignRequest.readyState === XMLHttpRequest.DONE) {
var status = loignRequest.status;
if (status === 0 || (status >= 200 && status < 400)) {
var response = JSON.parse(loignRequest.response);
saveLoggedInUser(response["data"]["email"]);
alert("Successfully LoggedIn");
goToArticlesPage();
} else {
alert("Login Failed");
}
}
}
loignRequest.open("POST", "http://localhost:3000/login", true);
loignRequest.setRequestHeader("Content-Type", "application/json");
loignRequest.send(JSON.stringify(loginUserDetails));
}
function saveLoggedInUser(identifier) {
localStorage.setItem("login_id", identifier);
}
function getLoggedInUserIdentifier() {
return localStorage.getItem("login_id");
}
function goToArticlesPage() {
if ((getLoggedInUserIdentifier() != undefined) || (getLoggedInUserIdentifier() != null)) {
window.location.href = "http://localhost:3000/home";
}
}අපි බලමු මෙහිදී සිදුවන්නේ කුමක්ද කියා. පලමුව register() Function එක තුලදී Registration Form එකෙහි ඇති නම, Email ලිපිනය හා Password එක කියවා ගැනීම සිදුවේ. ඉන්පසුව එවා භාවිතයෙන් registerUserDetails නම් JSON Object එක සාදාගනී. අපි Server එක JSON POST Request සමග ක්‍රියාත්මක වීමට සකසා ගන්නා නිසා Registration දත්ත JSON Object එකක් බවට පරිවරිතනය කිරීම අනිවාර්ය වේ. ඉන්පසුව එම දත්ත යැවීම සඳහා XMLHttpRequest එකක් සාදාගැනීම සිදුකරනු ලබයි. එම Request එකට අදාල Response එකේදී සිදුවිය යුත්තේ කුමක්ද කියා onreadystatechange හිදී සඳහන් කරනු ලබයි. මෙහිදී අපි පැමිනෙන Response එක සාර්ථක එකක් නම් User, LoginPage.html වෙත ගෙනයනු ලබයි. නමුත් Response එක අසාර්ථක එකක් නම් ඒ බව User ට alert එකක් භාවිතයෙන් දැනුම් දෙයි. XMLHttpRequest එකෙහි open Function එක භාවිතා කර එම Request එක POST Request බවත් Request එක ගමන් කලයුත්තේ http://localhost:3000/login වෙත බවත් සදහන් කරයි. ඉන් පසු Server එකට අපි ලබාදෙන දත්ත JSON බව සදහන් කිරීමට setRequestHeader භාවිතා කර Content-Type එක application/json යන්න ලබා දේ. අවසානයේ අපගේ දත්ත සහිත JSON Object එක String එකක් බවට පරිවර්තනය කර Server එකට යැවීම සිදුකරනු ලබයි.
මේ ආකාරයෙන්ම login() Function එකේදීද සිදුවේ. නමුත් Login Request එකට ලැබෙන Response එකේදී Response එක සාර්ථක එකක් නම්, Server එකෙන් ලැබෙන Email එක Browser එකේ LocalStorage එකට Save කරගැනීම සිදුකරයි. මෙමගින් අපි Log වී ඇති බව හදුනාගත හැකිය. තවද Response එක සාර්ථක නම් ArticlesPage.html Webpage එකට යාමට goToArticlesPage() Function එක Call වීම සිදුවේ. Login Request එකට ලැබෙන Response එක අසාර්ථක එකක් නම් ඒ බව User ට alert එකක් භාවිතයෙන් දැනුම් දෙයි. goToArticlesPage() Function එකෙහිදී පළමුව Log වීමෙන් ලබෙන Email එක LocalStorage එකෙහි ඇතිදැයි සොයා බලයි. එසේ Email එක LocalStorage එකෙහි ඇත්නම් පමණක් ArticlesPage.html එකට ගමන් කිරීමට ඉඩ සලසයි.
දැන් අපි Registration, Login සඳහා අවශ්‍ය Function අපේ Server එකේ සාදාගනිමු. ඒ සඳහා server.js එකට පහත Variables ඇතුලත් කරගන්න.
var users = {};
var session = {};ඉන් පසුව පහත Code එක server.js එකට අතුලත් කරගන්න.
app.post("/register", express.json(), (request, response) => {
var registeringUser = request.body;
if ((users[registeringUser["email"]] != null) || (users[registeringUser["email"]] != undefined)) {
response.statusCode = 401;
response.json({"status": "failed", "message": "Registration Failed"});
} else {
users[registeringUser["email"]] = registeringUser;
response.json({"status": "success", "message": "Registration successful"});
}
});
app.post("/login", express.json(), (request, response) => {
var loginUser = request.body;
var existingUser = users[loginUser["email"]];
if (existingUser == undefined) {
response.statusCode = 401;
response.json({"status": "failed", "message": "Login failed"});
} else if ((existingUser["email"] !== loginUser["email"]) || (existingUser["password"] !== loginUser["password"])) {
response.statusCode = 401;
response.json({"status": "failed", "message": "Login failed"});
} else {
session[existingUser["email"]] = true;
response.json(
{
"status": "success",
"message": "Login successful",
"data": {
"email": existingUser["email"]
}
}
);
}
});මෙහි පලමුව Server එකට Registration දත්ත සමග පැමිනෙන POST Request එක Handle කිරීමට app.post("/register" Endpoint එක සාදාගෙන ඇත. Server එකට පැමිනෙන Registration දත්ත JSON Object එකක් ලෙස users Object එකට User Email එක Key එක ලෙස යොදාගෙන Save කරනු ලබයි. මෙහිදී users Object Array එකක් භාවිතා නොකර users JSON Object එකක් භාවිතා කලේ, යම් User Email සෙවීමට Array එකකදී Array එක තුල ඇති Object මුල සිට එකින් එක සොයාගෙන යා යුතු අතර එය කාලය වැඩිවශයෙන් ගතවන කාර්‍යයකි. නමුත් JSON Object එකක් භාවිතා කලවිට User Email එක එකවර ලබාදී ඊට අදාල user Object එක ලබාගත හැක. මෙයමගින් Array භාවිතයට වඩා විශාල කාලයක් ඉතිරි කරගත හැක. තවද /register Endpoint එකට පැමිනෙන Registration දත්ත පෙර Register වී ඇති Email එකක් අති දත්ත නම්, එකම Email එකකින් User දෙදෙනෙක් සිටිය නොහැකි බැවින් users Object එකට Save කිරීමට ප්‍රථම එම Email එක යටතේ User කෙනෙක් සිටීදැයි විමසා බලා එසේ සිටීනම් ඊට ආවසර නොදෙන බවට Browser එකට response.statusCode = 401 මගින් දන්වයි. එසේ නොසිටීනම් එය users Object එකට Save කරගෙන ඒ බව Browser එකට දන්වයි.
User කෙනෙකු Server එකට Login වන විට Email එකට අදාල User කෙනෙකු users Object එකෙහි සිටීදැයි මුලින් පරීක්ශා කර බලයි. එසේ නොසිටීනම් ඒ බව Browser එකට දැනුම් දෙයි. Email එකට අදාල User කෙනෙකු සිටීනම් Login වන විට දුන් Password එක users Object එකෙහි සිටින User ගේ Password එකට සමානදැයි බලා එසේ නොවේනම් ඒ බව Browser එකට දන්වයි. Password සමාන වේනම් සාර්ථකව Login වීමක් සිදුවන අතර Login වූ Email එක නැවත Response එක ලෙස Browser එකට යවයි. ඒත් සමගම session Object එකට Email එක Save කරගනී. එවිට පසු වේලාවක යම් User කෙනෙකු Server එකට Login වී ඇත්දැයි බලාගැනීමට User ගේ Email එක session Object එකෙහි තිබේදැයි බැලීමෙන් තහවුරු කර ගත හැක.
අපි දැන් යම් User කෙනෙකු Server එකට Log වී සිටින්නෙදැයි දැනගැනීමට හැකි Endpoint එකක් සාදා ගමු. මේ සඳහා පහත Code එක server.js එකට ඇතුලත් කරගන්න.
app.post("/login_status", express.json(), (request, response) => {
var checkingUser = request.body;
if ((session[checkingUser["email"]] != null) && (session[checkingUser["email"]] != undefined)) {
response.json({"status": "success", "message": "Currently logged in"});
} else {
response.statusCode = 401;
response.json({"status": "failed", "message": "Currently not logged in"});
}
});මෙහිදී අපි විමසා බලන Email එක session Object එකට ඇතුලත් වී ඇත්දැයි බලා Log වී සිටීද හෝ නොමැතිද යන්න තීරණය කරනු ලබයි. දැන් පහත Code එක assets Folder එකේ ඇති script.js File එකට අතුලත් කරගන්න.
function checkLogin() {
var checkingUserDetails = {
"email": getLoggedInUserIdentifier()
};
var checkingRequest = new XMLHttpRequest();
checkingRequest.onreadystatechange = function() {
if(checkingRequest.readyState === XMLHttpRequest.DONE) {
var status = checkingRequest.status;
if (!(status === 0 || (status >= 200 && status < 400))) {
alert("You have to login first");
onLoginClick();
}
}
}
checkingRequest.open("POST", "http://localhost:3000/login_status", true);
checkingRequest.setRequestHeader("Content-Type", "application/json");
checkingRequest.send(JSON.stringify(checkingUserDetails));
}මෙහිදී Browser එකෙහි LocalStorage හි ඇති Email එක Server එකට යවා User Login වී ඇතිදැයි විමසා බැලේ. LocalStorage හි ඇති Email එකක් නොමැතිනම් හා ඇති Email එකෙන් Login වී නොමැතිනම් ArticlesPage.html Webpage එක Load වන විටම නැවත LoginPage.html එකට යොමු කිරීම සිදුවේ.
පෙර පරිදිම Server එක Run කරගෙන අපි සාදාගත් Registration හා Login පහසුකම පරීක්ශාකර බලන්න. මීලග පඩම් වලදී මෙම Dummy Website එකෙහි ඉතිරි වී ඇති ක්‍රියාකාරීත්වයන් ගොඩ නගමු.
නිලුපුල් සංදීප 07-07-2021
Comments
Post a Comment