Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발공부일지

NodeJS - Database - JWT 사용해서 LOGIN 구현하기 ① 본문

NodeJS

NodeJS - Database - JWT 사용해서 LOGIN 구현하기 ①

보람- 2023. 9. 22. 19:23

목차

1. 로그인 구현 설계

2. express 설치, 디렉토리 생성, 파일 작성하기

3. router 만들기

4. controller 만들기

5. service만들기

6. repository만들기

7. User 스키마 만들기

8. DB connection

9. repository 완성하기

10. service 완성하기

11. jwt


 

 

 

1. 로그인 구현 설계

 

- express 서버 열기

- html 작성하기 ( 로그인화면 )

- 디렉토리 생성하기

- 서버 골격 만들기 ( 라우터 나누기)

- DB connection

- JWT 만들기

 

 

 

 

 

2. express 설치, 디렉토리 생성, 파일 작성하기

npm init -y
npm install express nunjucks
/
| - /lib
| --- jwt.js
| - /node_moduels
| - /src
| --- /user
| ------- /user.controller.js
| ------- /user.repository.js
| ------- /user.route.js
| ------- /user.service.js
| --- index.js
| - /views
| --- index.html
| --- login.html
| - package.json
| - package-lock.json
| - pool.js
| - server.js
// server.js

const express = require("express");
const app = express();
const nunjucks = require("nunjucks");
const router = require("./src/index");

app.set("view engine", "html");
nunjucks.configure("views", {
    express: app,
});

app.use(router);

app.listen(3000, () => {
    console.log(`server start!!!!`);
});
<!-- login.html -->

<body>
        <h2>로그인</h2>
        <form action="/users/login" method="post">
            <ul>
                <li><input type="text" name="user_id" /></li>
                <li><input type="password" name="user_pw" /></li>
            </ul>
            <button type="submit">로그인</button>
        </form>
    </body>
// src/index.js

const express = require("express");
const router = express.Router();
const userRouter = require("./user/user.route");

router.get("/", (req, res) => {
    res.render("index.html");
});

router.use("/users", userRouter);

module.exports = router;

 

 

 

3. router 만들기

- src/user/user.route.js

- GET       /                   → 메인페이지
- GET      /users/login     로그인
- POST   /users/login      로그인

const express = require("express");
const router = express.Router();
const userController = require("./user.controller");

router.get("/login", userController.getLogin);
router.post("/login", userController.postLogin);

module.exports = router;

 

 

 

4. controller 만들기

- src/user/user.controller.js

const userService = require("./user.service");

exports.getLogin = (req, res) => {
    res.render("user/login.html");
};
exports.postLogin = (req, res) => {
    const result = userService.postLogin();
    console.log(result);
    res.redirect("/");
};

 

 

 

5. service만들기

- src/user/user.service.js

const userRepository = require("./user.repository");

exports.postLogin = () => {
    // return `login service`;

    const result = userRepository.findOneByUserInfo("guniee", "1234");
    return result;
};

 

 

 

6. repository만들기

- src/user/user.repository.js

exports.findOneByUserInfo = (user_id, user_pw) => {
    return true;
};

- 여기까지 실행한다음 "true"가 나오는것을 확인해보기

 

 

 

 

7. User 스키마 만들기

 

cd ~
sudo service mysql start
sudo mysql -uboram -p
create database ppo;
use ppo;

CREATE TABLE Users(
    userid VARCHAR(50) NOT NULL,
    userpw VARCHAR(50) NOT NULL,
    PRIMARY KEY(userid)

);

desc Users;

insert into Users(userid, userpw) values('guniee', '1234');

select * from Users;
mysql> desc Users;
+--------+-------------+------+-----+---------+-------+
| Field  | Type        | Null | Key | Default | Extra |
+--------+-------------+------+-----+---------+-------+
| userid | varchar(50) | NO   | PRI | NULL    |       |
| userpw | varchar(50) | NO   |     | NULL    |       |
+--------+-------------+------+-----+---------+-------+

mysql> select * from Users;
+--------+--------+
| userid | userpw |
+--------+--------+
| guniee | 1234   |
+--------+--------+

 

 

 

 

8. DB connection

 

npm install mysql2
// pool.js

const mysql2 = require("mysql2/promise");

const pool = mysql2.createPool({
    host: "127.0.0.1",
    port: "3306",
    user: "boram",
    password: "------",
    database: "ppo",
});

module.exports = pool;
// server.js 추가해주기

const pool = require("./pool");

app.listen(3000, async () => {
    console.log(`server start!!!!`);
    try {
        const connection = await pool.getConnection();
        console.log(`Connection to the database!!`);
        connection.release();
    } catch (e) {
        throw new Error("DB Connection ERR" + e.message);
    }
});

- server를 실행해서 Connection to the database!! 가 뜨는지 확인하기

 

 

 

 

9. repository 완성하기

 

const pool = require("../../pool");

exports.findOneByUserInfo = async (user_id, user_pw) => {
    const sql = `select * from Users where userid=? and userpw=?`;
    const result = await pool.query(sql, [user_id, user_pw]);
    console.log(result);
    return true;
};
[
  [ { userid: 'guniee', userpw: '1234' } ],
  [
    `userid` VARCHAR(50) NOT NULL PRIMARY KEY,
    `userpw` VARCHAR(50) NOT NULL
  ]
]

- result에 [[result]]로 이중배열에서 꺼내오기!

{ userid: 'guniee', userpw: '1234' }

 

 

 

10. service 완성하기

const userRepository = require("./user.repository");

exports.postLogin = async () => {
    // return `login service`;

    try {
        const result = await userRepository.findOneByUserInfo("guniee", "123");
        if (!result) return { isLogin: false, data: null };
        return { isLogin: true, data: { ...result } };
    } catch (e) {
        throw new Error("Service Error" + e.message);
    }
};
# true일때
{ isLogin: true, data: { userid: 'guniee', userpw: '1234' } }

# false일때
{ isLogin: false, data: null }

- repository, service, controller 전부 promise 객체로 async,await 을 적어주고 try, catch로 오류에 대한 예외처리를 한다.

 

 

 

 

11. jwt

추가하기

더보기

 

const Cypto = require("crypto");

class JWT {
    constructor() {}

    sign(data) {
        const header = this.encode({ type: "JWT", alg: "HS256" });

        const payload = this.encode(data);

        const base64url = [header, payload].join(".");
        const signature = this.createSignauture(base64url, "guniee");
        const jwt = [base64url, signature].join(".");
        return jwt;
    }

    createSignauture(base64url, salt) {
        return Cypto.createHmac("SHA256", salt)
            .update(base64url)
            .digest("base64url");
    }

    encode(obj) {
        return Buffer.from(JSON.stringify(obj)).toString("base64url");
    }
    decode(base64) {
        return JSON.parse(Buffer.from(base64, "base64url").toString("utf-8"));
    }
}

module.exports = JWT;

 

 

 

 


※ promise   async.await