[최종 완성본] [진행 순서] 네이버 아이콘 클릭 -> 네이버 로그인 창 -> 로그인하는 순간 -> 요청 값들을 가지고 -> 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..

2탄에서는 vue.js 에서 axios를 이용하여 데이터들을 param을 담아 보냈다. self.$axios.get("http://localhost:8181/members/certifications/redirect", { params: data }) 이제 back에서는 파라미터로 넘어온 것들을 이용하여 어떻게 처리해 주는지 코드를 적어보았다. controller로 params 을 받아 Service로 넘긴다. 그 후 포트원 api 가 요구하는 것처럼 토큰값을 얻어 본인인증 한 사람의 정보를 조회하여 현재 가지고 있는 DB의 내용과 맞춰 그 뒤의 프로세스들을 진행 할 것이다. [Java] Controller // 본인인증완료 후 빼내 온 정보 중 핸드폰 번호와 입력한 핸드폰 번호가 일치한지 확인하고 // ..

1편에서는 kg이니시스 결제 창을 띄우는 것 까지 해봤다. 사실 api 가 문서를 읽고 분석하는데 제일 오랜 시간이 걸리지 한번 해 놓기만 하면 그렇게 화려한 기능이 아닐 수 가 없다. 약간 뭔가 되게 많이 한 기분.. 많이 한 척 할 수 있음... 핫 그렇다면 이제 결제가 성공 했는지 안했는지 확인을 어떻게 해야 하는지 알려면 문서를 또 봐야한다. [문서확인] 아래의 아임포트 github에서 README.md를 클릭하여 조금 내리면 아래와 같은 메세지를 만날 수 있다. GitHub - iamport/iamport-manual: 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. Contribute to iamport/iamport-manual ..

파이널 프로젝트에 결제 기능이 필요하여 알아보던 중 카카오에서 제공하는 카카오페이와 아임포트에서 제공하는 api기능을 제일 많이 사용하는 것을 확인할 수 있었다. 카카오로그인을 진행하면서 나름? 카카오 api 사용에 익숙해져 있던 터라 카카오페이를 구현했지만 우리 엄마는 카카오페이를 안 쓰는데.... 생각하니 너무 한 가지에 국한되어 있다는 생각을 하게 되었다. 그래서 이왕 한 거 정말 다양한 카드사들도 연동가능하게 구현을 해 보고 싶어서 아임포트를 이용한 결제 기능을 구현해 보았다. [아임포트란] 국내 PG결제 연동을 쉽게해주는 결제 API이다. 여기서 PG란 Payment gateway의 약자인데, 신용카드사와 직접 계약하기 어려운 온라인 쇼핑몰을 대신해 결제와 정산 업무를 대행해 주는 업체이다. [..