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

파이널 프로젝트로 네이버 로그인을 구현 하던 중 16자리의 난수 생성이 필요 했다. 난수를 생성하는건 여러 방법이 있어 그 중에 두가지 방법을 소개 해보려고 한당 [Java] Random random = new Random(); String key = ""; for (int i = 0; i < 3; i++) { int index = random.nextInt(26) + 65; key += (char) index; } for (int i = 0; i < 6; i++) { int numIndex = random.nextInt(10); key += numIndex; } Random random = new Random() Random 클래스의 인스턴스를 생성하여 난수를 생성하기 위한 객체를 만든다. 이 객체를 ..

파이널 프로젝트로 구현한 네이버 로그인 api 도 정리해 볼까한다. 카카오와 비슷하지만 카카오보다는 쉽다! 감사합니다 네이버 ㅠㅠ [애플리케이션 등록] 카카오톡과 마찬가지로 일단 Naver Developers 에 들어가서 애플리케이션을 등록 해준다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 등록을 하면서 로그인 오픈API 서비스 환경에 PC 웹을 추가하면 아래와 같이 어딘가 묘하게 익숙한 것들을 볼 수 있다. 바로 카카오톡에서 한 것 처럼 서비스 url 주소와 redirect..

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