재밌고 어려운 IT를 이해해보자~!
네이버 로그인 API [TEAM PROJECT] 본문
네이버 로그인 API (OAuth 2.0)
클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다!
또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요.
이런 문제를 해결하기 위해, 구글이나, 페이스북, 네이버 같은 큰 기업들이 로그인 연동 기능을 제공해준다.
모든 사이트에 동일한 아이디와 비번으로 로그인하는 점은 좋지만,
보안성쪽으로는 아쉬울 수 있겠다...
그래도 한 사이트씩 가입하는 것 보다는 훨씬 나은 것 같다!
먼저 아래 사이트에서 로그인을 진행하고
https://developers.naver.com/apps/#/register?api=nvlogin
CDN
<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
클라이언트-
이 코드는 네이버의 OAuth 2.0 인증 과정을 JavaScript로 구현
OAuth 2.0은 사용자의 아이디와 비밀번호 정보를 직접 사용하지 않고도, 사용자의 동의를 통해 제3의 애플리케이션에서 사용자의 정보에 접근하거나, 사용자를 대신하여 특정 작업을 수행할 수 있게 하는 인증 방식.
클라이언트 아이디(clientId) : 네이버 개발자 센터에서 애플리케이션을 등록하면 발급되는 클라이언트 아이디
이 아이디는 사용자가 어떤 애플리케이션에서 인증을 요청하는지 네이버에 알려주는 역할
리디렉션 URI(redirectURI) : 네이버 로그인 인증 후, 인증 코드를 받을 수 있는 URI
이 주소는 네이버 개발자 센터에서 애플리케이션을 등록할 때 입력한 주소와 일치해야 한다.
상태 토큰(state) : CSRF(Cross-Site Request Forgery) 공격을 방지하기 위한 토큰
무작위 문자열을 생성하여 사용하며, 인증 요청 시와 인증 코드를 받는 시점에서 동일한지 확인함으로써 위변조를 방지
인증 요청 URL(apiURL) : 네이버에 OAuth 인증 요청을 보낼 URL
이 URL에는 위에서 생성한 클라이언트 아이디, 리디렉션 URI, 상태 토큰이 포함.
sessionStorage.setItem("state", state) : 생성한 상태 토큰을 웹 브라우저의 세션 스토리지에 저장
이는 인증 코드를 받을 때 생성한 상태 토큰과 비교하기 위한 목적
document.getElementById("naverLoginLink").addEventListener("click", function() {...}) : HTML 요소 중 id가 "naverLoginLink"인 요소를 클릭했을 때, 인증 요청 URL로 리디렉션하는 이벤트 리스너를 등록
이를 통해 사용자가 "네이버 로그인" 링크를 클릭하면 네이버의 OAuth 인증 페이지로 이동
이렇게 인증 요청을 보내고 나면, 사용자는 네이버 로그인 페이지에서 자신의 네이버 계정으로 로그인
로그인 후에는 등록했던 redirectURI로 리디렉션되며, 이 때 인증 코드가 URL의 쿼리 파라미터로 함께 전달
이 인증 코드를 이용해 애플리케이션 서버에서 네이버에 액세스 토큰을 요청하면, 액세스 토큰을 받아 사용자의 정보에 접근하거나 사용자를 대신하여 특정 작업을 수행할 수 있게 된다.
서버--
이 코드는 Java를 사용한 서블릿 클래스로, 네이버 로그인 기능을 구현한 것
- doGet 메소드: HTTP GET 요청을 처리하는 부분
- 먼저 네이버 로그인 API에 필요한 클라이언트 ID와 비밀번호를 선언하고, 사용자로부터 받은 'code'와 'state'를 가
- 이후 API 요청 URL을 만들어서 HTTP GET 요청
- 요청이 정상적으로 처리되면 (HTTP 상태 코드가 200이면) 응답으로 받은 JSON에서 'access_token'과 'refresh_token'을 추출
- 이후 'access_token'을 사용하여 사용자 프로필 정보를 요청
요청이 성공하면 응답으로 받은 JSON에서 사용자 정보(email, name, nickname 등)를 추출
- 추출한 사용자 정보를 이용하여 로그인 처리를 진행
- 먼저, MemberDAO 객체를 생성하고, 이를 이용해 사용자 정보를 DB에서 조회
- 조회된 사용자 정보가 '탈퇴' 상태가 아니라면 로그인 성공 처리를 한다.
성공한 경우, 세션에 사용자 정보를 저장하고, 메인 페이지로 리다이렉션 - 조회된 사용자 정보가 '탈퇴' 상태이거나, 사용자 정보가 존재하지 않는 경우 로그인 실패 처리를 한다.
실패한 경우, 에러 페이지로 이동
이처럼 이 클래스는 네이버 로그인 API를 이용하여 사용자의 로그인 요청을 처리하고, 로그인 성공/실패에 따라 적절한 페이지로 리다이렉션하는 기능을 수행한다.
*참조
'코리아IT핀테크과정' 카테고리의 다른 글
스프링 프레임워크, Bean태그, 결합도 (2) | 2024.02.26 |
---|---|
CKEditor [TEAM PROJECT] (0) | 2024.02.21 |
카카오 로그인 API [TEAM PROEJCT] (0) | 2024.02.21 |
모달창 [TEAM PROJECT] (0) | 2024.02.19 |
Pagination [TEAM PROJECT] (0) | 2024.02.15 |