[React]Bcrypt로 비밀번호 암호화 하기

npm install bctypt --save 실행

console창에서 비크립트 다운

 

해당 사이트에 접속해보면 

www.npmjs.com/package/bcrypt

bcrypt

먼저 

사용법은 sortRounds 를 이용하여 비크립트 자릿수를 설정한 뒤 Salt를 만들고 genSalt를 이용하여 실행합니다.

 

User.js

genSalt를 통하여 err가 존재할 경우에는 if문을 통하여 분기시켜줄 수 있다.

 

만약 err가 없을 경우에는 hash를 실행하는데, myPlaintextPassword 값으로는  mongoose스키마에서 선언한

password값이 올 수 있다.

 

 

index.js

//로그인 시
app.post('/login',(req,res)=>{

    //이메일을 찾는다
    User.findOne({ email:req.body.email },(err,user)=>{
        //user값이 1개라도 존재하지 않다면
        if(!user){
            return res.json({
                loginSuccess : false
                ,message : "이메일이 없습니다 ! "
            });
        }else{
            //user가 존재한다면 패스워드 값 비교
            User.comparePassword(req.body.password,(err,isMatch) =>{
                if(!isMatch){
                    return res.json({ loginSuccess:false, message : "비밀번호가 틀렸습니다." })
                }else{
                    return user.generateToken((err,user)=>{
                        
                    });
                }
                

            });


        }
        

    });
});

 

Users.js

 userSchema.methods.comparePassword = function(plainPassword,cb){

    //plainPassword = 1234567이라고 생각, 암호화된 비밀번호 : $!@3#$!$# 라고 생각
    //그러먼 plainPassword를 암호화해서 비교하면 된다
    bcrypt.compare(plainPassword,this.password,function(err,isMatch){
        if(err) return cb(err);
        cd(null,isMatch)
    })
 }

 

위의 과정을 요약해보자면,

index.js에서 이메일이 존재할 경우에 comparePassword 메서드를 통하여 비크립트 자체 메소드인 compare메소드로

순수 비밀번호를 암호화하여 암호화된 값들끼리 비교를 하는 과정입니다.

성공적으로 비교가 됐다면, generateToken을 통하여 token값을 받습니다

해당 토큰은 npm install jsontoken --save 를 통하여 설치해줍니다.

www.npmjs.com/package/jsonwebtoken

jsonwebtoken

참고합니다.

jsonwebtoken - sign()이라는 메서드를 활용

User.js

다음과 같이 sign메서드의 인자값으로 user._id 유니크한 아이디값과 뒤에는 특정 private한 key 값이 올 수 있습니다.

만들어진 token으로 user에 추가한 뒤 save메서드 호출을 통하여 user안에 저장시켜주고 callback으로 다시 user를 돌려줍니다.

이렇게되면 user안에 token값이 변경된채로 값을 받을 수 있습니다.

decode할 때는 secretToken값을 넣어주면 user._id 값이 나와 해당 token값을 구할 수 있습니다.

 

index.js

index.js에서는 gennerateToken()메서드를 통하여 오류가 없다면 user안에 token값을 cookie안에 설정하여 보내주는 부분입니다.

이렇게되면 개발자도구 창에서 application tab의 cookie창에서 새롭게 추가된 "x_auth" key,value) 값을 확인 할 수 있습니다.