[스프링부트(Spring Boot)] 소셜 로그인(카카오 로그인)

카카오 로그인을 위해서는 카카오 developer 사이트에서 설정이 필요하다.

https://developers.kakao.com/

Kakao Developers

---

내 애플리케이션을 등록하고 도메인을 설정한 후 "카카오 로그인" 메뉴에 들어가서 활성화 해주기!

나는 카카오맵 api를 사용했어서 이미 애플리케이션 등록 및 도메인 설정은되어 있었고, 카카오 로그인만 따로 활성화 해주면 됐다.

그리고 밑으로 스크롤 내려보면 Redirect URI 설정 부분이 있다.

카카오 로그인할 때 사용할 URI를 설정!

최대 10개까지 등록 가능하다!

나는 컴퓨터를 좀 옮겨 다니면서 작업하는 편이라 여러 개 추가했다.(사진은 한 개만 ㅎ.ㅎ)

---

사용자가 카카오 계정으로 회원가입할 때 수집할 정보에 대한 설정도 필요하다.

카카오 로그인 > 동의항목 에서 원하는 항목들만 동의!

내가 개발하고 있는 사이트는 이메일만 받아오면 돼서 그것만 동의 설정했다. (생일도 필요한데 연도가 없다.... 쩝)

---

카카오 로그인 버튼을 만들기 위해 버튼 이미지를 받아준다.
https://developers.kakao.com/tool/resource/login

Kakao Developers

여기에는 디자인 가이드가 자세히 나와있으니 디자인을 변경할 경우 참고!
(나는 그냥 그대로 썼다... 충분히 괜찮던데..?)
https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

Kakao Developers

---

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

카카오 로그인은 흐름을 이해하고 있어야 한다.

일단 첫 번째가 인가 코드 받아오기인데, 역시나 엄청 헤맸다.

다시는.. 같은 문제로 헤매지 말아야지...

1. Redirect URI 등록한 대로 컴포넌트 만들기

Redirect를 받을 컴포넌트도 만들어 놓지 않고 Redirect만 요청하고 있던 나.........

컴포넌트 생성 후 라우터에 등록해 주었다.

{
    path: '/kakao-login',
    name: 'kakao',
    component: () => import('@/components/KaKaoLogin.vue')
  }

path는 내가 사이트에 등록한 Redirect URI를, name은 자유롭게, component는 내가 생성한 컴포넌트를 적어준다.

2. URL 연결하기

인가 코드 받아오는 것은 비동기식으로 받아올 수 없다.

이걸 모르고 주구장창 axios만 썼더니 계속 CORS 에러 발생..

바로 링크 걸어서 이동시켜서 해결..

kakaoLogin() {
      const url = 'https://kauth.kakao.com/oauth/authorize';
      location.href = `${url}?client_id=${this.loginParams.client_id}&redirect_uri=${this.loginParams.redirect_uri}&response_type=${this.loginParams.response_type}`;
    },

넘겨줄 param들은 data에 정의해두었다.

loginParams: {
        client_id: process.env.VUE_APP_KAKAO_REST_KEY,
        redirect_uri: process.env.VUE_APP_KAKAO_REDIRECT_URI,
        response_type: 'code',
        scope: 'account_email',
      },

1. client_id: 카카오 개발자센터에서 발급받은 REST API Key
2. redirect_uri: 카카오 개발자센터에서 설정한 Redirect URI
3. response_type: 'code'로 고정
4. scope: 카카오 개발자센터에서 설정한 동의 항목(나의 경우에는 이메일만)

client_id나 redirect_uri 는 노출되지 않는 것이 좋다.

그래서 루트 디렉토리에 .env 파일을 생성해서 저장한 후 꺼내쓰는 방법을 택했다.

.env 파일에 정의할 때는 앞에 'VUE_APP' 을 붙여야 vue에서 인식 가능하니 꼭 붙여서 이름 짓도록!

gitignore에 추가해주는 것도 필수.

---

두 번째는 토큰 받아오기.

조금 전에 받아온 인가 코드를 활용해서 post 요청을 보내야 한다.

이번엔 axios를 사용! 

header에 Content-type도 넣어줘야 한다.

그러면 응답으로 access_token과 refresh_token을 받을 수 있다.

물론 두 개만 반환받는 건 아니고, 사용할 것들만 언급한 것!

tokenParams: {
        client_id: process.env.VUE_APP_KAKAO_REST_KEY,
        redirect_uri: process.env.VUE_APP_KAKAO_REDIRECT_URI,
        code: this.$route.query.code,
        grant_type : "authorization_code",
      },

1. client_id: 카카오 개발자센터에서 발급받은 REST API Key
2. redirect_uri: 카카오 개발자센터에서 설정한 Redirect URI
3. grant_type: 'authorization_code'로 고정
4. code: 인가 코드

이번에도 역시 data에 정의해두고 매개변수를 넘겼다.

참고로 code의 경우 url에 붙어 있는 상태인데, 나는 router를 사용 중이라 간편하게 받았다. 

const url = 'https://kauth.kakao.com/oauth/token';
    const config = {
      headers: {
        'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8'
      }
    }

    axios.post(url, new URLSearchParams(this.tokenParams).toString(), config)
        .then(response => {
          this.token.access_token = response.data.access_token;
          this.token.refresh_token = response.data.refresh_token;
        })
        .catch(error => {
          console.log(error);
        })

post 요청을 보낼 때는 헤더에 Content type도 설정해 주어야 한다.

응답 들어온 토큰들은 역시 data 에 저장.

---

세 번째는 로그인한 사용자 정보 받아오기.

아이디, 이메일 등의 정보를 받아올 수 있다. 

카카오에서 얻어올 수 있는 정보보다 회원가입 때 더 많은 정보가 필요하기 떄문에, 바로 회원가입 창으로 넘겨야 했다.

(소셜 로그인 했는데 왜 또 가입하냐고 귀찮아했던 과거의 나 반성해..)

그래서 받아온 정보를 vuex를 이용하여 저장해두어 회원가입 시 활용하였다.

await axios.post(userUrl, {}, userConfig)
        .then(response => {
          this.$store.commit('setSnsUserId', response.data.id)
          this.$store.commit('setSnsUserEmail', response.data.kakao_account.email)
          this.$router.push({name: 'sns'})
        })
        .catch(error => {
          console.log(error);
          Swal.fire({
            title: '로그인에 실패했습니다.',
            icon: 'error'
          });
        })

---

최초 로그인일 경우 추가 정보 입력을 위해 회원가입 진행.

아이디와 이메일은 카카오 계정에서 받아온 것 그대로 넣기(수정 불가)

문자 본인인증은 뺐다.

카카오 로그인 자체가 인증이기 때문에.....

기존에 가입한 회원의 로그인일 경우 바로 일반 로그인과 같은 로직으로 로그인 처리.