[Rest Api] vue와 Spring boot를 이용한 카카오톡 로그인 api 구현 (2)

 

[동의 항목 설정] 

카카오톡 로그인 서비스를 ON으로 돌리면 흔히 보는 동의 설정이 가능한 목록들이 나온다. 여기서 필요한 정보만 상태를 설정해서 가져오면 된다. 근데 우선 나는 TEST 버전이라 설정할 수 있는 내용이 딱히 많지 않았다. 그중 필요한 정보만 동의받는 걸로 설정을 해주었다. 

 

선택한 동의 항목들이 이렇게 로그인 후 해당 웹사이트에 가입 할 때 나타난다. 

 

[인가 코드 받기] 

 

이제 기본적인 설정은 끝이 났다! 본격적인 코드를 짜보러 가보자! 첫 번째로 인가코드 받기이다. 일단 인가코드 받는 건 너무너무 쉽다. 카카오톡 디벨로퍼스 -> 문서 -> 카카오 로그인 -> REST API에 들어가서 오른쪽 리스트 중  인가코드 받기 하기와 같은 페이지를 만날 수 있다. 여기서 필요한 건 카카오에서 친절하게 올려준 저 요청 주소!  

 

우선 vue 탬플릿에 카카오톡 로그인하기 사진을 누르면 발생 될 메서드를 작성해 준다. 

 <div>
<img :src="require('@/assets/image/kakao.png')" @click="kakaoLogin" />
</div>

 

저 네모난 카카오 로그인 버튼을 클릭하면 @click="kakaoLogin" 으로 인해 아래의 메서드가 실행될 것이다. 

주소에 Rest Api 키와 redirect_uri를 냅다 때려 박기 보다 따로 변수로 선언하여 나름 보안에 신경 썼다..ㅎ 암튼.. 그랬다... 

  //카카오톡 로그인 하기  
      kakaoLogin() {
        const redirect_uri = 'http://localhost:8182/kakaojoin';
        const clientId = 'REST API 키 번호 ';
        const Auth_url = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirect_uri}`;
        window.location.href = Auth_url;
      }

 

이제 클릭을 하게 되면 아래처럼 코드를 아주 잘 받아 오는 것을 확인 할 수 있다. 

 

자 그렇다면! 이제 진짜 헷갈리는 부분. 

이렇게 받아온 코드를 이용해 다시 카카오쪽으로 값을 보내야 한다. 왜냐하면 그래야 카카오에서 토큰을 주고 그 토큰을 이용하여 아까 동의 한 항목에 대한 정보를 가져올 수 있다. 

그러면 이제 코드를 어떻게 가지고 갈 것인가? 

 

나 같은 경우에는 kakaojoin 이라는 컴포넌트를 하나 만들어 주었다. 왜냐? code를 받아오는 redirect_uri가 클라이언트 쪽 주소인데 거기에 아무것도 없으면 code 값을 빼내어 올 수가 없기 때문이다. 

//index.js 부분
  import kakaojoin from '../components/members/kakaojoin.vue'
  
  {
    path: "/kakaojoin",
    name: 'kakaojoin',
    component: kakaojoin
  },

 

kakakojoin.vue 가 이게 실행 되자마자 ' ?code=wlkfjlwkjflswl~ '라고  query로 받아 온 값을 code에 담아 주었다. 그리고 는 토큰을 본격 적으로 받기 위한 getToken 메서드 호출!   

  created() {
    this.code = this.$route.query.code;
    console.log(this.code)
    this.getToken();
  },

 

[토큰 받기] 

카카오톡 디벨로퍼스에 가보면 이렇게 토큰을 받는 방법이 나와 있다. 기본정보에 보면 POST 로 해당 URL에 보내라고 나와 있다. 그렇다면 나도 그렇게 서버 쪽에서 짜줘야겠지?  

 

getToken 메서드를 살펴보자. 

code를 가지고 토큰을 요청 해야하기 때문에 실행되지 마자 code에 담아 둔 내용을 가지고 get 방식을 이용해 서버로 이동한다. 

getToken() { 
      const self = this;
      self.$axios.get('http://localhost:8181/kakaologin/' + self.code)
        .then((res) => {
          console.log(res)
          self.form.email = res.data.email;
          self.form.pwd = res.data.id;
          self.form.nickname = res.data.nickname;
          self.form.kakaotoken = res.data.accessToken; 
          }

 

그렇다면 $axios를 이용해 비동기통신을 한 Controller에 가보자 그러면 이렇게 code를 PathVariable로 받아 와 토큰 값을 받기 위해 서비스를 요청해준다. 

// 코드를 이용해 access token 을 얻어다 줄 것임
	@GetMapping("/kakaologin/{code}")
	public HashMap<String, String> kakaoLogin(@PathVariable("code") String code) {
		
        System.out.println(code);
		
        // 토큰을 요청하여 얻음
		String kakaoToken = loginService.requestToken(code);
		System.out.println("카카오토큰" + kakaoToken);
		
        // 사용자 정보를 요청하여 얻음
		HashMap<String, String> userInfo = loginService.requestUser(kakaoToken);
		System.out.println("userInfo : " + userInfo);
		return userInfo;
	}

 

서비스에 들어가기 전에 어떠한 방식으로 값을 요청해야 하는지 카카오 디벨로퍼에서 확인 해본다.

오 그렇군,, 이렇게 본문에 필수 요소들을 담아서 가면 된다. 자 그러면 서비스를 어떻게 짜야하는지 3탄에서 살펴보자....