카카오 javascript로 로그인하기

카카오 개발자 사이트에 가면 자바스크립트로 로그인 API가 작성되어있다. 
앱 Key를 발급받았다는 전제하에 게시물을 작성할 예정이다.

• <a id="custom-login-btn" href="javascript:loginWithKakao()">
    <img
      src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg"
      width="222"
      alt="카카오 로그인 버튼"
    />
  </a>
  <script type="text/javascript">
    function loginWithKakao() {
      Kakao.Auth.login({
        success: function(authObj) {
          alert(JSON.stringify(authObj))
        },
        fail: function(err) {
          alert(JSON.stringify(err))
        },
      })
    }
  </script>
• 현재 카카오개발자에 올라온 자바스크립트로 코드리뷰를 작성할 예정이다. 
• <a id="custom-login-btn" href="javascript:loginWithKakao()">
  //a태그로 버튼을 누르면 시행할 함수를 명시했다. 
    <img
      src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg"
      width="222"
      alt="카카오 로그인 버튼"
    />
  //a태그 안에 이미지를 넣어놓아서 그 버튼이 클릭되게 만든다. 
  </a>
  <script type="text/javascript">//자바스크립트의 내용이다. 
    function loginWithKakao() { //해당함수를 넣어놓아서 로그인 버튼이 눌리면 함수가 실행되게 만든다. 
  //여기사이에 kakako.init의 부분으로 자바스크립트 API으 key를 넣는 부분이 존재한다. 
      Kakao.Auth.login({ //카카오의 로그인 함수이다. 
        success: function(authObj) {//성공하면 authObj에 해당 정보가 들어간다. 
          alert(JSON.stringify(authObj))//알람으로 띄운다. 
        },
        fail: function(err) { //실패시 이부분또한 알람으로 띄우게 만들었다. 
          alert(JSON.stringify(err))
        },
      })
    }
  </script>
• kakaologin방식은 post로 controller에 전달할 수 있다
• kakaologin동의 목적은 닉네임과 여러정보를 카카오에게 사져올 때 설정하는 것으로 플랫폼마다 다를 수 있다. 
• 사용자가 창을 누르고 success:function시 엑세스 토큰, 리플레쉬토큰의 정보. 코튼2개와 완료시간 scope가 뜬다. 
  • scope의 경우 동의 항목에서 동의한 게 어떤 것인지 뜬다. 이 정보를 서비스 제공자에게 전달한다는 뜻이다. 
  • 사용자가 아이디와 비밀번호를 입력하고 인증이 완료되면 success가 실행된다. 
  • 아이디와 비밀번호가 일치하지 않으면 fail이 실행된다. 
  • 사용자의 인증완료된 정보를 요청한다. 
•  사용자의 정보를 authObj로 가져올수있고 정보들을 value의 값으로 저장해준다. 
• form을 hidden type으로 만들어주고 있는것을 post로 지정된 a태그 hef에저장된 함수가 실행되게 하면 넘어가게 한다. 
• DB에 넣기 위하여 소셜로그인시 약관동의를 누르고 도으이 시작시 사용자의 정보를 가져온다. 
  • hidden이든 ,AJAX던지 상관없다. 
• homeController로 가져온 정보를 카카오 로그인으로 account한 값을 #form 에 hidden으로 넘기고 Controller로 action해서 UserService에 전달한다. 
• UserService는 사용자 테이블에서 ID에 해당하는 사용자 정보확인을 하고 존재하지 않을경우 저장한다.
• 사용자의 정보가 존재하면 사용자 테이블에서 최신의 사용자 정보를 조회해서 반환한다. 
  • USER객체를 담고, SessionUtils에 담아야한다. 
  • User는 kakaologin이라는 form을 만들고, 매개변수로 받아서 빌드패턴으로 받는다. 
    • user.builder. id(form.getId()).build()
• point의 값이 존재할 수 잇기 때문이다. 
• 이 메소드는 카카오 로그인 인증과정을 완료한 경우에만 실행되는 요청핸들러 메소드이다. 
• 따라서 카카오 인증과정 핸들러 메소드는 성공한 것이다. 
  • 카카오 로그인 인증이 완료된 사용자 정보를 세션에 저장하고 홈페이지를 재요청하는 URL을 응답으로 보낸다. 
  • return "redirect:/"
  • 무조건 home요청의 URL을 넣는다.