로그인시 rsa 암호화 적용하기

위에서 만든 rsa 스크립트 사용방법이다.

로그인시에 암호화 한다.

로그인을 하기 위한 껍데기를 먼저 만든다.

views\login\index.vue 파일을 만든다.

<template>
  <v-container fluid fill-height :grid-list-md="!$vuetify.breakpoint.xs">
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <Login title="로그인"></Login>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import Login from '@/components/login/login.vue'

export default {
  components: {
    Login
  },
  data: function () {
    return {}
  },
  methods: {}
}
</script>

로그인 실체 components 파일을 만든다.

components\login\login.vue

<template>
  <v-card class="elevation-12">
    <v-toolbar dark color="primary">
      <v-toolbar-title>로그인</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card-text>
      <v-form ref="forms" v-model="valid" lazy-validation>
        <v-text-field
          prepend-icon="person"
          v-model="form.id"
          ref="lgnId"
          label="아이디"
          type="text"
          :rules="[v => !!v || '아이디는 필수 입력 입니다.']"
          required
        ></v-text-field>
        <v-text-field
          prepend-icon="lock"
          v-model="form.password"
          ref="pwd"
          label="비밀번호"
          type="password"
          :rules="[v => !!v || '비밀번호는 필수 입력 입니다.']"
          required
        ></v-text-field>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="primary" @click="signIn">로그인</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>

import RSAKey from '@/js/rsa/rsa.js'

export default {
  data () {
    return {
      form: {
        id: '',
        password: ''
      },
      pubRsaKey: [],
      encryptData: {
        id: '',
        password: ''
      },
      valid: true
    }
  },
  mounted () {
    this.$refs.lgnId.focus()
    this.getRsaKey()
  },
  methods: {
    getRsaKey () {
      this.$axios.get('grain/mbr/axiosRsaKey.do')
        .then((r) => {
          this.pubRsaKey = r.data
        })
        .catch((e) => {
          if (!e.response) this.$store.commit('pop', { msg: e.message, color: 'warning' })
        })
    },
    signIn () {
      if (!this.$refs.forms.validate()) return

      const rsa = new RSAKey()
      rsa.setPublic(this.pubRsaKey.publicKeyModulus, this.pubRsaKey.publicKeyExponent)
      this.encryptData.id = rsa.encrypt(this.form.id)
      this.encryptData.password = rsa.encrypt(this.form.password)

      this.$axios.post('grain/mbr/axiosLogin.do', this.encryptData)
        .then(r => {
          if (r.data.ResultData.id != null) {
            const userInfo = {}
            userInfo.id = r.data.ResultData.id
            userInfo.name = r.data.ResultData.name
            userInfo.img = 'https://randomuser.me/api/portraits/men/75.jpg'
            console.log(userInfo)

            localStorage.setItem('member', JSON.stringify(userInfo))

            this.$store.commit('getMemberInfo', userInfo)
            this.$store.commit('setAppBarDrawer')
            this.$store.commit('setSiteTitle', '메인') // 사이트 타이틀
            this.$router.push('/')
          } else {
            this.$dialog.notify.error('존재하지 않는 사용자입니다.')
            // alert('존재하지 않는 사용자입니다.')
            throw new Error('존재하지 않는 사용자입니다.')
          }
        })
        .catch(e => {
          console.log('e:', e)
          // if (!e.response) this.$store.commit('pop', { msg: e.message, color: 'warning' })
        })
    }
  }
}
</script>

<style>
.left-margin {
  margin: 0px;
  padding: 0px;
}
</style>

rsa 암호화 사용 방법은 만들어 놓은 js 파일을 import 한다.

import RSAKey from '@/js/rsa/rsa.js'

최초 로딩시 자바 컨트롤러 호출하여 공개키를 가지고 온다.

 getRsaKey () {

      this.$axios.get('grain/mbr/axiosRsaKey.do')

        .then((r) => {

          this.pubRsaKey = r.data

        })

        .catch((e) => {

          if (!e.response) this.$store.commit('pop', { msg: e.message, color: 'warning' })

        })

    },

 공개키를 가지고 온후에 이 키를 가지고 입력받은 아이디와, 패스워드를 암호화 하여 넘기면 된다.

    signIn () {

      if (!this.$refs.forms.validate()) return

 

      const rsa = new RSAKey()

      rsa.setPublic(this.pubRsaKey.publicKeyModulus, this.pubRsaKey.publicKeyExponent)

      this.encryptData.id = rsa.encrypt(this.form.id)

      this.encryptData.password = rsa.encrypt(this.form.password)

 

      this.$axios.post('grain/mbr/axiosLogin.do', this.encryptData)

        .then(r => {

          if (r.data.ResultData.id != null) {

            const userInfo = {}

            userInfo.id = r.data.ResultData.id

            userInfo.name = r.data.ResultData.name

            userInfo.img = 'https://randomuser.me/api/portraits/men/75.jpg'

            console.log(userInfo)

 

            localStorage.setItem('member', JSON.stringify(userInfo))

 

            this.$store.commit('getMemberInfo', userInfo)

            this.$store.commit('setAppBarDrawer')

            this.$store.commit('setSiteTitle', '메인') // 사이트 타이틀

            this.$router.push('/')

          } else {

            this.$dialog.notify.error('존재하지 않는 사용자입니다.')

            // alert('존재하지 않는 사용자입니다.')

            throw new Error('존재하지 않는 사용자입니다.')

          }

        })

        .catch(e => {

          console.log('e:', e)

          // if (!e.response) this.$store.commit('pop', { msg: e.message, color: 'warning' })

        })

    }

입력받은 아이디와, 패스워드를 rsa 객체를 생성하여 암호화 처리한다.