KCB 휴대폰 본인인증

혜진 조·2022년 12월 27일

리액트

목록 보기

19/31

KCB 휴대폰 본인인증 FE 개발 프로세스

백엔드에 KCB 팝업 URL로 POST할 때 필요한 데이터를 요청한다.
mdl_tkn: 토큰 , cp_cd: 회원사코드 등 받아온 데이터를 useState로 저장한다.


 const [mdl_tkn, setMdl_tkn] = useState();
 const [cp_CD, setCp_CD] = useState();

 const kcbRequsetToken = async () => {
    const id = localStorage.getItem("userId");
    const { result } = await axios(
      `token request path here`,
      "GET"
    );
    result && setMdl_tkn(result.mdl_tkn);
    result && setCp_CD(result.cp_CD);
  };

⬇️ KCB 본인확인 샘플 코드 ⬇️

<html>
<title>KCB 휴대폰 본인확인 서비스 샘플 2</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type="text/javascript">
	function request(){
		document.form1.action = "https://safe.ok-name.co.kr/CommonSvl";
		document.form1.method = "post";
		document.form1.submit();
	}
</script>
</head>

<body>
	<form name="form1">
	<!-- 인증 요청 정보 -->
	<!--// 필수 항목 -->
	<input type="hidden" name="tc" value="kcb.oknm.online.safehscert.popup.cmd.P931_CertChoiceCmd"/>	<!-- 변경불가-->
	<input type="hidden" name="cp_cd" value="P05510000000">	<!-- 회원사코드 -->
	<input type="hidden" name="mdl_tkn" value="0850231577b04485b5578cbe7e42ce3a">	<!-- 토큰 --> 
	<input type="hidden" name="target_id" value="">	
	<!-- 필수 항목 //-->	
	</form>
	<input type="button" value="test" onclick="request()"/>
</body>

</html>

위 코드를 참조해 form 태그에 method와 action 값을 주고, hidden input들의 defaultValue에 저장된 state를 연결한다.


<form action="https://safe.ok-name.co.kr/CommonSvl" method="post">
      <input type={"hidden"} name="mdl_tkn" defaultValue={mdl_tkn} />
      <input type={"hidden"} name="cp_cd" defaultValue={cp_CD} />
      <input
         type={"hidden"}
         name="tc"
         defaultValue={"kcb.oknm.online.safehscert.popup.cmd.P931_CertChoiceCmd"
              }
            />
     <Btn text="휴대폰 본인인증" type="submit" />
</form>