728x90
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<link rel="stylesheet" href="src/index.css" />
<body>
<canvas class="canvas"></canvas>
<div id="loginPage">
<div id="wholeWrapper">
<form method="post" action="/" id="inputform">
<div>
<label for="">아이디</label>
<input type="text" id="inputId" name="id" />
</div>
<div>
<label for="">비밀번호</label>
<input type="text" id="inputPw" name="pw" />
</div>
<button id="loginBtn" type="submit">로그인</button>
</form>
<div id="subdiv">
<button id="signUp">회원가입</button>
<button id="findIdPw">아이디/비밀번호 찾기</button>
</div>
</div>
<div id="loginNav">
<div id="navTop">아이디 슬라이드창</div>
<button id="logout">로그아웃</button>
</div>
</div>
<div id="adPage">
<div class="adSection">이것은 광고입니다</div>
<div id="close">
<div id="dontLook">
하루동안 보지않기
<input type="checkbox" id="checkbox" />
</div>
<div id="closeAd">닫기</div>
</div>
</div>
</body>
<script>
let createCookie = function (name, value = "광고On", time = 1) {
let date = new Date();
date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
document.cookie =
name + "=" + value + ";expires=" + date.toUTCString() + ";";
};
let getCookie = function (name) {
let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
return value ? value[2] : null;
};
//온로드 됬을때 로그인상태라면
window.onload = function () {
if (sessionStorage.getItem("login") == 1) {
wholeWrapper.style.display = "none";
loginNav.style.display = "block";
navTop.innerHTML = `${sessionStorage.getItem(
"loggedin"
)}님 환영합니다!`;
}
};
//로그인 버튼 클릭
loginBtn.onclick = function () {
if (!getCookie(inputId.value)) {
createCookie(inputId.value);
}
if (getCookie(inputId.value) == "광고On") {
adPage.style.display = "flex";
}
wholeWrapper.style.display = "none";
loginNav.style.display = "block";
sessionStorage.setItem("login", 1);
sessionStorage.setItem("loggedin", inputId.value);
navTop.innerHTML = `${sessionStorage.getItem("loggedin")}님 환영합니다!`;
};
//하루동안 광고 안보기 클릭
closeAd.onclick = function () {
adPage.style.display = "none";
if (checkbox.checked) {
createCookie(inputId.value, "광고Off");
}
checkbox.checkbox = false;
};
//로그아웃 버튼 클릭
logout.onclick = function () {
sessionStorage.setItem("login", 0);
wholeWrapper.style.display = "block";
loginNav.style.display = "none";
inputId.value = "";
inputPw.value = "";
};
</script>
</html>
2. JS
const express = require("express");
const app = express();
const fs = require("fs");
const PORT = 3000;
const dot = require("dotenv");
dot.config();
const session = require("express-session");
const FileStore = require("session-file-store")(session);
const jwt = require("jsonwebtoken");
const bodyParser = require("body-parser");
app.listen(PORT, () => {
console.log("server start");
});
app.use("/src", express.static(__dirname));
// 로그인 했을때 express 세션에 jwt 토큰정보 저장
// .env사용해서 시크릿키는 따로 뺴놓기
const key = process.env.KEY;
let token;
app.use(
session({
secret: key,
resave: false,
saveUninitialized: true,
store: new FileStore(),
}),
bodyParser.urlencoded({
extended: true,
})
);
app.post("/", (req, res) => {
token = jwt.sign(
{
type: "JWT",
name: req.body.id,
},
key,
{
expiresIn: "5m",
issuer: "admin",
}
);
});
app.get("/", (req, res) => {
if (!req.session.key) {
req.session.key = token;
}
fs.readFile("index.html", "utf-8", (err, data) => {
res.send(data);
});
});
3. CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.canvas {
position: absolute;
z-index: -1;
}
#loginPage {
width: 400px;
height: 400px;
background-color: greenyellow;
position: relative;
overflow: hidden;
}
#wholeWrapper {
position: absolute;
width: 100%;
height: 100%;
}
#inputform > div {
transform: translateX(17%) translateY(200%);
margin-bottom: 30px;
display: flex;
justify-content: space-between;
width: 300px;
font-size: 20px;
}
#inputform > div input {
height: 30px;
padding-left: 10px;
}
#loginBtn {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
border-radius: 10px;
border: none;
cursor: pointer;
}
#subdiv {
position: absolute;
bottom: 20%;
border-radius: 5px;
left: 12%;
width: 300px;
display: flex;
justify-content: space-between;
}
#loginNav {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#navTop {
width: 100%;
height: 50px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
animation: slideAnimation 5s linear infinite;
}
@keyframes slideAnimation {
from {
left: -100%;
}
to {
left: 100%;
}
}
#logout {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 30px;
}
#adPage {
width: 330px;
height: 300px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
z-index: 999;
display: none;
}
#adSection {
width: 100%;
height: 100%;
}
#close {
position: absolute;
bottom: 10px;
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
#dontLook {
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
#closeAd {
cursor: pointer;
}
4. 코드
로그인시 아이디와 비밀번호를 form태그를 통해 post방식으로 데이터를 전송한다.
js에서 post방식으로 데이터를 받아 jwt를 만들어줄때 id를 넣어준다.
다시 그 토큰을 express-session을 만들때 key값으로 token을 넣어준다.
로그인시 광고팝업을 띄어 하루동안 보지않기를 클릭하면 쿠키의 value를 광고Off 로 설정하여
광고가 하루동안 나오지 않게 한다.
로그인상태를 유지시키기 위해 세션을 사용하여 onload이벤트에서 세션을 검사 후 로그인 되어있으면 로그인을
유지시킨다.
728x90
'개발 > node.js' 카테고리의 다른 글
[Node.js] 로그인 Access Token, Refresh Token (0) | 2022.08.16 |
---|---|
[Node.js] exports router (0) | 2022.08.10 |
[Node.js] 로그인시 JWT생성 (0) | 2022.08.09 |
[Node.js] 채팅, 귓속말 기능 만들기 (0) | 2022.07.29 |
[Node.js, jquery] 비행기 예약 시스템 만들기 (0) | 2022.07.29 |