JavaScript/Nodejs

[Nodejs] 로그인 / 회원가입 [ 로그인 ]

반응형

글이 잘 보이지 않는다면 우측 하단의 달 모양을 눌러 라이트모드로 변경해주시기 바랍니다.

해당 글은 MacOS 를 기준으로 작성이 되었음을 미리 알려드립니다. WindowOS  를 이용하시는 분은 추후 업로드될 게시글을 기다려주시거나 다른 작성자의 게시글을 확인해주시기 바랍니다.

 

  로그인 라우터 만들기

로그인을 하기 위해 nodejs 에서 코드 작성을 해보도록 하겠습니다.

router.post('/login',(req, res) => {
    console.log(req.body);
    res.end();
}

해당 라우터는 /user 이후의 경로입니다.

post 형식으로 http://localhost:3000/user/login 에 요청을 줄 수 있습니다.

 

이처럼 해주면 우선, 해당 라우터로 데이터가 들어오게 될텐데 그 데이터를 콘솔에 보여주도록 하겠습니다.

 

  로그인 폼 짜기 - <form> 태그 사용하기

로그인을 하기 위해 로그인 폼을 짜보도록 하겠습니다.

우선, 우리가 흔히 알고있는 form  태그를 이용해보도록 하겠습니다

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>loginTest</title>
</head>
<body>
    <form method="post"
            accept-charset="utf-8"
            name="person_info"
            action="http://localhost:3000/user/login">
        <input type="text" name="id">
    </form>
</body>
</html>

html 파일에서 위와같이 코딩을 해 줍니다.

 

form 태그에 method, accept-carset, name, action 을 작성해줍니다.

method 와 action 은 대충 감이 오지만, accept-charset 과 name 은 생소하게 느껴질 수 있습니다.

accept-charset 은 서버로 보낼 때 인코딩을 어떻게 할것인지 정하는 부분이며,

name  은 해당 폼의 이름을 지정하는것 입니다.

 

자, 이와같이 작성을 했다면 한번 요청을 보내도록 하겠습니다

위와같이 input 안에 텍스트를 입력 후 엔터를 누르게 된다면

페이지가 이동되며 아래와같이 잘 나오게 됩니다

하지만, 페이지가 이동되면 다시 돌아올 코드가 없기때문에 nodejs 안에서 ejs 로 렌더링을 하지 않으면 좀 불편한 부분이 있습니다.

이 때 저희는 axios 를 이용해 값만 보내도록 하겠습니다

 

  로그인 폼 짜기 - axios 사용하기(1)

우선, form 태그를 삭제하고 새롭게 html 코드를 작성해 줍니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>loginTest</title>
</head>
<body>
    <input type="text" name="id">
    <button> Submit </button>
</body>
</html>

이와같이 작성을 했다면

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

해당 코드를 head 사이에 넣어주고, 아래 body 태그 안의 button 밑에 <script> 태그를 추가해주도록 하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>loginTest</title>
</head>
<body>
<input type="text" name="id">
<button> Submit</button>

<script>

</script>
</body>
</html>

 

이제 아래 script 태그 안에서 작성을 해보도록 하겠습니다.

우선, 버튼을 클릭했을 때의 이벤트를 추가하기 위해 새로운 함수를 한 가지 만들어주도록 하겠습니다.

function postLoginData () {}

이 코드 안에는 이제 보낼 데이터를 정리하는 오브젝트를 만들어주도록 하겠습니다.

function postLoginData () {
        const data = {
			id : document.querySelector("input[name='id']").value
        }
        console.log(data)
    }

 

이런식으로 작성을 해준다면 버튼 클릭 시 data 에는 <input type="text" name="id"> 에 입력된 값을 data  안에 저장을 해줍니다.

그리고 한번 테스트를 위해 버튼 태그에 onclick 옵션을 넣어주고 postLoginData() 함수를 추가해줍니다.

<button onclick="postLoginData()"> Submit</button>

 

이제 input 안에 데이터를 넣고 submit 을 누르면 이런식으로 데이터를 받아오게 됩니다. 그럼 이제 password도 추가하도록 하겠습니다.

 

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>loginTest</title>
</head>
<body>
<input type="text" name="id">
<input type="password" name="pw">
<button onclick="postLoginData()"> Submit</button>

<script>
    function postLoginData () {
        const data = {
            id : document.querySelector("input[name='id']").value,
            password : document.querySelector("input[name='pw']").value
        }
        console.log(data)
    }
</script>
</body>
</html>

이렇게 작성을 해주시면 로그인 데이터를 보낼 준비가 어느정도는 된 것 입니다.

이제 axios 를 이용해서 데이터를 보내도록 하겠습니다.

 

function postLoginData () {
        const data = {
            id : document.querySelector("input[name='id']").value,
            password : document.querySelector("input[name='pw']").value
        }
        axios.post('http://localhost:3000/user/login',data)
    }

이렇게 작성을 해주고 Submit 을 해준다면 서버쪽으로 데이터가 정상적으로 전송되는것을 알 수 있습니다.

추가로 form 을 이용했을때와는 달리 페이지가 이동되지 않는다는 점을 알 수 있습니다.

 

 

  로그인 기능 만들기

아직은 db 에 값이 없으니 임시로 로그인 값을 만들어보도록 하겠습니다.

router.post('/login',(req, res) => {

    const userData = { id : 'test', password : 'test123' } // 임시 로그인 정보
    const postData = { id : req.body.id , password : req.body.password } // 받아온 정보
    if(userData.id === postData.id){ // id 가 맞는지 검사
        if(userData.password === postData.password){ // password 가 맞는지 검사
            res.json({
                state:true,
                message : 'Match Data'
            })
        }else{
            res.json({
                state:false,
                message:'Mismatched password'
            })
        }
    }else{
        res.json({
            state : false,
            message : 'Mismatched userid'
        })
    }

    res.end()
})

 

이런식으로 작성을 해주도록 하겠습니다

 

  로그인 폼 짜기 - axios 사용하기 (2)

function postLoginData () {
        const data = {
            id : document.querySelector("input[name='id']").value,
            password : document.querySelector("input[name='pw']").value
        }
        axios.post('http://localhost:3000/user/login',data)
    }

이 코드에서 약간 수정을 해주도록 하겠습니다.

function postLoginData () {
        const data = {
            id : document.querySelector("input[name='id']").value,
            password : document.querySelector("input[name='pw']").value
        }
        axios.post('http://localhost:3000/user/login',data)
            .then(data => console.log(data))
    }

aixos 는 Promise 형식이기때문에 then 을 이용해서 데이터를 전송했을때 서버의 응답을 받아올 수 있도록 해줍니다.

그런데 이 상태에서는 아무리 작성을 해도 위 사진처럼 모든 헤더를 다 가져올것 입니다.

여기서 저희가 필요한것은 로그인 성공 유무입니다. 그러기 위해서는 위 사진 중 data 의 값을 가져오도록 해야합니다.

function postLoginData () {
        const data = {
            id : document.querySelector("input[name='id']").value,
            password : document.querySelector("input[name='pw']").value
        }
        axios.post('http://localhost:3000/user/login',data)
            .then(data => console.log(data.data))
    }

이 상태로 해주면 이처럼 값을 보내주게 됩니다.

 

  로그인 기능 만들기 - 세션처리

로그인을 했다고 끝나는것이 아닌 세션 처리를 해 주어야 합니다.

기존 로그인 라우터에서 작업을 하도록 하겠습니다.

router.post('/login',(req, res) => {

    const userData = { id : 'test', password : 'test123' } // 임시 로그인 정보
    const postData = { id : req.body.id , password : req.body.password } // 받아온 정보
    if(userData.id === postData.id){ // id 가 맞는지 검사
        if(userData.password === postData.password){ // password 가 맞는지 검사
            res.json({
                state:true,
                message : 'Match Data'
            })
        }else{
            res.json({
                state:false,
                message:'Mismatched password'
            })
        }
    }else{
        res.json({
            state : false,
            message : 'Mismatched userid'
        })
    }

    res.end()
})

해당 코드에서 세션값으로 넘겨줄 값을 만들어야 합니다.

여기서 중복되지 않는값인 id 로 해보도록 하겠습니다.

 

router.post('/login',(req, res) => {

    const userData = { id : 'test', password : 'test123' } // 임시 로그인 정보
    const postData = { id : req.body.id , password : req.body.password } // 받아온 정보
    if(userData.id === postData.id){ // id 가 맞는지 검사
        if(userData.password === postData.password){ // password 가 맞는지 검사
            req.session.displayName = userData.id // session.displayName 에 userData.id 를 저장
            req.session.save(()=>{ // 저장 후 실행될 이벤트
                res.json({
                    state:true,
                    message : 'Match Data'
                })
            })
 ......
 
    res.end()
})

중간에 생략을 하였습니다. 이 때 req.session.displayName 에 userData.id 를 저장해주도록 합니다.

req.session.displayName은 자동으로 생성이되니 걱정하지 않으셔도 됩니다.

 

이제 로그인을 한 뒤 mysql 을 켜서 확인을 해봅니다.

이런식으로 저장이 되게 됩니다.

우측에 보시면 "displayName" : "test" 로 저장이 잘 되어있는것을 확인할 수 있습니다.

이제 이 정보를 통해서 확인을 한다면 로그인을 체크할 수 있을것 입니다.

  로그인 기능 만들기 - 로그아웃(1 - 세팅)

로그인도 했고, 세션처리도 했다면 이제 로그아웃을 하도록 해주어야 합니다.

단순히 해당하는 값을 삭제해주면 됩니다. 

 

그런데 여기서 세션은 서버에 저장이 되기때문에 서버와 클라이언트를 따로 분리해서 사용하기에는 어려움이 존재합니다.

 

그렇기때문에 nodejs 내부로 html 파일을 옮겨주도록 하겠습니다.

루트 경로에  views 폴더를 생성 후 index.html 을 index.ejs 로 변경해줍니다.

변경 후 해주어야할 작업이 몇가지 있습니다.

// yarn add ejs

app.set('/views' , __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.get('/page', (req, res) => {
    res.render('index.ejs')
})

우선 yarn add ejs 를 해주고 위 코드들을 최 상위 파일에 작성을 해주어야 합니다.

이 후에 이런식으로 작성을 해준다면, localhost:3000/page 에 접속을 했을 시 우리가 작업하던 화면이 그대로 나오게 됩니다.

 

  로그인 기능 만들기 - 로그아웃(2 - 세션삭제)

위처럼 세팅이 끝나게 되었다면 이제 코드를 작성하도록 하겠습니다.

router.post('/logout',(req, res) => {
    console.log(req.session)
    res.end()
})

위 코드는 우리가 여태 작업했던 login 과 같은 위치에서 작업을 해주시면 좋습니다.

이런식으로 logout 요청을 보내게되면 session값이 뜨게 됩니다.

 

요청을 보내는 코드는 index.ejs 안에서 아래 코드를 추가해주도록 합시다.

<button onclick="postLogout()"> Logout </button>
<script>
....
    function postLogout(){
        axios.post('http://localhost:3000/user/logout')
    }
</script>

 

여기서 이제 제가 굳이 nodejs 안으로 html 파일을 넣은 이유가 나오는데요,

넣지 않고 로그아웃으로 요청을 보내게 된다면

이런식으로 값이 뜨게됩니다. 뭔가 이상하지 않나요?

displayName 이 존재하지 않습니다.

 

이제 기존 코드 그대로 ejs 로 옮기게되면

이런식으로 displayName 이 존재하게 됩니다.

 

이제 삭제하는 방법을 알아보도록 할텐데요, 삭제하는방법은 아래 코드를 입력해주시면 됩니다.

router.post('/logout',(req, res) => {
    console.log('Logout')
        req.session.destroy(err => {
            if(err) console.log(err)
        })
        res.end()
})

 

 

이 코드를 작성해주시고 로그인 / 로그아웃 테스트를 하면서 db 와 함께 보시면  db의 sessions의 값이 사라졋다가 생기는것을 확인할 수 있습니다.

반응형

'JavaScript > Nodejs' 카테고리의 다른 글

[NodeJS] Mysql 연결하기 [Mysql createPool]  (0) 2021.09.04
[Nodejs] 로그인 / 회원가입 [JWT Token]  (2) 2021.09.03
[Nodejs] 로그인 / 회원가입 [ Mysql 세팅 및 연동 / express-mysql-session ]  (0) 2021.08.12
[Nodejs] 로그인/회원가입 구현하기 (세션유지편)  (0) 2021.05.21
[NodeJS] 로그인/회원가입 구현하기 (로그인편)  (4) 2021.05.20