[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 구현 (6) - vue.js 최종 코드
·
프로젝트/Plan + tiful (플랜티플)
카카오톡 로그인 메서드 구현 kakaoLogin() { const redirect_uri = 'http://localhost:8182/kakaojoin'; const clientId = '자신의 키'; const Auth_url = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirect_uri}`; window.location.href = Auth_url; } created 함수 적용 카카오디벨로퍼스에 미리 정해 놓은 클라이언트 측 redirect_uri 페이지를 component로 작성한다. 그 뒤 해당 페이지가 로딩되자마자 인자로 받았던 인가코드를 빼내어 카카오톡에게 ..
[Rest Api] vue와 Spring boot를 이용한 카카오톡 로그인 api 구현 (4) - 응답 받은 토큰 값으로 사용자 정보 가져오기
·
프로젝트/Plan + tiful (플랜티플)
3탄에서 응답으로 아래와 같은 토큰 값을 받았다. 이번에는 이 토큰을 이용해서 로그인 한 사용자의 정보를 가져오는 것을 진행해 보려고 한다. 2탄에서 언급한 vue 의 getToken() 메서드를 통해 진행되는 것이며 여러 번 나눠서 포스팅했지만 사실은 이게 모두 한 개의 요청으로 이루어진다는 사실... 아직 이 메서드 진행이 끝나지 않았다... 백앤드에서 받은 @GetMapping("/kakaologin/{code}") 중 '토큰을 요청하여 얻음' 까지 진행이 완료되었고 얻은 토큰으로 사용자 정보를 요청하려고 한다. // 코드를 빼와서 access token 을 얻어다 줄 것임 @GetMapping("/kakaologin/{code}") public HashMap kakaoLogin(@PathVaria..
해니01_15
'파이널프로젝트' 태그의 글 목록