[Rest Api] 포트원 API를 이용한 본인인증 구현 (feat. vue.js) - (2)

이제 내가 완성한 최종 코드! 

내가 구현 한 본인인증은 아래와 같은 방식으로 진행된다. 

 

포인트 인출 클릭 -> 인출 관련 내용을 적는 모달창 -> 이용약관 동의 -> 인출 

 

[vue.js]

 

포인트 인출 클릭 

<button @click="[refundModal = true, Visible = false]">포인트 인출</button>

 

팝업 모달창 

<!-- 인출로직 -->
        <div class="black-bg" v-if="refundModal == true">
            <div class="refund-bg">
                <p style="font-size: 25px; border-bottom: 1px solid #7AC6FF; padding-bottom: 5px;"> 포인트 인출 </p>

                <div class="withdrawout"
                    style=" display: flex; align-items: center; justify-content: center; margin-bottom:-10px;">
                    <span class="cashout"> {{ paydto.paidamount }} 포인트 </span>
                </div>

                <div class="inputbox">

                    <input class="numberform" type="text" :placeholder="isPlaceholderVisible ? '인출 할 금액을 입력해 주세요' : ''"
                        v-model="formattedPrice" @focus="isPlaceholderVisible = false" @blur="handleBlur"
                        @input="formatPrice">
                </div>

                <div class="bankselect">
                    <select class="form-select" id="bankselect" v-model="bankname" aria-label="Default select example">
                        <option value="">은행선택</option>
                    </select>
                    <input class="inputname" id="accountname" type="text" v-model="name" placeholder="예금주명">
                    <br />
                </div>
                <br />
                <div class="account">
                    <input class="inputaccount" id="accountnum"  maxlength="14" :value="accountnum" @input="handleInput" placeholder="계좌번호">
                </div>

                <br /><span v-if="outcontractformcheck == false" @click="outcontractform">이용약관 동의</span><br />

                <div class="button-wrapper">
                    <button @click="checkmyinfo">인출</button>
                    <button @click="close">닫기</button>
                </div>
            </div>
        </div>

 

인출 이용약관 

 <!-- 인출 이용약관 -->
 
<div class="contract" v-if="withdrawcontractform == true">
<h3>계좌 개인정보 서비스 이용 약관 </h3>
<div class="text">
 제1조(목적) 이 약관은 〇〇은행(이하 “은행”이라 합니다.)과 이용자 사이의  ~~~~~~ 너무 길어서 생략!! 
</div>
 <div>
<div class="button-wrapper">
<p><button class="box" @click="withdrawagree">동의</button></p>
<p><button class="box" @click="withdrawreject">거부</button></p>
</div>
</div>
</div>

 

인출 버튼 클릭

checkmyinfo() {
            const self = this;
            const bankselect = document.getElementById('bankselect');
            const accountname = document.getElementById('accountname');
            const accountnum = document.getElementById('accountnum');

            if (bankselect.value == '' || accountname.value == '' || accountnum.value == '') {
                alert('입력 양식이 모두 채워지지 않았습니다.\n 모두 채운 후 다시 이용해 주세요.');
            } else if (self.price > self.paydto.paidamount) {
                alert('인출액이 보유 포인트보다 많아 거래가 불가능합니다')
                self.formattedPrice = '';
                self.isPlaceholderVisible = true;
            } else if (self.price == null || self.price == ' ') {
                alert('금액이 입력 되지 않았습니다')
            } else if (self.outcontractformcheck == false) {
                alert('이용약관에 동의 해주세요')
            } else {
                IMP.init("imp코드!");
                IMP.certification({
                    pg: 'MIIiasTest',
                    merchant_uid: 'merchant_' + new Date().getTime(),
                    m_redirect_url: "http://localhost:8181/members/checkmyinfo" //본인 리다이렉트페이지
                }, function (rsp) {
                    if (rsp.success) {
                        const data = {
                            imp_uid: rsp.imp_uid,
                            email: self.email
                        };
                        self.$axios.get("http://localhost:8181/members/certifications/redirect", { params: data })
                            .then(function (res) {
                                if (res.status == 200) {
                                    if (res.data.flag == false || res.data.name != self.name) {
                                        alert('plantiful에 등록 된 예금주 성함 및 전화번호가 \n 본인인증 결과와 일치하지 않습니다.')
                                        //원래대로 초기화 
                                        self.outcontractformcheck = false;
                                        self.name = '';
                                        self.bankname = '';
                                        self.accountnum = '';
                                    } else {
                                        const form = new FormData();
                                        form.append("email", self.email);
                                        form.append("paidamount", self.price);
                                        self.$axios.post("http://localhost:8181/payment/withdraw/" + self.email, form)
                                            .then(function (res) {
                                                if (res.status == 200) {
                                                    alert('인출이 성공적으로 이루어졌습니다')
                                                    self.refundModal = false;
                                                    window.location.reload(true);
                                                } else {
                                                    alert(res.data.message)
                                                    self.refundModal = false;
                                                    window.location.reload(true);
                                                }
                                            });
                                    }
                                }
                            });
                    } else {
                        // 인증취소 또는 인증실패
                        var msg = '인증에 실패하였습니다. \n';
                        msg += '에러내용 : ' + rsp.error_msg;
                        alert(msg);
                        self.accountnum = '';
                        self.name = '';
                        self.bankname = '';
                        self.outcontractformcheck = false;
                    }
                });
            }
        }