2탄에서 vue의 전체적인 코드를 살펴보았다. vue에서 구현 한 것을 전체적으로 써보자면 네이버 로그인 이미지 버튼 클릭 -> naver 로그인 api 주소 호출 (여기에 클라이언트 아이디와 리다이렉트 주소, 난수를 생성하여 요청을 보냄) -> 네이버 아이디 로그인 후 리다이렉트 주소로 페이지가 이동함 -> 이때 주소의 끝에는 code와 state가 쿼리로 생성되어 있을 것이다. -> 해당 리다이렉트 주소로 오자마자 code랑 state를 가지고 토큰 생성하는 메서드 실행 -> code랑 state formData에 넣어서 axios.post로 백 단에 필요한 정보를 보냄 오늘 마지막으로 할 것은 받아온 fromData 를 이용하여 Access_Token을 발급받고, 그 토큰을 이용하여 유저의 정보를 ..

이런 모양의 모달창을 만들고 인출 버튼을 누르면 실제 계좌 예금주를 확인하는 코드가 진행될 것이다. [Vue.js] 모달창 코드이다. 이건 자유롭게 예쁘게 구상하면 되고 여기서 중요한건 인출 이 버튼이다. 이제 이 버튼을 클릭하면 아래의 메서드가 실행된다. 포인트 인출 {{ paydto.paidamount }} 포인트 은행선택 국민은행 우리은행 신한은행 기업은행 SC제일은행 농협은행 외환은행 카카오뱅크 부산은행 우체국 대구은행 전북은행 제주은행 수협은행 씨티은행 경남은행 이용약관 동의 인출 닫기 은행 코드는 아래의 사이트에 가면 나와있다. 나는 대중적인 은행 몇개를 골라서 작성했다~ API-아임포트 api.iamport.kr [checkmyinfo() 메서드] 입력 한 은행 번호와 이름 계좌번호를 우선 ..

파이널프로젝트로 내가 맡았던 부분인 멤버 및 결제 코드를 리팩토링 하던 중 나는 .. 그냥 지나치고 싶었던 코드를 건들게 된다. 그게 바로 계좌실명조회... 원래는 본인인증을 통해서 멤버테이블의 전화번호와 이름이 본인 인증한 내용과 맞다면 출금이 되는 식으로 진행 했었다. 근데 사실은 그게 아닌걸 너무 잘 알고 있었고 건들이면 밑도 끝도 없을 것 같았지만 다음 프로젝트를 위해 빠르게 구현 해보았다. 생각보다 어렵지 않았다. 라고 매번 쓰는데 친구가 내 글을 읽더니 왜 쉽다~쉽다해 놓고 막상 어려운 것 같다고 해서 이번에는 설명을 좀 꼼꼼하게 작성 해보고자 한다. 근데 사실 난 설명을 잘 못하는 병이 있어서... [금융결제원 오픈 API] 우선 내가 파이널 프로젝트 기간에 계좌실명조회를 하려고 했을 때는 ..

[최종 완성본] [진행 순서] 네이버 아이콘 클릭 -> 네이버 로그인 창 -> 로그인하는 순간 -> 요청 값들을 가지고 -> redirect 페이지로 이동 -> Access Token 발급 -> 토큰을 이용해서 사용자 정보 가져오기 -> 사용자 정보가 DB에 있는지 확인 -> 없다면 회원가입 -> 있다면 자동 로그인 [네이버 아이콘 클릭] @click 이벤트를 만들어 놓고 아래의 method 실행 @click="naverlogin" 메서드 naverlogin() { let client_id = "본인 client_id" let redirect_uri = encodeURIComponent("redirct_url", "UTF-8") const state = this.generateRandomState() c..