2-5 카카오 로그인 API #2 (jsp, javascript를 사용한 카카오간단로그인)

#2 이번엔 코드작성하는 부분이다

스프링이나 서블릿은 굉장히 많은 이동과 전달이 필요하지만 javascript로도 충분히 가능하다

 

 

 

 

 

 

 

 

 

• loginfo.jsp
  • 로그인화면 하단에 있는 카카오로그인하기 버튼이다
  • 사이즈는 각자 편한대로 정해준다

            <div class="button-login" align ="center" >
                <a id="kakao-login-btn" >
    <img src="//k.kakaocdn.net/14/dn/btqbjxsO6vP/KPiGpdnsubSq3a0PHEGUK1/o.jpg" width="83%" height ="50px" />
    </a>
            </div>

 

 

 

 

 

 

 

• 정말 중요한 부분..... 이걸 못찾아서 엄청 헤맸다....
  API같은 경우는 구글을 뒤지는 것보다 개발자사이트를 뒤져야한다
  무조건 있다
• 특히 API를 쓴다면 script는 어딨지? 이러고 먼저 찾아봐야한다. 

<script src = "https://developers.kakao.com/sdk/js/kakao.min.js"></script>

 

 

 

 

 

 

 

 

 

• 중요한부분2222

<script type='text/javascript'>
Kakao.init('본인 앱키');


$("#kakao-login-btn").on("click", function(){
    //1. 로그인 시도
    Kakao.Auth.login({
        success: function(authObj) {
         
          //2. 로그인 성공시, API 호출
          Kakao.API.request({
            url: '/v2/user/me',
            success: function(res) {
              console.log(res);
              var id = res.id;
			  scope : 'account_email';
			alert('로그인성공');
              location.href="callback주소";
		

              
        }
          })
          console.log(authObj);
          var token = authObj.access_token;
        },
        fail: function(err) {
          alert(JSON.stringify(err));
        }
      });
        
}) //


</script>

• kakao.init에 본인 앱키를 넣어준다 유효하지않으면 에러가 난다
• 로그인성공시 api를 호출하는데 url에서 v2/user/me도 내가 바꿔야하는지 알고 헤맸다
  하지만 developers.kakao.com/docs/latest/ko/kakaologin/js

Kakao Developers

여기에 나온것을 보고 알았다. 사용자 정보를 읽어들일 때 url은 /v2/user/me로 고정을 한다는 것을...

뭔가 url이 직관적이지 않아서 내가 callback url을 만들어줘야하는 줄 알았다...

꼭 개발자페이지를 뒤지자....

• 그다음엔 콜백주소를 입력해줘야한다. 토씨하나 빠지지않고 똑같이 입력을 해줘야함
• 콜백페이지에서는 그냥 간단하게 id를 랜덤숫자로 set해준 후 메인으로 이동하도록
  • math에 있는 랜덤함수를 사용해 랜덤으로 만들어서 넣고싶었으나 할게 많아서 여기서 마무리를 하였음

	 <%
			 
	session.setAttribute("member_mid", "5235268");
	response.sendRedirect("메인주소");
	%>

 

 

 

 

 

 

• 로그아웃 부분은 직접 아래페이지로 가서 연결을 끊어주었다

    <a href="http://developers.kakao.com/logout">카카오 로그아웃</a>

 

 

 

---

끝!

발표할 때 api를 이용하여 소셜로그인을 한 조는 우리밖에 없어서 뿌듯했지만 제대로 보여주지못해 너무...... 아쉬웠다

정작 코드가 긴건아니지만 자꾸 연결안됨/콜백문제/앱키문제 등 제대로 되지않아서 시간을 많이 잡아먹었다..

그래도 로그인을 구현했다는 부분에서 만족을 한다

 

참고로 처음엔 네이버로그인에 매달렸었는데 도저히 안되서 문의까지 했었다 ㅋㅋㅋㅋㅋ

시간이 없어서 결국 네이버는 못했지만 엄청 친절하게 설명해줘서 하루만 있었다면 구현을 했었을 것 같긴하다

아쉽긴 했지만 ...