오픈 API 사용하기 - 네이버 아이디로 로그인(로컬)

요즘 웬만한 사이트에서, 이미 사용중인 타 사이트 아이디로 가입하는 방식을 보실 수 있는데요.

이를 OAuth 방식이라고 합니다.

( OAuth: 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. )

[출처: 나무위키]

사용해 보신 분들은 알겠지만, 굉장히 편리한 기능입니다.

OAuth 방식의 '네이버 아이디로 로그인하기'를 적용하는 법을 알아보도록 하겠습니다.

우선, Naver Developers에 들어가 로그인을 하고 '오픈 API 이용 신청>' 버튼을 클릭합니다.

그러면 아래와 같은 화면이 나오는데, 애플리케이션 이름과, 필요한 정보를 선택합니다.

다음으로,, '네이버로 로그인하기'는 로컬을 지원하긴 하는데,, 

'localhost'로 바로 지정할 수 없고, '127.0.0.1'로 추가한 후 따로 추가를 해주어야 합니다.

관련 답변이 몇가지 있던데, 답변이 일정하지가 않은 것 같아 좀 헤맸습니다.

(확실한 것은 아닌데,, 아래와 같이 하면 URL이 꼬이진 않을 것 같네요.)

설정이 다 되었다면 '등록하기' 버튼을 누릅니다.

내 어플리케이션에 들어가보면 아래와 같은 정보가 있습니다.

위 두가지 정보와,  좀전의 2가지 URL, 총 4가지를 기억해둡니다.

(Client ID, Client Secret, //  서비스 URL, 'localhost'를 사용한 CallbackURL)

.................................................

[API 명세] -> [로그인 API 명세]로 들어가시면 언어별로 API 호출 예제가 존재합니다. 

(저는 JavaScript로 진행하였습니다.)

예제를 자세히 보시면 페이지 2개가 있습니다.

1. '네이버로 로그인 하기' 아이콘이 있는 페이지 (서비스 URL)

2. 로그인 후 처리 페이지 (CallBack URL)

첫번째로, '네이버 아이디로 로그인하기' 버튼이 있는 페이지를 보시면

[login.jsp]

위와 같이 위에서 말한 4가지 정보 중, Client ID, 서비스 URL, CallBack URL를 찾아서 삽입합니다.

(주의할 점은, '127.0.0.1'이 아닌, 'localhost'가 포함된 CallBack URL을 넣는다는 것입니다.)

그리고, 로그인 후 처리 페이지를 보시면,

[loginPostNaver.jsp]

위와 비슷하게 Client ID, CallBack URL 를 찾아 삽입하면 되는데,

CallBack URL은 위와 같이 'localhost'가 포함된 주소를 삽입합니다.

주석에 보이는 접근 토큰(access token)으로 로그인한 회원의 '프로필 조회'를 비롯한 여러가지 다른 오픈 API를 호출할 수 있는 듯 합니다. 

참고로 컨트롤러는 단순합니다.

위 두가지 페이지로 가게 해주게 설정합니다.

[UserController.java]

확인을 한번 해볼까요??

'네이버 아이디로 로그인하기' 버튼을 눌러봅시다.

아래와 같은 네이버 로그인 팝업창이 뜹니다.

로그인 하시면, 약정 확인 화면이 나오는데,, 이를 동의하시면 연동이 완료됩니다.

개발자 도구로 보시면,, 아래와 같이 네이버에서 저의 정보들이 넘어 온 것을 확인하실 수 있습니다.

끝입니다. 위와같이 넘어온 자료를 잘 다듬어서 활용하시면 됩니다.

고생하셨습니다.