네이버 로그인 API 콜백 URL 오류 등록 팁 JSP 자바스크립트 예제
네이버 로그인 API 콜백 URL 오류 줄이는 등록 방법과 자바스크립트 예제 정리
네이버 로그인은 문서가 비교적 친절해서, 처음 붙일 때도 길을 잃는 경우는 드뭅니다. 다만 실제로 붙여보면 콜백 URL 등록에서 의외로 시간을 많이 씁니다. 값이 맞는데도 로그인 에러가 계속 나거나, 수정했는데도 이전 값처럼 동작하는 상황이 종종 나오기 때문입니다.
제 경험상 가장 안전한 쪽은 “일단 해보고 고치기”보다, 서비스 URL·콜백 URL·도메인·포트를 먼저 확정해두고 한 번에 등록하는 방식이었습니다. 운영 환경이 여러 개(로컬/개발/스테이징/운영)라면 더더욱 그렇습니다.
| 항목 | 자주 생기는 증상 | 바로 점검할 것 |
|---|---|---|
| 콜백 URL | 로그인 실패, “로그인 할 수 없습니다” | 스킴(http/https), 경로, 포트, 마지막 슬래시 여부 |
| 서비스 URL | 도메인 불일치, 버튼 동작 이상 | 실제 서비스 도메인과 동일하게, 서브도메인 포함 |
| 환경 분리 | 로컬은 되는데 서버에서 실패 | 환경별 콜백 URL을 모두 등록(가능 범위 내)하고, 배포 후 URL 재확인 |
| 브라우저 동작 | 팝업 차단, 창 닫힘/유지 문제 | 팝업/리다이렉트 방식 선택, callback 페이지 분리 여부 |
API 신청하기
https://developers.naver.com/products/login/api/api.md
주요 호스팅사 자동 연결 카페24/메이크샵/플렉스지 솔루션을 이용중이시라면, 네이버 로그인 연동 기능이 탑재되어 보다 빠르게 적용할 수 있어요.
developers.naver.com
해당 페이지에서 이용 신청과 문서, 그리고 샘플을 한 번에 볼 수 있습니다.
로그인 연동은 결국 “등록 값이 맞느냐”에서 대부분 승부가 나서, 신청 화면에서부터 꼼꼼히 보는 편이 헷갈림이 줄어듭니다.
이용 신청을 누르면 네이버 로그인 항목이 포함된 애플리케이션 등록 화면으로 이어집니다.
여기서 앱 이름과 제공 동의 항목을 체크하고, 서비스 환경은 PC 웹을 선택하는 경우가 많습니다.
중요한 건 서비스 URL과 콜백 URL을 적는 순간입니다. 한두 글자 차이로도 오류가 나고, 수정했는데도 바로 바뀌지 않는 듯한 경우가 생깁니다. 저는 이 구간에서 시간 낭비가 크게 나서, 등록 전에 주소를 메모장에 먼저 확정해두는 습관이 생겼습니다.
주소가 안 맞으면 이유 없이 멈춘 것처럼 보여서 괜히 미신을 믿게 됩니다.
테스트 사용자는 꼭 추가하지 않아도 개발자 본인 계정으로는 동작 확인이 되는 편이라, 처음에는 최소 구성으로도 시작 가능합니다. 등록이 끝나면 클라이언트 ID를 발급받게 됩니다.
튜토리얼 확인하기
Web 애플리케이션 - LOGIN
네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예제 예제
developers.naver.com
Web 문서에 들어가면 언어별로 예제가 나뉘어 있어서, 본인 스택에 맞춰 복사해 붙여도 큰 틀은 바로 잡힙니다.
저는 브라우저 쪽에서 처리하는 자바스크립트 예제를 기준으로 봤고, 구성 자체가 “로그인 페이지”와 “콜백 페이지”로 분리돼 있는 점이 깔끔했습니다.
JSP로 작업하더라도, 예제의 핵심은 클라이언트 ID와 콜백 URL을 정확히 넣고, 팝업/리다이렉트 방식에 맞춰 스크립트를 초기화하는 것이라 그대로 응용이 가능합니다.
네이버 로그인 JavaScript 예제는 2개의 파일로 구성되어 있습니다. (naverlogin.html, callback.html)
1. APIExamNaverLogin.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 로그인</title>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<!-- 네이버 로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<!-- //네이버 로그인 버튼 노출 영역 -->
<script type="text/javascript">
var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 2,40);
naver_id_login.setDomain("YOUR_SERVICE_URL");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();
</script>
</html>
2. callback.html
<!doctype html>
<html lang="ko">
<head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
alert(naver_id_login.getProfileData('email'));
alert(naver_id_login.getProfileData('nickname'));
alert(naver_id_login.getProfileData('age'));
}
</script>
</body>
</html>콜백 URL을 로그인 페이지와 합쳐서 “한 페이지로 끝내기”도 시도해볼 수는 있습니다.
그런데 자동 로그인처럼 사용자 입력 없이 바로 인증이 끝나는 상황에서는, alert가 뜨거나 팝업이 예상대로 닫히지 않으면 화면이 어색하게 남는 경우가 생길 수 있습니다.
그래서 저는 로그인 페이지와 콜백 페이지를 분리해서, 콜백은 “값 처리만 하고 조용히 종료”시키는 편이 더 안정적이었습니다. 특히 서비스 환경에서 QA가 붙으면 이런 디테일에서 컴플레인이 잘 나옵니다.
naver_id_login.setButton("white", 2,40);
이 부분은 버튼 스타일을 바꾸는 설정으로 알려져 있습니다.
색상과 타입, 크기 값이 섞여 들어가는데, 구글처럼 버튼 옵션을 웹에서 클릭으로 뽑아주는 방식은 아니라서 직접 손으로 조정하는 경우가 많습니다.
대신 네이버는 버튼 이미지/BI 자료를 별도로 제공합니다. 디자인을 직접 만지는 팀이면 이 자료가 오히려 편할 때도 있습니다.
네이버 로그인 버튼 사용 가이드 - LOGIN
developers.naver.com
예제에서는 white 같은 값이 색상 계열을, 숫자 값이 버튼 타입/표현 방식을 바꾸는 쪽으로 보입니다.
참고로 실제 화면에서 미묘하게 달라져서, 적용 후 브라우저에서 바로 확인하는 게 가장 빠릅니다.
예제
기존에 붙여둔 구글 로그인에 네이버 로그인을 같이 올렸었는데 우선 네이버 쪽은 스크립트에서 버튼을 만들어서, 화면에는 노출용 div 하나만 두면 되는 구성이었습니다.
HTML부분 (JSP진행)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<!-- 구글 로그인 JavaScript -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script type="text/javascript" src="js/loginGoogleAPI.js" defer></script>
<!-- 네이버 로그인 -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<!-- 네이버 로그인 외부 Js연결 defer를 작성하거나 window.onlaod 등의 처리 필요 -->
<script type="text/javascript" src="js/naverLogin.js" defer></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
section{display:flex;}
div{margin : 5px;}
</style>
</head>
<body>
<section id="content">
<section>
<%-- 구글 로그인 버튼 시작--%>
<div id="g_id_onload"
data-client_id="클라이언트 ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="icon"
data-shape="circle"
data-theme="outline"
data-text="signin_with"
data-size="large">
</div>
<%--구글 로그인 버튼 끝 --%>
<!-- 네이버 로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<!-- //네이버 로그인 버튼 노출 영역 -->
</section>
</section>
</body>
</html>위처럼 화면 단에서는 div만 잡고, 실제 버튼 스타일과 동작은 외부 JS에서 초기화하는 방식입니다.
그래서 defer를 붙이거나, 로딩 타이밍을 잡아주는 처리가 없으면 버튼이 비어 보이는 상황도 생깁니다.
콜백 페이지 (JSP , 네이버 튜토리얼 적용)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ko">
<head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("hcTxahuo34mlruwlJ53w", "http://localhost:8088/apiTest/callback.jsp");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
alert(naver_id_login.getProfileData('email'));
alert(naver_id_login.getProfileData('nickname'));
alert(naver_id_login.getProfileData('age'));
}
</script>
</body>
</html>여기서 주의할 점은, 동의 항목으로 허용하지 않은 값은 그대로 호출하면 undefined가 나올 수 있다는 겁니다.
여기서 예를 들어 age를 체크하지 않았다면, 코드가 맞아도 결과는 비어 보입니다.
로그인 페이지 외부 Js (네이버 튜토리얼 적용)
console.log('naverLogin');
//네이버 로그인 기본 설정
var naver_id_login = new naver_id_login("클라이언트 ID", "http://localhost:8088/apiTest/callback.jsp");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 1,40);
naver_id_login.setDomain("http://localhost:8088/apiTest/login.jsp");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();이 스크립트에서 setDomain과 콜백 URL이 서로 어긋나면, “동작은 하는데 로그인만 실패” 같은 애매한 상황이 나올 때가 있습니다. 브라우저 주소창에 보이는 실제 URL과 완전히 동일한지 먼저 맞추는 편이 빨랐습니다.
화면
실제 화면은 이처럼 간단하게 나오고, 버튼 동작은 전부 스크립트에서 결정됩니다. 그래서 UI는 단순해 보이는데, URL 한 글자 때문에 갑자기 멈추는 것처럼 보일 때가 있어 더 당황스럽습니다.
오류 해결하기
서비스 설정 오류 문제 : 네이버 로그인 고객센터
네이버 서비스 이용에 필요한 고객센터 도움말을 확인해 보세요. 검색과 스마트봇으로 더욱 쉽고 빠르게 궁금한 점을 해결할 수 있습니다.
help.naver.com
오류 문구가 뜨면 당황하기 쉬운데, 네이버 고객센터 쪽에 케이스가 꽤 모여 있습니다.
특히 “설정 문제”로 분류되는 에러는 메시지가 비슷하게 반복되는 편이라, 문구만으로도 방향이 잡힙니다.
저는 진행 중에 “로그인 할 수 없습니다”가 떠서 한참 헤맸던 적이 있습니다. 콜백 URL을 수정했는데도 계속 실패해서, 코드 문제를 의심하고 로그만 파고 있었는데요.
결론부터 말씀드리면, 원인은 콜백 URL 불일치가 맞았습니다. 다만 수정한 값이 즉시 반영되지 않은 것처럼 보이면서, 같은 에러가 계속 반복됐던 것으로 추정됩니다.
그래서 성격 급한 쪽(저 포함)은 애플리케이션을 새로 만들어 값을 다시 잡는 게 오히려 빠를 때가 있습니다.
연습 겸 한 번 더 만드는 셈 치면 마음도 편해집니다.
| 에러가 나면 먼저 보는 순서 | 확인 기준 |
|---|---|
| 1) 콜백 URL 문자열 비교 | 브라우저에서 실제 호출되는 URL과 한 글자도 다르면 실패 가능 |
| 2) 포트/스킴 확인 | http/https, 80/443/개발포트(예: 8080/8088)까지 포함 |
| 3) 팝업 차단 여부 | setPopup 사용 시 브라우저/확장프로그램 영향 확인 |
| 4) 동의 항목 | 허용하지 않은 항목은 undefined가 정상 |
| 5) 값 수정 후 재검증 | 수정 직후에도 실패가 이어지면 새 앱 생성이 빠를 때가 있음 |
운영 환경에서는 특히 관리망/방화벽/리버스 프록시 때문에 실제 외부 URL이 내부 URL과 달라지는 경우가 있습니다. 이때 콜백 URL을 내부 주소로 넣어버리면, 로컬에서는 맞는데 배포하면 깨지는 전형적인 패턴이 됩니다.
또 하나는 보안 관점입니다. 네이버 로그인에서 토큰을 다루게 되면, 주소창/로그/브라우저 저장소에 값이 남는지 확인해두는 편이 안전합니다. 예제처럼 alert로 토큰을 띄우는 방식은 개발 확인용으로만 쓰고, 배포에서는 지우는 게 마음 편합니다.
Q. 네이버 로그인 콜백 URL은 한 개만 등록해야 하나요?
A.여러 환경을 쓰면 여러 개가 필요합니다. 로컬/개발/운영처럼 주소가 다르면 그만큼 등록이 필요하고, 특히 포트가 다르면 각각 따로 잡아두는 편이 안전합니다.
Q. “로그인 할 수 없습니다”가 뜨는데 코드가 문제인지 URL이 문제인지 어떻게 구분하나요?
A.먼저 콜백 URL 문자열부터 비교하는 게 빠릅니다. 스킴/포트/경로가 완전히 같으면, 그다음으로 팝업 차단과 서비스 URL, 동의 항목을 봅니다.
Q. callback 페이지를 로그인 페이지와 합쳐도 되나요?
A.가능은 하지만, 자동 로그인처럼 바로 인증이 끝나는 상황에서 창 동작이 어색해질 수 있습니다. 저는 콜백을 분리해 “처리만 하고 종료”시키는 쪽이 안정적이었습니다.
Q. 네이버 로그인에서 사용자 정보가 undefined로 나옵니다. 오류인가요?
A.동의 항목에서 허용하지 않았다면 정상입니다. 필요한 항목을 콘솔로 확인하고, 애플리케이션 설정에서 제공 동의를 맞춘 뒤 다시 호출하면 됩니다.
Q. 버튼 디자인을 바꾸려면 어디를 만지면 되나요?
A.스크립트의 setButton 파라미터가 시작점입니다. 적용 후 브라우저에서 바로 확인하는 게 빠르고, BI 자료가 필요한 경우 문서의 버튼 가이드를 참고해 디자인 쪽과 맞추는 편이 낫습니다