네이버 아이디 로그인 Javascript로 AccessToken얻어오기

준비할것은 별로 없다.

간단하다.

크게 보면

1. naver에서 제공하는 sdk

2. jquery.js 와 jquery.cooke.js 

3. 어플리케이션 등록 정보

4. 프로그램 작성하기. (Web Server에서 oauth 인증관련 작업할 사항은 없다.)

1. SDK down받기

https://static.nid.naver.com/js/naverLogin.js 

SDK에 URL parameter 구하는 부분에 문제가 발생했다.

window.location.search.substring[1]를 사용했는데 

url이 http://127.0.0.1/#/home 이런식일 경우 window.location.search=''' 빈 문자열이 된다.

아래 소스를 다운 받으면 된다. _getParameterValue 함수를 추가하였다.

naverLogin.js

2. jquery.js   jquery.cookie.js 파일 다운

3. 어플리케이션 등록하기

https://nid.naver.com/devcenter/main.nhn

내 어플리케이션 - 어플리케이션 등록 하면 된다.

서비스 URL, Callback URL이  로컬 주소이다.  

naver에서는 callback url를 자신의 로컬로 보낼것이고 http request이기 때문에 response는 request한  device로 온다.

지금은 다른 URL로 callback할 이유가 없다. 

필요하면 그 때 URL를 변경하면 된다.(자신의 웹서버 주소로 callback url 설정하면 웹서버로 response이 온다.)

입력이 완료되면 Client ID, Client Screct가 발급된다.

3. Code 작성 - 입력할 사항. ( 이 외는 입력, 수정할 것이 없다.)

var naver = NaverAuthorize({

    client_id : "CLIENT_ID",

    client_secret : "CLIENT_SECRET",

    redirect_uri : "CallBack_URL"    <--  Callback URL을 입력한다. (여기에선 http://127.0.0.1/oauth.html)

});  

redirct_url 입력이 다르면 error_description callbackurl is missing., :state 1429699588122, :error invalid_request

이런 에러가 나온다. ( client_id와 redirect_url 이 다르다는 의미인듯.)

설정은 끝이다.

이것을 알아내는데 2주일정도 걸렸다. 네이버에서 제공해주는 문서가 틀리고 게다가  Q/A를  잘 안 해 주니.. 시간만 낭비했다.

oauth.html 다운 받아서소스 보면 쉽게 이해할 수 있다.

소스 다운 받기.

oauth.html

4. 유저의 정보 얻오어기.

위의 oauth.html에는 아래 소스를 추가하면 된다.

function getNaverUserInfo(){
   naver.api(URL, tokenInfo.access_token, function(data) {
       var response = data._response.responseJSON;
       console.log("success to get user info", response);
       alert(response.response.email);
   });
}

실행방법은

자신의 로컬 웹서버에서 올려놓구

http://127.0.0.1/oauth.html 을 실행하면 된다.