[Nuxt.js]Nice ID 인증

✅ Nice ID 인증 구현

1. 팝업 구현

1. form 마크업 작성

   <form name="popForm">
        <input type="hidden" name="open" value="openPop" />
        <input type="hidden" name="email" :value="email" />
        <input type="hidden" name="EncodeData" value="" />
   </form>

2. 클릭 시 인증 이벤트 실행
	
    팝업으로 인증창 호출 후 window.postMessage를 통하여 다른 윈도우와 통신할 수 있게 작업

async onFindId() {
	  const returnUrl = `/nice/nice-success?`; // 인증 성공시 전달할 url
      const errorUrl = `/nice/nice-failure`; // 인증 실패시 전달할 url
  
  await this.$axios
        .$get('api url', {
          params: {
            returnUrl,
            errorUrl
          }
        })
   		.then((res) => {
    		// 인증 성공시 보낸 data를 확인하여 넣어줄 정보
          const receiveMessage = (e) => {
            if (e.data.code === 'FIND_ID' && e.data.state === 'SUCCESS') {
              this.authType = false;
              this.userIdData = e.data.id;
            }
          };

    		// 윈도우 메시지를 받을때 핸들러 등록
          window.addEventListener('message', receiveMessage, false);

          window.open(
            '',
            'popForm',
            'width=500, height=550, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no'
          );
    		// data가 도착할 url
          document.popForm.action = '/nice/nice-popup';
    		// form method 방식 설정
          document.popForm.method = 'post';
    		// form target 설정
          document.popForm.target = 'popForm';
    		// EncodeData value에 response값을 받음
          document.popForm.EncodeData.value = res;
          document.popForm.submit();
        })
        .catch((err) => {
          console.log(err);
          alert('에러가 발생했습니다.\n다시 시도해 해주세요.');
          window.location.reload(true);
        });
}

3. form action으로 data를 전달 받은 nice-popup 에 checkplus에 보낼 form 생성

    <form ref="form" name="form_chk" method="post">
      <input type="hidden" name="m" value="checkplusService" />
      <input type="hidden" name="recvMethodType" value="get" />
      <input type="hidden" name="email" :value="email" />
      <input type="hidden" name="EncodeData" :value="encodeData" />
    </form>

4. body-parser를 통하여 POST 요청 데이터를 추출할 수 있도록 만들어주는 미들웨어를 사용하여 asyncData로 받고 mounted로 checkplus에 요청

  asyncData({ req }) {
    const encodeData = req.body.EncodeData;
    const email = req.body.email;
    console.log(req.body);
    return { encodeData, email };
  },
     data() {
    return {
      email: '',
      encodeData: ''
    };
  },
      mounted() {
    const form = this.$refs.form;
    form.action = 'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb';
    form.submit();
  }

5. 성공 시 실행할 nice-success 페이지 작업
 

 data() {
    return {
      email: null,
      encodeData: null,
      findPwResult: null,
      token: null,
      userId: null
    };
  },
async fetch() {
    if (this.$route.query.email) {
      const findPwResult = await this.$axios.get('api 주소', {
        // query 값을 숨기기위해 params로 전달
        params: {
          encodeData: this.$route.query.EncodeData,
          email: this.$route.query.email
        }
      });
      this.token = findPwResult.data;
    }
},
mounted() {
    const closePopup = () => {
      if (this.token) {
        // 팝업 부모로 data 전달하기
        window.opener.postMessage({ token: this.token, code: 'FIND_PW', state: 'SUCCESS' }, '*');
        // 팝업 종료
        window.close();
      } else {
        // 실패시 failure url로 이동
        this.$router.push('/nice/nice-failure');
      }
    };

    closePopup();
  }

2. 페이지 이동 구현

방식에 차이는 딱히 없으며, js로 form 생성 방식으로 진행하였다.

export const createFormElement = (url, data) => {
  const form = document.createElement('form');
  form.setAttribute('method', 'POST');
  form.setAttribute('action', url);

  function createInputData(key, value) {
    const $input = document.createElement('input');
    $input.setAttribute('type', 'hidden');
    $input.setAttribute('name', key);
    $input.setAttribute('value', value);
    return $input;
  }

  function addFormData(data, root) {
    for (const [key, value] of Object.entries(data)) {
      const rootWithKey = root ? root + '.' + key : key;
      if (value) {
        if (typeof value === 'object') {
          addFormData(value, rootWithKey);
        } else {
          form.appendChild(createInputData(rootWithKey, value));
        }
      }
    }
  }

  addFormData(data);
  return form;
};

   const form = createFormElement('https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb', {
            m: 'checkplusService',
            recvMethodType: 'get',
            EncodeData: res
          });
          document.querySelector('body').appendChild(form);
          form.submit();
			// remove 하지 않으면 뒤로가기 후 다시 전송시 폼이 계속 생성됨
          form.remove();