원래는 앞선 기능들로 마무리하고자 하였지만 추가로 기능 하나를 더하고자 한다. 바로 회원의 비밀번호 변경 기능이다. 현재 회원 정보는 mongoDB에 직접 데이터를 추가하여 저장하였는데 비밀번호는 정해둔 기본 비밀번호를 사용하였다. 해당 비밀번호를 수정하는 기능을 추가하고자 한다.

비밀번호 변경 기능

현재 비밀번호를 입력하고, 변경하고자 하는 비밀번호를 2번 입력(입력 정확한지 체크하는 것까지 포함)한다. 현재 비밀번호가 일치하고, 변경하고자 하는 비밀번호가 서로 일치하면 비밀번호를 변경한다.

User 비밀번호 변경 화면

전체적인 형태는 게시글을 작성하는 것과 유사하다. 총 3가지의 input을 받고, 각각 현재, 바꾸려는 비밀번호, 바꾸려는 비밀번호 체크이다. form 태그의 action을 newpassword, 비밀번호 변경하는 것으로 설정한다.

// /post/pwchange/page.js
function PasswordChange(){
    return(
        <div>
            <h1>PassWord Change</h1>
            <form action="/api/newpassword" method="POST" id="pwchange">
                <div>
                    <div>
                        <span>Current PassWord</span>
                        <span>New PassWord</span>
                        <span>Confirm New PassWord</span>
                    </div>
                    <div>
                        <input name="Current" type="password"/><br />
                        <input name="NewPw" type="password"/><br />
                        <input name="NewPwCheck" type="password"/><br />
                        
                    </div>
                </div>
            </form>
            <button type="submit" form="pwchange">Save Change</button>
        </div>
    )
}

Server 비밀번호 변경 기능

POST 요청을 받아오면, 현재 로그인 되어있는 user 정보를 받아서, 해당 user의 정보를 DB에서 받아온다. 그리고 로그인 과정과 동일하게, 현재 비밀번호로 입력한 값이 암호화한 비밀번호와 같은지 체크하는 과정을 거친다. 만약 동일하지 않다면 비밀번호가 틀렸다는 메시지를 전달하고, 같다면 새로 입력한 비밀번호 2개의 값을 다시 한번 비교한다. 만약 값이 동일하면 새로 입력한 비밀번호를 암호화한 뒤, user 정보를 DB에 update 한다. 다를 경우 새로 설정하는 비밀번호가 일치하지 않는다는 메시지를 전달한다.

// /pages/api/newpassword.js
export default async function handler(request, response){
    if(request.method == 'POST'){
        const db = (await connectDB).db('vessweb');
        let session = await getServerSession(request, response, authOptions)
        let find = await db.collection('user').findOne({username : session.user.username});

        const pwcheck = await bcrypt.compare(request.body.Current, find.password);
        if (!pwcheck) {
            return response.status(500).json('현재 비밀번호가 틀렸습니다')
        }
        if(request.body.NewPw == request.body.NewPwCheck){
            const hash = await bcrypt.hash(request.body.NewPw, 10);
            let newVal = {
                password : hash
            }
            let result = await db.collection('user').updateOne(
                    {_id : new ObjectId(find._id)},
                    {$set : newVal}
            )
            return response.status(200).json('비밀번호 변경 완료')
        }
        else{
            return response.status(500).json('새로 설정하려는 비밀번호가 바르게 입력되지 않았습니다.')
        }
    }
}

구현 결과

비밀번호 역시 잘 바뀌어 저장됨을 확인할 수 있다.