소셜 로그인 테스트(Kakao_JavaScript)

※Javascript API를 이용하여 작성

· 보안상의 문제가 발생할 수 있으므로 REST API 방법으로 다시 한 번 구현해보기!!

 

<KakaoController.java>

 @Log4j
 @AllArgsConstructor
 @Controller
 public class KakaoController {
 
    @RequestMapping("/kakaologin")
    public String kakaologin(Locale locale, Model model) {
        log.info("kakaologin");
        return "kakaologin";
   }
 }

 

 

<kakaologin.jsp>

 <a href="javascript:kakaoLogin();"><img src="resources/kakao.png" /></a><br/> 
 <a href="http://developers.kakao.com/logout">logout</a>
 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>  //상세 내용은 개발자 문서에 있음!
 <script> 
 window.Kakao.init("발급 받은 JavaScript 키");  //내 계정의 어떤 어플리케이션이랑 연동될 것인지를 위함
 
 function kakaoLogin(){
    window.Kakao.Auth.login({
         scope: 'profile, account_email',   //설정한 정보 내용을 가져옴
         success: function(authObj){  
             console.log(authObj);
             window.Kakao.API.request({   
                  url:'/v2/user/me',   //현재 로그인 된 user의 정보를 가져옴
                  success: res => {
                      const kakao_account = res.kakao_account;
                      console.log(kakao_account);
                  }
              });
         }
    });
 }
 </script>

 

 

<로그인 화면>

 

 

 

<로그인 후 동의 화면>

 

 

<User의 상세 정보>

· 내 어플리케이션에 설정한 정보를 출력!!