[Rest API] 자바 실제 계좌 예금주 확인 feat. 계좌실명조회 - (2) 최종코드

이런 모양의 모달창을 만들고 인출 버튼을 누르면 실제 계좌 예금주를 확인하는 코드가 진행될 것이다. 

 

 

[Vue.js]

모달창 코드이다. 이건 자유롭게 예쁘게 구상하면 되고 여기서 중요한건 <button @click="checkmyinfo"> 인출 </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>
                        <option value="004">국민은행</option>
                        <option value="020">우리은행</option>
                        <option value="088">신한은행</option>
                        <option value="003">기업은행</option>
                        <option value="023">SC제일은행</option>
                        <option value="011">농협은행</option>
                        <option value="005">외환은행</option>
                        <option value="090">카카오뱅크</option>
                        <option value="032">부산은행</option>
                        <option value="071">우체국</option>
                        <option value="031">대구은행</option>
                        <option value="037">전북은행</option>
                        <option value="035">제주은행</option>
                        <option value="007">수협은행</option>
                        <option value="027">씨티은행</option>
                        <option value="039">경남은행</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>

 

은행 코드는 아래의 사이트에 가면 나와있다. 나는 대중적인 은행 몇개를 골라서 작성했다~ 

API-아임포트

 

 

 

[checkmyinfo() 메서드] 

입력 한 은행 번호와 이름 계좌번호를 우선 다 받아온다. 기입하지 않고 인출 버튼을 누를 수 있으니 해당 부분도 막아준다. 그리고는 파람으로 필요했던 은행이름과, 계좌번호를 받아 axios를 진행한다. 그 후 결과가 성공이라면 값으로 받아온 예금주와 입력한 예금주를 비교하여 결과를 출력해 줄 것이다. 

 checkmyinfo() {
            const self = this;
            const bankselect = document.getElementById('bankselect');
            const accountname = document.getElementById('accountname');
            const accountnum = document.getElementById('accountnum');
 const data = {
      bank_code: this.bankname,
      bank_num: this.accountnum
               };
     self.$axios.get("http://localhost:8181/members/certifications/checkAccount", { params: data })
     .then(function (res) {
     if (res.status == 200) {
     console.log(res.data.bankHolderInfo)
     console.log(self.name); 
     }
     });
     )

 

[$axios back]

axios로 Back 단에 간 값을 이제 어떻게 처리 해주면 될까? 우선 1탄에서 말했던 것처럼 ① 토큰 값을 얻고  ② 파람으로 받은 값들을 API가 원하는 URL로 보내면 ③ 예금주의 성명을 리턴해 줄 것이다. 

 

[Controller]

axios를 통해 Back 단으로 넘어온 파람들을 이용하여 아래와 같이 구현한다. Map을 이용해 원하는 결과 값을 담아준다.  

@GetMapping("/certifications/checkAccount")
	public Map CheckAccount(@RequestParam("bank_code") String bank_code, @RequestParam("bank_num") String bank_num) {
		Map map = new HashMap<>();
		map = checkinfoservice.getAccessToken1(bank_code, bank_num);
	
		String bankHolderInfo = (String) map.get("bankHolderInfo");
		
		Object errorObj = map.get("error");
		if (errorObj instanceof String) {
		    String errorStr = (String) errorObj;
		    int error1 = Integer.parseInt(errorStr);
		    map.put("errormsg", String.valueOf(error1));
		} 

		
		map.put("bankHolderInfo", bankHolderInfo);
		return map;
	}

그렇다면 checkinfoservice.getAccessToken1 이 안에서는 무슨 일이 일어나고 있을 지 보자 

 

[Service]

HttpURLConnection으로 원하는 주소로 요청을 보내고 응답 받은 JSON객체를 파싱 하여 값을 받는 순서로 진행된다. Access Token을 발급받았다면 해당 토큰을 setRequestProperty를 이용하여 속성을 설정하고 예금주 성명을 요청하면 또다시 JSON으로 응답이 올 것이다. 그걸 또 파싱 해서 Map에 값을 담아 Return 하면 우리가 원하는 예금주 성명 조회를 성공적으로 마칠 수 있다~ 

public HashMap getAccessToken1(String bank_code, String bank_num) {

        HashMap map = new HashMap<>();
		String impKey = "본인의 키";
		String impSecret = "본인의 비밀키";
        // 토큰 요청 보낼 주소
		String strUrl = "https://api.iamport.kr/users/getToken"; 

		try {
         // url Http 연결 생성
			URL url = new URL(strUrl);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();

			// POST 요청
			conn.setRequestMethod("POST");
			conn.setDoOutput(true);// outputStreamm으로 post 데이터를 넘김

			conn.setRequestProperty("content-Type", "application/json");
			conn.setRequestProperty("Accept", "application/json");

			// 파라미터 세팅
			BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));

			JSONObject requestData = new JSONObject();
			requestData.put("imp_key", impKey);
			requestData.put("imp_secret", impSecret);

			bw.write(requestData.toString());
			bw.flush();
			bw.close();

			int resposeCode = conn.getResponseCode();

			System.out.println("응답코드 =============" + resposeCode);
			if (resposeCode == 200) {// 성공
				BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
				StringBuilder sb = new StringBuilder();
				String line;
				while ((line = br.readLine()) != null) {
					sb.append(line + "\n");
				}

				br.close();

				// 토큰 값 빼기
				JsonElement jsonElement = JsonParser.parseString(sb.toString());
		        String access_token = jsonElement.getAsJsonObject().getAsJsonObject("response").get("access_token").getAsString();
				System.out.println("Access Token: " + access_token);

				String getPaymentUrl = "https://api.iamport.kr/vbanks/holder";

				String query = String.format("?bank_code=%s&bank_num=%s", URLEncoder.encode(bank_code, "UTF-8"),
						URLEncoder.encode(bank_num, "UTF-8"));
				URL bankurl = new URL(getPaymentUrl + query);
				System.out.println(bankurl);

				HttpURLConnection getConn = (HttpURLConnection) bankurl.openConnection();
				getConn.setRequestMethod("GET");
				getConn.setRequestProperty("Content-Type", "application/json");
				getConn.setRequestProperty("Authorization", "Bearer " + access_token);

				int getResponseCode = getConn.getResponseCode();
				System.out.println("GET 응답코드 =============" + getResponseCode);

				if (getResponseCode == 200) {
					System.out.println("#########성공");

					BufferedReader getBr = new BufferedReader(new InputStreamReader(getConn.getInputStream()));
					StringBuilder getResponseSb = new StringBuilder();
					String getLine;
					while ((getLine = getBr.readLine()) != null) {
						getResponseSb.append(getLine).append("\n");
					}
					getBr.close();

					String getResponse = getResponseSb.toString();
					System.out.println("GET 응답 결과: " + getResponse);

					JsonParser parser1 = new JsonParser();
					JsonObject phoneJson1 = parser1.parse(getResponse).getAsJsonObject();

					// 예금주만 값 빼기
					String bankHolderInfo = phoneJson1.getAsJsonObject("response").get("bank_holder").getAsString();
					System.out.println("bankHolderInfo: " + bankHolderInfo);

					map.put("bankHolderInfo", bankHolderInfo);
				} else {
					map.put("error", getResponseCode);
				}

			}
		} catch (IOException e) {
			e.printStackTrace();
		}

		return map;
	}

이렇게 잘 불러오는 것을 확인 할 수 있다.