oAuth2는 외부 서비스에게 자신의 자원을 이용 할 수 있도록 인증과 권한을 관리해주는 시스템이다. 페이스북, 구글, 다음, 네이버등의 거대 인터넷회사들은 oAuth2를 이용해서 자신들이 가지고 있는 자원들을 이용할 수 있도록 허가하고 있다. 자세한 내용은 Google oAuth2 서비스 개발문서를 참고하자. 여기에서는 네이버의 oAuth2를 이용해서 네이버의 자원을 사용하는 방법에 대해서 살펴보려 한다. oAuth2에 대한 기본적인 정보는 앞에 이미 언급 됐으니, 실제 구현 위주로 살펴볼 생각이다.
다만 구현은 웹 서비스에 한정한다. 모바일 앱기반의 oAuth2 인증은 언젠가 모바일 프로그래밍에 관심을 가지게 되면 그때 해볼 생각이다.
클라이언트 등록
남의 자원을 사용하려면 허가를 받아야 할 것이다. 네이버 자원을 사용하려면, 네이버에 클라이언트로 등록을 해야 한다. 클라이언트 등록은 "애플리케이션 단위"로 이루어진다. 모바일 앱과 웹 사이트가 있다면 각각 따로 클라이언트를 등록해야 한다. 나는 www.joinc.co.kr에서 사용할 클라이언트를 등록하기로 했다. 클라이언트로 등록할 애플리케이션의 이름은 joinc로 하기로 해다.
네이버 개발자 지원센터에서 애플리케이션을 등록 할 수 있다. 애플리케이션을 등록하고 나면, 애플리케이션을 인증하는 Client ID와 Client Secret를 발급받는데 이 키들을 이용해서 로그인 과정을 수행 할 수 있다.
애플리케이션 이름 : joinc로 했다.
카테고리 : 마땅한 카테고리가 없어서 그냥 교육으로 했다.
이용 목적 : 로그인 오픈 API는 로그인을 위해서 사용한다. 비로그인 오픈 API는 로그인과 상관없이 네이버에서 제공하는 지도, 검색, 좌표 변환 등의 기능을 이용하고 싶을 때 선택하면 된다. oAuth2 테스트가 목적이라서 로그인 오픈 API만 선택했다.
서비스 URL : oAuth2를 사용할 서비스의 URL이다.
네이버아이디로그인 Callback URL : oAuth2를 사이트에 적용하면 네이버 로그인 버튼이 만들어진다. 이 로그인 버튼을 누르면, 네이버 로그인 창으로 이동해서 네이버 로그인 과정을 실행한다. 로그인이 끝나면, 호출할 페이지가 Callback URL이다. 이 URL에서 유저의 access token이 전달되는데, 이 토큰을 이용해서 유저가 로그인을 했는지와 유저의 정보(email, 생일, 유저 이미지등)을 확인 할 수 있다.
등록하기 버튼을 클릭하면 애플리케이션이 만들어진다. 이렇게 만들어진 애플리케이션은 내 애플리케이션에서 상세 설정을 할 수 있다.
다른 건 필요 없다. Cleint ID와 Client Secret만 알고 있으면 된다. 이 두개의 값을 이용해서 이 로그인 요청이 join에서 왔다는 것을 인증 네이버에 알려 줄 수 있다. Client ID는 외부에 공개해도 괜찮지만 Client Secret는 외부에 노출되면 안된다.
Client ID와 Client Secret를 발급 받았다면, 사이트에 네이버인증을 붙일 수 있다. 물론 네이버의 서비스들도 사용 할 수 있는데, 그건 나중 기회에... 대략적인 프로세스는 아래와 같다.
서비스 사이트(여기에서는 joinc)에 네이버 로그인버튼을 클릭한다.
네이버 로그인 페이지로 넘어가서 로그인을 한다. 유저가 이미 네이버에 로그인 한 상태라면, 허가 확인 메시지가 뜬다. 즉 Joinc 사이트에서 당신의 네이버 로그인 정보를 사용할 수 있는데, 허용 하시겠습니까 ?를 묻는다.
로그인을 끝내면 joinc의 콜백페이지로 넘어간다. 이때, 토큰 혹은 코드 정보들도 함께 넘어가는데, 이 정보를 이용해서 네이버를 통해서 로그인을 끝낸 유저인지를 확인 할 수 있다.
로그인 페이지를 만들어 보자.
<!-- 네이버 아이디로그인을 위한 자바스크립트 -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.2.js" charset="utf-8"></script>
<!-- 네이버아이디로로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<script type="text/javascript">
var naver_id_login = new naver_id_login("JOINC_CLIENT_ID", "JOINC_CALLBACK_URL");
var state = naver_id_login.getUniqState();
naver_id_login.response_type="code";
naver_id_login.setButton("white", 3, 40);
naver_id_login.setDomain("https://www.joinc.co.kr");
naver_id_login.setState(state);
naver_id_login.init_naver_id_login();
</script>
JOINC_CLIENT_ID : Joinc 서비스를 네이버에 등록하면서 받은 ID.
JOINC_CALLBACK_URL : 로그인이 끝나고 나서 호출할 JOINC 사이트의 페이지 URL
state : 사이트간 요청 위조(cross-site request forgery)을 막기 위한 값이다.
vaver_id_login을 이용해서 로그인과 관련된 다양한 설정을 할 수 있다.
response_type : 로그인 결과로 어떤 값을 받을지를 결정할 수 있다. code로 설정할 경우 네이버 코드가 반환되는데, 이 code를 이용해서 access token과 refresh token을 받을 수 있다. code는 one time이다. 즉 한번만 token을 받을 수 있다.
setButton : 로그인 페이지에 노출될 페이지의 형태와 색, 크기 등을 설정 할 수 있다.
setDomain : Joinc 서비스 등록시 설정한 도메인 이름
기타 몇 가지 설정 값들이 더 있는데, 이 값들은 자바스크립트 파일을 직접 열어봐야 한다. 어차피 몇 개의 헤더 값과 URL 파라메터의 설정을 도와주는 스크립트이기 때문에 어렵지 않게 해석 할 수 있다. 일단은 이 정도로 충분하다.
위에 있는 코드를 로그인 페이지에 입력하면 아래와 같은 로그인 버튼이 만들어진다.
참고로 이 로그인 버튼은 실제 작동한다. 버튼을 누르면 네이버 로그인 페이지로 넘어 간다. 네이버 로그인 상태라면, 로그아웃 한뒤에 테스트를 진행하면 된다. 아래는 동일한 일을 하는 curl 코드다. 자바스크립트 코드라서 뭔가 있어 보였겠지만, 그냥 값들을 URL 파라메터에 적어서 넘기는 간단한 코드다.
Contents
Naver oAuth2
클라이언트 등록
- 애플리케이션 이름 : joinc로 했다.
- 카테고리 : 마땅한 카테고리가 없어서 그냥 교육으로 했다.
- 이용 목적 : 로그인 오픈 API는 로그인을 위해서 사용한다. 비로그인 오픈 API는 로그인과 상관없이 네이버에서 제공하는 지도, 검색, 좌표 변환 등의 기능을 이용하고 싶을 때 선택하면 된다. oAuth2 테스트가 목적이라서 로그인 오픈 API만 선택했다.
- 서비스 URL : oAuth2를 사용할 서비스의 URL이다.
- 네이버아이디로그인 Callback URL : oAuth2를 사이트에 적용하면 네이버 로그인 버튼이 만들어진다. 이 로그인 버튼을 누르면, 네이버 로그인 창으로 이동해서 네이버 로그인 과정을 실행한다. 로그인이 끝나면, 호출할 페이지가 Callback URL이다. 이 URL에서 유저의 access token이 전달되는데, 이 토큰을 이용해서 유저가 로그인을 했는지와 유저의 정보(email, 생일, 유저 이미지등)을 확인 할 수 있다.
등록하기 버튼을 클릭하면 애플리케이션이 만들어진다. 이렇게 만들어진 애플리케이션은 내 애플리케이션에서 상세 설정을 할 수 있다.HTTPS 설정
로그인 페이지 만들기
- 서비스 사이트(여기에서는 joinc)에 네이버 로그인버튼을 클릭한다.
- 네이버 로그인 페이지로 넘어가서 로그인을 한다. 유저가 이미 네이버에 로그인 한 상태라면, 허가 확인 메시지가 뜬다. 즉 Joinc 사이트에서 당신의 네이버 로그인 정보를 사용할 수 있는데, 허용 하시겠습니까 ?를 묻는다.
- 로그인을 끝내면 joinc의 콜백페이지로 넘어간다. 이때, 토큰 혹은 코드 정보들도 함께 넘어가는데, 이 정보를 이용해서 네이버를 통해서 로그인을 끝낸 유저인지를 확인 할 수 있다.
로그인 페이지를 만들어 보자.<!-- 네이버 아이디로그인을 위한 자바스크립트 --> <script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.2.js" charset="utf-8"></script> <!-- 네이버아이디로로그인 버튼 노출 영역 --> <div id="naver_id_login"></div> <script type="text/javascript"> var naver_id_login = new naver_id_login("JOINC_CLIENT_ID", "JOINC_CALLBACK_URL"); var state = naver_id_login.getUniqState(); naver_id_login.response_type="code"; naver_id_login.setButton("white", 3, 40); naver_id_login.setDomain("https://www.joinc.co.kr"); naver_id_login.setState(state); naver_id_login.init_naver_id_login(); </script>- JOINC_CLIENT_ID : Joinc 서비스를 네이버에 등록하면서 받은 ID.
- JOINC_CALLBACK_URL : 로그인이 끝나고 나서 호출할 JOINC 사이트의 페이지 URL
- state : 사이트간 요청 위조(cross-site request forgery)을 막기 위한 값이다.
vaver_id_login을 이용해서 로그인과 관련된 다양한 설정을 할 수 있다.- response_type : 로그인 결과로 어떤 값을 받을지를 결정할 수 있다. code로 설정할 경우 네이버 코드가 반환되는데, 이 code를 이용해서 access token과 refresh token을 받을 수 있다. code는 one time이다. 즉 한번만 token을 받을 수 있다.
- setButton : 로그인 페이지에 노출될 페이지의 형태와 색, 크기 등을 설정 할 수 있다.
- setDomain : Joinc 서비스 등록시 설정한 도메인 이름
기타 몇 가지 설정 값들이 더 있는데, 이 값들은 자바스크립트 파일을 직접 열어봐야 한다. 어차피 몇 개의 헤더 값과 URL 파라메터의 설정을 도와주는 스크립트이기 때문에 어렵지 않게 해석 할 수 있다. 일단은 이 정도로 충분하다. 위에 있는 코드를 로그인 페이지에 입력하면 아래와 같은 로그인 버튼이 만들어진다. 참고로 이 로그인 버튼은 실제 작동한다. 버튼을 누르면 네이버 로그인 페이지로 넘어 간다. 네이버 로그인 상태라면, 로그아웃 한뒤에 테스트를 진행하면 된다. 아래는 동일한 일을 하는 curl 코드다. 자바스크립트 코드라서 뭔가 있어 보였겠지만, 그냥 값들을 URL 파라메터에 적어서 넘기는 간단한 코드다.Recent Posts
Archive Posts
Tags