실제 구현 예 네이버 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 네이버 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 네이버 로그인을 구현해 보겠습니다. 네이버 로그인 API 사용을 위한 애플리케이션 설정 개발의 흐름은 먼저 네이버 개발자 사이트에서 애플리케이션을 세팅을 한 후 사이트 코드를 작성해 주면 됩니다. 먼저 아래 사이트에서 로그인을 진행해 줍니다. https://developers.naver.com/apps/#/register?api=nvlogin TYPE1 *네이버 디벨로퍼를 처음 쓰신 분 약관 동의 -> 계정 정보 등록 -> 어플리케이션 등록 순으로 진행됩니다. 사용 API 선택을 아래와 같이 '네아로(네이버 아이디로 로그인)' 선택. 맨 아래 로그인 오픈 API 서비스 환경을 PC웹으로 선택하면 아래와 같은 화면이 나옵니다. TYPE 2 *네이버 디벨로퍼를 처음 안 쓰신 분은 아래 화면으로 바로 나옵니다. 로그인을 진행하게 되면 애플리케이션 등록 페이지가 나옵니다. (Callback URL은 로그인 성공 시 요청되는 URL입니다.) 등록이 완료되면, 내 애플리케이션 정보를 확인하실 수 있습니다. 코드 - javascript & jsp
단순하게 해당 코드를 사용하고자 하는 html페이지나 jsp페이지에 붙여놓습니다.
Login 먼저 버튼으로 활용할 태그 안에 id="naverIdLogin_loginButton"를 입력해줍니다. 해당 id로 된 버튼을 클릭하게 되면 자동으로 네이버 로그인 페이지로 이동하게 되며, 로그인 및 동의 후에 내가 설정한 callbackUrl로 이동합니다.(위 예제는 다시 해당 페이지로 이동하는 것으로 진행했습니다.) naverLogin.getLoginStatus함수는 현재 로그인이 진행되었는지 체크하며, true이면 console.log에 사용자 정보를 뿌려줍니다. 만약 필수 정보가 누락됐다면 , 변수에 담아(email처럼) 조건문으로 다시 동의 항목으로 이동하게(naverLogin.reprompt() 함수) 처리해줍니다. Logout
정리 네이버 디벨로퍼 홈페이지에서 네이버 아이디 로그인 예제의 스크립트 버전이 1.0.3입니다. 하지만 네이버에서 제공해주는 최신 버전은 2.0.2이며, 최신 버전으로 적용했을 땐 홈페이지에 작성된 예제가 작동하지 않아 시행착오를 겪었습니다. 뿐만 아니라 로그아웃에 대한 설명이나 예제가 없으며, 네이버 디벨로퍼 포럼에서 이러한 불편함을 겪은 많은 이용자의 질문이 있었지만 답변이 따로 없는 걸 보았습니다. 조금 불편하게 개발했지만, 제가 찾지 못한 것일 수 있어 부족한 점이 많을 수 있으니 잘못된 점은 댓글로 남겨주시길 부탁드립니다. 카카오 로그인 구현 방법 tyrannocoding.tistory.com/49 [자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 카카오 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하 tyrannocoding.tistory.com 페이스북 로그인 구현 방법 tyrannocoding.tistory.com/50 [자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 페이스북 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하 tyrannocoding.tistory.com 구글 로그인 구현 방법 https://tyrannocoding.tistory.com/51 [자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 구글 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때 tyrannocoding.tistory.com |