001. 네이버 로그인 API 사용 방법과 관련 지식

1. 네이버 개발자 사이트 등록과 Cilent ID, Client Secret 키 획득

로그인 API 사용을 위해 가장 먼저 해야할 일은 네이버 개발자 사이트에서 애플리케이션을 등록하는 일입니다.

다시 말해 네이버 측의 API 이용 신청을 해야합니다. 

개발자 사이트에 접속하여 로그인 후, 상단의 Application 메뉴의 애플리케이션 등록란에서 앱을 등록 할 수 있습니다.

이 때, Callback URL을 입력하게 됩니다. 요청에 대한 응답값이 이 주소로 반환되므로 기억해두는 것이 좋습니다.

물론 잊어버려도 내 애플리케이션에서 확인할 수 있습니다.

등록을 하셨다면 다시 Application 메뉴의 내 애플리케이션에서 Client ID와 Client Secret 키를 획득할 수 있습니다.

자주 이용하게 될 키이기 때문에 메모해두시면 됩니다.

2. code값 받아오기 

이제 로그인을 위해 code 값을 받아 오기 위한 요청문을 작성해야 합니다.

이 code 값은 추후 access token을 받는 데 사용합니다.

'네이버 아이디로 로그인'에 대한 API 명세 사이트에 요청문을 작성하기 위한 요청URL과 파라미터들이 자세히 작성되어 있으니 참조하시기 바랍니다.

code 요청을 위한 요청url은 https://nid.naver.com/oauth2.0/authorize 입니다.

code 요청문을 작성하기 위해 필요한 파라미터는 

response_type, client_id, redirect_uri, scope, state 입니다.

response_type은 code로 값이 고정됩니다. ( 예시 : response_type = code )

client_id에는 앞에서 말씀 드린대로 앱 등록 시 발급 되는 키값입니다. ( 예시 : client_id = xxxxxxxxxxxx )

redirect_uri 역시 앞에서 말씀 드린대로 앱 등록 시 입력했던 주소값입니다. 

주의할 점은 Urlencode* 형태로 인코딩 된 값이어야 합니다. 

예를 들어, http://www.naver.com 이라는 주소를 앱 등록 시 redirect_uri 값으로 입력했다면 인코딩이 적용된 값은 http%3A%2F%2Fwww.naver.com 입니다.

( 예시 : redirect_uri = http%3A%2F%2Fwww.naver.com )

scope는 네이버 측의 설명을 밀리자면 '접근허용 범위, 현재는 DB에 미리 설정된 값으로만 동작' 이며, 

예를 들어,  회원 DB에서 email값을 받고 싶다면 scope에 email을 입력하면 됩니다.

( 예시 : scope = email )

state는 네이버 측의 설명을 밀리자면 'CSRF를 방지하기 위해 사용하는 client side의 인증 값'입니다.

CSRF에 대한 설명은 잠시 미뤄두고, 이 값은 어떻게 생성하는지 저도 잘 몰라 조사를 했습니다.

이 값은 주로 서버 측에서 임의로 생성되어 클라이언트 측으로 배포되는 듯 합니다. 

서버는 클라이언트가 url을 통해 보내오는 state값을 파싱하여 생성된 값과 같은지 확인 후,  클라이언트의 요청의 유효성을 판단합니다.

이 부분에 대해서는 저도 자세하게 알지 못 하기 때문에 혹시나 제가 조사한 바가 정확하지 않다면 가르쳐 주시기 바랍니다!

위의 설명에 따라 최종적으로 작성되는 요청문은 아래와 같습니다.

https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=*****************&redirect_url=http%3A%2F%2Fwww.naver.com&state=[임의의값]

client_id는 보안상 *로 처리하였습니다.

네이티브 언어를 이용하여 코딩을 한다면, HttpClient의 url로 위의 문장을 입력하면 됩니다. 

하지만 이 API의 요청방식이 GET을 지원하므로 브라우저의 주소창에 이 문장을 입력하여 간단하게 테스트를 할 수 있습니다.

브라우저의 주소창에 정상적으로 작성된 문장을 입력했다면, 바뀐 주소창에 아래같은 형식의 url을 얻을 수 있습니다.

http://www.naver.com/?code=***************&state={임의의값]

필요한 값은 code의 값이므로 파싱하여 *부분을 추출하여 저장합니다.

3. access token 받아오기

code값을 받았다면 역시 위의 방식대로 access token 요청문을 작성할 수 있습니다.

요청 url은 https://nid.naver.com/oauth2.0/token 입니다.

필요한 파라미터는 grant_type, client_id, client_secret, code, state 입니다.

grant_type은 authorization_code로 고정합니다. ( 예시 : grant_type = authorization_code)

client_secret는 말 그대로 secret이므로 보안에 신경을 써야하는 값입니다. 

따라서 이 값을 이용하는 요청이라면 클라리언트 측이 아닌 서버 측에서 수행하는 것이 바람직합니다.

나머지는 code를 요청할 때와 같습니다.

최종적으로 작성되는 요청문은 아래와 같습니다.

https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=*************&client_secret=************&code=***************&state=[임의의값]

정상적으로 작성된 문장을 입력했다면, JSON형식의 오브젝트를 받을 수 있습니다.

역시 파싱하여 access_token을 저장하면 됩니다.

4. 세션과 쿠키 처리

로그인에 따라오는 필연적인 기능이 바로 로그아웃입니다. 그러나 API명세를 살펴봐도 로그아웃에 관한 정보는 찾아보기 힘들거예요.

단순히 생각해보면 로그인 창을 다시 띄워 로그인을 다시금 해주게 하면 그게 로그아웃이 아닌가라고 생각해 볼수도 있죠.

뭐 사실 이것도 틀린 건 아니지만, 만약 서버에서 사용자에 대한 로그인 상태 여부를 관리한다면 서버에 별도의 요청을 보내야 합니다.

이런 디테일한 부분은 둘째치고서라도 의문점이 드는 부분이, 로그인을 한번 수행 후 로그인창을 새로 띄웠는데 아이디와 패스워드 입력 부분이 틔어나오지 않고 바로 토큰을 받는 부분으로 넘어가는 부분이죠. 

사용자가 로그인 시 로그인과 관련하여 세션이나 쿠키와 같은 스토리지*에 정보가 기록됩니다. 이 세션이나 쿠키는 물론 일정 시간이 지나면 삭제될수도 있겠지만, 만약 삭제되지 않는 상황이라면 다른 아이디나 이전에 수행했던 아이디로의 재로그인을 불가능하게 합니다. 사용자가 뭘 원하느냐와만 상관없이 멋대로 이전의 아이디로 로그인 시키고서는 다음 페이지로 화면을 넘겨버립니다.

그래서 로그인 수행 후, 혹은 로그아웃 시점에서 스토리지에 기록된 로그인 관련 정보를 삭제해야 합니다. 

이와 관련하여 Cocos2d-x에서 스토리지 삭제와 관련된 글을 작성한 적이 있습니다. 

분류번호: [PS-001]  네이티브 플랫폼 별 쿠키 삭제 구현 방법

위의 글에서는 안드로이드와 iOS의 쿠키를 삭제하는 방법에 대해 설명하고 있습니다.

웹의 스크립트 언어(php, javascript, jsp 등등) 역시 스토리지를 삭제하는 방법이 있어 구글링을 조금만 하시면 금방 코드를 구할 수 있습니다.

5. 회원정보 받아오기

일반적으로 로그인만으로는 로그인 기능을 끝냈다고 할수는 없습니다. 

사용자의 고유한 정보를 알아야지 원격지에 있는 데이터베이스에 사용자와 관련된 정보를 기록하거나 가져올 수 있을테니까요. 

네이버의 회원정보 API를 이용하여 얻을 수 있는 회원 정보로는 email, nickname, profile image, age, gender, id, name, birthday 등이 있습니다. 

이 정보를 받아오기 위한 요청 url은 https://openapi.naver.com/v1/nid/me입니다.

앞에서와 같이 url에 복잡하게 이것저것 붙이지는 않지만, 요청헤더를 작성해야합니다.

요청헤더는 아래와 같이 작성합니다.

Authorization: Bearer [앞에서 받은 액세스토큰값]

아래 url에 예시가 자세하게 적혀있습니다.

https://developers.naver.com/docs/login/profile

응답 결과는 JSON형식입니다.

원하는 정보를 파싱하여 사용하시면 됩니다.

비교적 5번글은 간소하게 작성되었네요.

그러나 3번까지 진행하셨다면 5번부터는 어렵지 않습니다. 그리고 아래 네이버 개발자 사이트에 쉽게 적혀 있고, 더 많은 정보를 얻을 수 있습니다.

https://developers.naver.com/docs/login/profile

-----------출처----------

* urlencode 참조 : http://shinb.tistory.com/398

--------------------------------

네이버 API는 다른 SNS의 API보다 쓰기가 쉬웠습니다. 문서화가 잘 되어 있더군요. 
역시 네이버라는 말이 나오더군요. 허허...

아시는 분들이야 문제없이 넘어가겠지만, 아마 대부분의 분들이 4번에서 막히실 거라 생각합니다. 
부디 별탈없이 넘어가셨길 바랍니다. = _=...

그리고 이 글로써 제가 아는 모든 내용이 전달되진 않았을거라 생각되네요. 
잘 모르시는 부분 있으면 언제든지 댓글 남겨주세요 ~ 
물론 저도 모르는 부분이라면 함께 찾아보구요ㅎㅎ..

잘못 작성되었거나, 오타 있으면 지적바랍니다.

-------------보완 예정--------------
* 스토리지가 정확한 표현인지 조사가 필요
* 각 단락에 대한 캡처 사진 추가
* oauth, rest API, csrf 에 관한 지식 => 이 용어들에 대한 포스팅

------------------글 진도 : 초고 완료 / 보완 중------------------