백앤드 서버와 연동없이
nuxt 서버와 클라이언트를 이용하여 nice 본인인증 연동 회고입니다.
참고 사이트
https://www.happykoo.net/@happykoo/posts/136 (서버)
https://www.happykoo.net/@happykoo/posts/143 (클라이언트)
nice로 부터 nodejs용 예시파일 + 코드 + 비밀코드 지급 받고 시작!
server/api에 js 파일 생성
import { exec } from 'child_process'
export default defineEventHandler(async event => {
let sSiteCode = 발급받은코드
let sSitePW = 발급받은PW
let sModulePath = 파일경로
// 맥 환경과 docker 리눅스 환경의 dir 이해도가 낮은 상황이라 많이 애먹음
// 맥에서 exec를 통해 pws를 하면 root 경로가 나왔음
// 도커 리눅스에서 pwd 하니까 .output 파일에 잡힘.
// 모듈 파일은 root 경로에 올려서 빌드했으므로 root로 접근했어야 함.
// 로컬(맥)일떈 ./파일이름, 도커 이미지에선 ../파일이름으로 접근 가능해짐.
//** 하지만 경로를 올바르게 접근해도 파일이 열리지않음!!!!
// => 해결방법 (도커파일 수정!)
// 1. 노드 버전업
// 2. 알파인 제거
// 3. RUN chmod -R 755 ./CPClient_linux_x64 로 빌드시에 매번 권한부여
// 추후 해보니 파일이 읽힌다!!
let sAuthType = 'M' //없으면 기본 선택화면, M(휴대폰), X(인증서공통), U(공동인증서), F(금융인증서), S(PASS인증서), C(신용카드)
let sCustomize = '' //없으면 기본 웹페이지 / Mobile : 모바일페이지
// 본인인증 처리 후, 결과 데이타를 리턴 받기위해 다음예제와 같이 http부터 입력합니다.
// 리턴url은 인증 전 인증페이지를 호출하기 전 url과 동일해야 합니다. ex) 인증 전 url : https://www.~ 리턴 url : https://www.~
let sReturnUrl = 'https://' // 성공시 이동될 URL (방식 : 프로토콜을 포함한 절대 주소)
let sErrorUrl = 'https://' // 실패시 이동될 URL (방식 : 프로토콜을 포함한 절대 주소)
let d = new Date()
let sCPRequest = sSiteCode + '_' + d.getTime()
//전달 원문 데이터 초기화
let sPlaincData = ''
//전달 암호화 데이터 초기화
let sEncData = ''
//처리 결과 메시지
let sRtnMSG = ''
sPlaincData =
'7:REQ_SEQ' +
sCPRequest.length +
':' +
sCPRequest +
'8:SITECODE' +
sSiteCode.length +
':' +
sSiteCode +
'9:AUTH_TYPE' +
sAuthType.length +
':' +
sAuthType +
'7:RTN_URL' +
sReturnUrl.length +
':' +
sReturnUrl +
'7:ERR_URL' +
sErrorUrl.length +
':' +
sErrorUrl +
'9:CUSTOMIZE' +
sCustomize.length +
':' +
sCustomize
let cmd =
sModulePath +
' ' +
'ENC' +
' ' +
sSiteCode +
' ' +
sSitePW +
' ' +
sPlaincData
await new Promise((resolve, reject) => {
// 리눅스 지식이 부족한 관계로 exec에 대해 공부하면서 작업
// exec 계열 함수는 현재 실행되고 있는 프로세스를 다른 프로세스로 대신하여 새로운
// 프로세스를 실행하는 함수이다.
// 즉 다른 프로세스로 대체되어 주어진 경로에 있는 새로운 프로세스의 main함수부터 다시 시작된다.
const child = exec(cmd, {
encoding: 'euc-kr',
})
child.stdout.on('data', data => {
sEncData += data
})
child.stderr.on('data', data => {
console.log('stderr: ' + data)
reject(data)
})
child.on('close', code => {
resolve(sEncData)
})
})
.then(data => {
sRtnMSG =
{
'-1': '암/복호화 시스템 오류입니다.',
'-2': '암호화 처리 오류입니다.',
'-3': '암호화 데이터 오류 입니다.',
'-9': '입력값 오류 : 암호화 처리시, 필요한 파라미터 값을 확인해 주시기 바랍니다.',
}[sEncData] || ''
})
.catch(err => {
sRtnMSG = '암/복호화 시스템 오류입니다.'
})
if (sRtnMSG !== '') {
return {
status: 400,
body: {
sEncData,
sRtnMSG,
},
}
} else {
return {
status: 200,
body: { sEncData, sRtnMSG },
}
}
})
위 코드 실행시 에러시엔 메시지 반환, 정상시엔 sEncData에 코드가 반환된다.
이코드를 가지고
signup.vue page
<script>
if (niceEncodeData.value && niceEncodeData.value != 'error') {
document.form_chk.action =
'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb'
document.form_chk.EncodeData.value = niceEncodeData.value
//submit! (본인인증 화면으로 전환)
document.form_chk.submit()
</script>
<templete>
<div class="hidden">
<form name="form_chk" method="post">
<input type="hidden" name="m" value="checkplusService" />
<input type="hidden" name="EncodeData" value="" />
</form>
</div>
</templete>
에 정보를 받아오면 본인인증 창으로 전환되고
본인인증이 완료되면 query로 값을 반환해준다.
하면서 어려웠던 점.
(https://velog.velcdn.com/images/neu5563/post/f1d4a3a0-58ec-447a-b687-3ad66871e1a5/image.png)