[Rest Api] 네이버 로그인 구현하기 (1) - vue.js
·
프로젝트/Plan + tiful (플랜티플)
파이널 프로젝트로 구현한 네이버 로그인 api 도 정리해 볼까한다. 카카오와 비슷하지만 카카오보다는 쉽다! 감사합니다 네이버 ㅠㅠ [애플리케이션 등록] 카카오톡과 마찬가지로 일단 Naver Developers 에 들어가서 애플리케이션을 등록 해준다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 등록을 하면서 로그인 오픈API 서비스 환경에 PC 웹을 추가하면 아래와 같이 어딘가 묘하게 익숙한 것들을 볼 수 있다. 바로 카카오톡에서 한 것 처럼 서비스 url 주소와 redirect..
[Rest Api] 포트원 API를 이용한 본인인증 구현 (feat. vue.js) - (3)
·
프로젝트/Plan + tiful (플랜티플)
2탄에서는 vue.js 에서 axios를 이용하여 데이터들을 param을 담아 보냈다. self.$axios.get("http://localhost:8181/members/certifications/redirect", { params: data }) 이제 back에서는 파라미터로 넘어온 것들을 이용하여 어떻게 처리해 주는지 코드를 적어보았다. controller로 params 을 받아 Service로 넘긴다. 그 후 포트원 api 가 요구하는 것처럼 토큰값을 얻어 본인인증 한 사람의 정보를 조회하여 현재 가지고 있는 DB의 내용과 맞춰 그 뒤의 프로세스들을 진행 할 것이다. [Java] Controller // 본인인증완료 후 빼내 온 정보 중 핸드폰 번호와 입력한 핸드폰 번호가 일치한지 확인하고 // ..
[Rest Api] 포트원 API를 이용한 본인인증 구현 (feat. vue.js) - (2)
·
프로젝트/Plan + tiful (플랜티플)
이제 내가 완성한 최종 코드! 내가 구현 한 본인인증은 아래와 같은 방식으로 진행된다. 포인트 인출 클릭 -> 인출 관련 내용을 적는 모달창 -> 이용약관 동의 -> 인출 [vue.js] 포인트 인출 클릭 포인트 인출 팝업 모달창 포인트 인출 {{ paydto.paidamount }} 포인트 은행선택 이용약관 동의 인출 닫기 인출 이용약관 계좌 개인정보 서비스 이용 약관 제1조(목적) 이 약관은 〇〇은행(이하 “은행”이라 합니다.)과 이용자 사이의 ~~~~~~ 너무 길어서 생략!! 동의 거부 인출 버튼 클릭 checkmyinfo() { const self = this; const bankselect = document.getElementById('bankselect'); const accountname ..
[Rest Api] 포트원 API를 이용한 본인인증 구현 (feat. vue.js) - (1)
·
프로젝트/Plan + tiful (플랜티플)
[최종 구현 서비스] 포트원을 이용한 본인 인증을 구현해보려고 한다. 포트원, 온라인 비즈니스를 위한 통합 결제 솔루션 코드 한 줄로 세상 모든 방식의 결제를 경험해보세요 portone.io 해당 사이트에서 어떤 api 로 본인인증을 할 것인지 골라야 한다. 보통은 아래처럼 다날 서비스를 많이 이용하는데 다날은 한 건당 50원이 발생하여 포기... 테스트잖아 이것 드라.. 왜 돈 받는데 그래서 나는 kg이니시스 본인 인증으로 진행했다. 아직 가난한 취준생이니까.. [테스트 연동] 결제 api 를 진행했던 순서와 비슷하다. 똑같이 결제연동을 해주면 되고 kg이니시스의 본인인증 기능을 테스트 버전으로 등록한다. 혹시 결제 api 순서를 보고 싶으면 아래의 링크로! [Rest Api] 아임포트를 이용한 KG이..
해니01_15
'프로젝트' 카테고리의 글 목록 (2 Page)