Springboot & Vue3.js - 암호화된 비밀번호 검증 - BcryptPasswordEncoder

1. 암호화된 비밀번호 검증 - BcryptPasswordEncoder

 

2. matches 메서드를 활용해 암호화된 비번 검증할 수 있다.

시큐리티를 사용 중, 회원사 비번 수정 기능을 부여하는데 있어서 기존 비밀번호를 한 번 더 테스트해야 될 필요가 있었다. 하지만, 비번을 암호화하면 매번 다른 랜덤키로 인코딩 되기 때문에, 기존 방식으로 검증은 불가능하고, 인코더 객체의 matches 함수를 활용해, 검증할 수 있었다.

 

스프링코드

@ResponseBody
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public boolean login(@RequestBody Member member) {
		boolean idMatch = false;
		boolean idPwMatch = false;

		try {
			Member login = memberservice.login(member);

			logger.info("login : " + login);

			boolean passMatch = passwordEncoder.matches(member.getPwd(), login.getPwd());

			if (member.getMemId().equals(member.getMemId())) {
				idMatch = true;
				System.out.println(idMatch);
				
			}
			logger.info("member.getPwd() = " + member.getMemId());
			logger.info("login.getPwd() = " + login.getMemId());

			if (passMatch && idMatch == true) {
				idPwMatch = true;
				
			}
		} catch (NullPointerException e) {
			e.printStackTrace();
		}
		
		
		return idPwMatch;
	}

 

프론트에서 입력한 비밀번호와 DB에 암호와된 비밀번호를 matches 메서드를 활용해 비교하였다. 리턴값은 boolean 으로 

두 비밀번호가 일치하면 true 가 나온다. 

 

Vue.js 코드

<template>
  <div>
    로그인

    <div>
      <el-input
        placeholder="아이디"
        v-model="longinDatas.memId"
        clearable="true"
        maxlength="10"
      ></el-input>
    </div>

    <div>
      <el-input
        placeholder="비밀번호"
        v-model="longinDatas.pwd"
        clearable="true"
      ></el-input>
    </div>
    <div>
      <button type="button" class="btn btn-secondary" @click="join">
        로그인하기
      </button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  components: {},
  data() {
    return {
      longinDatas: {
        memId: '',
        pwd: ''
      }
    }
  },
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    join() {
      console.log(this.longinDatas)
      axios
        .post('http://localhost:3030/member/login', this.longinDatas)
        .then((response) => {
          if (response.data === true) {
            console.log(response.data)
            alert('로그인이 완료되었습니다..')
            alert('발송 페이지로 이동합니다.')
            this.$router.push('/send/MainBoard').catch(() => {})
          }
          if (response.data === false) {
            alert(
              '아이디 또는 비밀번호를 잘못 입력했습니다.입력하신 내용을 다시 확인해주세요.'
            )
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
    // goUrl() {
    //   this.$router.push('/send/MainBoard').catch(() => {})
    // }
  }
}
</script>

axios 를 이용하고 백엔드와 통신하였고 v-model을 사용하여 데이터를 바인딩하였다.  위에 스프링코드에 passMatch && idMatch == true 이여야만  idPwMatch = true 가 나오게 if문을 작성하였다. 해당 값을 리턴값으로 받아와

response.data === true 이면

'로그인이 완료되었습니다'  '발송 페이지로 이동합니다.' 라는 메세지와 발송페이지로 이동하는

this.$router.push('/send/MainBoard').catch(() => {})  코드를 작성하였다.

response.data === false 이면 

'아이디 또는 비밀번호를 잘못 입력했습니다.입력하신 내용을 다시 확인해주세요.' 라는 메세지를 띄어주었다.

 

DB 에 있는 아래 회원등록 정보로 로그인 해보았다.

 

 

 

실행결과

 

아이디 오류

 

비밀번호 오류

 

로그인성공