네이버 로그인 view

네이버 로그인 제작시 login.jsp에는 자바 코드로 제작 되어있었다

	<%
		String clientId = "클라이언트 아이디";//애플리케이션 클라이언트 아이디값";
		String redirectURI = URLEncoder.encode("http://localhost:8088/naverLogin", "UTF-8");
		SecureRandom random = new SecureRandom();
		String state = new BigInteger(130, random).toString();
		String apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type=code";
		apiURL += "&client_id=" + clientId;
		apiURL += "&redirect_uri=" + redirectURI;
		apiURL += "&state=" + state;
		session.setAttribute("state", state);
		%>
		<a href="<%=apiURL%>"><img height="50"
			src="/resources/assets/img/jarvis/naver_button.png" /></a>

 

하지만 이런 방법으로 호출하게 되면

클라이언트 아이디가 웹 표면에 그대로 노출되게 되는데

클라이언트 아이디는 네이버 로그인를 식별하는 고유한 값인데 이를 사용자에게 노출하게 되면 보안 취약점이 발생 할 수있다

그래서 사용자의 개인정보 보호를 위해 클라이언트 아이디는 비동기로 컨트롤러에게 받아오고 자바코드를 없애기 위해

스크립트를 이용해 제작하였습니다

<a id="naver-login-btn">
    <img src="/resources/assets/img/jarvis/naver_button.png" height="50" alt="네이버 로그인" />
</a>

<!-- 네이버 로그인 스크립트 -->
<script type="text/javascript">
    document.getElementById('naver-login-btn').addEventListener('click', function() {
    	 $.ajax({
             type: "GET",
             url: "/getNaverClientId",
             success: function(response) {
                 var naverClientId = response;
                 var redirectURI = encodeURIComponent("http://localhost:8088/naverLogin");
                 var state = generateState(); // 랜덤한 상태 토큰 생성
                 var apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type=code";
                 apiURL += "&client_id=" + naverClientId;
                 apiURL += "&redirect_uri=" + redirectURI;
                 apiURL += "&state=" + state;

                 // 네이버 로그인 페이지로 이동
                 window.location.href = apiURL;
             }
         });
    	
    	

    });

    // 랜덤한 상태 토큰 생성 함수
    function generateState() {
        var state = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < 10; i++) {
            state += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return state;
    }
</script>
<!-- 네이버 로그인 스크립트 -->