[Spring,Vue.js] 카카오 간편 로그인 만들기 ① - 구조와 흐름 파악하고 카카오 디벨로퍼스 설정하기 (REST API)

 

 

카카오 간편 로그인을 만들어보자!
먼저 어떻게 만들어야하는지 구조와 흐름을 파악하고
카카오 디벨로퍼스를 설정하자.

 

 

 

 

1. 카카오 디벨로퍼스

 

- 카카오 API 시작하기

Kakao Developers

 

 

- 카카오 로그인 구현하기

Kakao Developers

 

 

- 카카오 로그인 이해하기

Kakao Developers

 

이 위에 있는 세 개의 주소에 들어가서 꼭 읽어보시길 바랍니다! 저는 여러번 읽었는데도 코드를 공부하고 작성하면서 많은 버거움이 있었습니다. 특히 Vue로 작성하는 코드는 카카오에서 제공하고 있지 않기 때문에 더 어려웠습니다.(사실 있어도 어려웠을...) 그래서 최대한 천천히 꼼꼼하게 읽어서 어떻게 동작이 이뤄지는지, 카카오에서 요구하는 방식은 어떤 방식인지 알아두는게 좋습니다. 저의 지식이 부족해서 그런 것도 있겠지만, 저처럼 초보 개발자 분들은 꼭 여러번 읽길 바랍니다. 그래야 다른 분들의 코드를 복사하더라도 혹은 GPT에 물어보더라도 어느 정도의 흐름을 파악할 수 있습니다. 파악이 안되면 코드를 복붙해도 많이 어렵더라고요. 암튼 저는 더럽게 어려워서 때려칠 뻔 하길 만번쯤 고민하다 어찌저찌 해냈네요... 제 글이 도움이 되길 바랍니다. 화이팅!

 

 

 

 

---

 

 

 

 

2. 흐름 파악

• 카카오 로그인

처음엔 Vue를 통해 카카오 로그인 창이 보이도록 해야한다. 우리가 익히 잘 아는 그 화면이다. 그 화면을 받기 위해 여러 준비물이 필요하다. 카카오에게 로그인 요청을 보내야하는데, 이때 URL 주소를 넣고 그 주소에 response_type과 REST API KEY(어떤 사업장으로 받을지 발급한 키, client_id)와 REDIRECT_URI(인가코드를 어디로 받을지) 그리고 state(필수는 아님)를 첨부한다. 그리고 이 요청은 사진에 적힌 것처럼 GET 방식으로 이뤄줘야한다.

GET 방식으로 /oauth/authorize 경로로 보내면 카카오 간편 로그인 화면을 받게 된다. 그게 2번 카카오 계정 로그인 요청이다. 사용자는 화면을 받고 로그인을 하게 되면, 동의 화면이 출력된다. 사용자는 이메일, 아이디, 이름, 닉네임, 성별, 생일 등 어떤 정보를 보낼지 선택한다. 물론 이 프로젝트에선 닉네임만 받을 것이다. 왜냐하면, 닉네임만 가능하다...!  그렇게 사용자가 필수로 적힌 닉네임을 선택하면 카카오에게 REDIRECT_URI로 인가코드를 받게된다.

이게 첫 번째 시련이다. 인가코드를 받아오는 것. Vue에 카카오 간편 로그인 화면이 출력된다면 인가코드를 받는 부분은 대체로 문제가 없을 것이다. 하지만 두 번째 시련은 어마어마하다. 카카오가 준 인가 코드로 토큰을 받아와야 한다. 화면을 잘 나타났지만, 카카오 로그인을 실패한다면 토큰 파트에 문제가 생겼다고 보면 된다. 

요청 코드 예시 (주소에 이렇게 들어가야함)
"https://kauth.kakao.com/oauth/authorize?response_type=code
		&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}"

 

 

 

• 토큰 

이제 토큰 파트는 스프링으로 넘어간다. 인가 코드까지 프론트에서 진행하지만, 토큰을 받아오는건 백엔드에서 진행할 것이다. 그래서 프론트는 백엔드로 인가 코드를 보내야한다. 토큰을 요청할 땐, "https://kauth.kakao.com/oauth/token"를 POST로 보낸다. 이때 헤더에 꼭 적어야할 것이 있다. 첫 번째 사진에 보면 헤더라고 적혀있는데, 그 안에 Content-Type에 대한 설명이 있다. Content-Type은 application/x-www-form-urlencoded으로 일단 지금은 대충 form 타입으로 보내야한다고 생각해두면 좋다. 본문(바디)에는 grant_type(authorization_code), REST API KEY(client_id), redirect_uri(응답받을 곳), code(인가 코드)가 들어간다.

사용자가 동의한 데이터는 카카오가 잘 가지고 있다. 우리는 카카오가 준 인가 코드로 토큰을 달라고 해야한다. 그래서 본문에 인가코드를 실어서 카카오로 보낸다. 받아온 토큰을 가지고 사용자가 동의한 권한 데이터를 읽어올 수 있게 된다. 인가 코드 요청만으로는 카카오 로그인이 완료되지 않는다. 토큰 요청을 성공해야 카카오 로그인이 정상적으로 완료된다. 

요청 예시 코드 (대충 이런게 담아야한다)

curl -v -X POST "https://kauth.kakao.com/oauth/token" \
    -H "Content-Type: application/x-www-form-urlencoded;charset=utf-8" \
    -d "grant_type=authorization_code" \
    -d "client_id=${REST_API_KEY}" \
    --data-urlencode "redirect_uri=${REDIRECT_URI}" \
    -d "code=${AUTHORIZE_CODE}"

 

 

 

응답에는 이 정보들이 필수적으로 들어있다. 그리고 여기서 access_token만 꺼내 사용할 것이다. 그래야 사용자 닉네임을 가져올 수 있다.

응답 예시 코드 (Content-Type에 json으로 응답이 온다는 걸 알아야한다)

HTTP/1.1 200
Content-Type: application/json;charset=UTF-8
{
    "token_type":"bearer",
    "access_token":"${ACCESS_TOKEN}",
    "expires_in":43199,
    "refresh_token":"${REFRESH_TOKEN}",
    "refresh_token_expires_in":5184000,
    "scope":"account_email profile"
}

 

 

 

• 사용자 정보 조회

발급한 사용자 엑세스 토큰을 헤더에 담아 GET 또는 POST로 요청하여, 사용자가 동의한 항목을 조회할 수 있다. 그리고

"https://kapi.kakao.com/v2/user/me"로 보내야 사용자 정보를 읽어 올 수 있다. 인증 방식은 엑세스 토큰, 앱 어드민 키가 있지만 이 프로젝트에서 엑세스 토큰으로 인증할 것이다. 왜냐하면 어드민 키는 보안에 유의하여 사용해야해서 보안을 최소화하여 만들 이 프로젝트에 적합하지 않다고 생각됐다.

엑세스 토큰 방식으로 요청할 때 카카오에서 명시한 규정은 Bearer를 사용하라는 것이다. Bearer은 토큰을 소유한 사람이라는 의미를 가지고 있다. Content-Type은 토큰을 발급받으려고 했을 때와 같이 application/x-www-form-urlencoded라고 되어있다. POST 방식으로 보내게 된다면 바디가 들어가니까, 바디의 형식을 서버에 알리기 위해 Content-Type을 카카오가 규정한 것과 같이 설정해야한다. 그러나 이 프로젝트에선 사용자 정보를 조회할 때, GET으로 보낼거고 바디가 가지 않아 사용자 정보 조회에선 Content-Type은 신경쓰지 않을 것이다. 

 

 

 

 

---

 

 

 

 

3. 카카오 디벨로퍼스 설정하기 

• 카카오 디벨로퍼스 (로그인 혹은 회원가입)

- 카카오 디벨로퍼스 메인화면

Kakao Developers

 

 

• 앱 - 앱생성 들어가기

 

 

• 앱 생성하기

 

 

• Website Test 들어가기

 

 

• 메뉴 - 앱 - 일반 들어가기

 

 

 

• REST API 키 메모장에 적어두기

안적어둬도 상관 없지만, 나중에 찾아야해서 귀찮습니다. 키는 혹시 몰라서 지웠는데, 숫자와 영문자가 합해진 문자열이 적혀있습니다. 

 

 

• 스크롤 내려서 Web 플랫폼 등록

Web 플랫폼 등록 누르기

 

http://localhost:5173로 저장(vue)

 

결과

 

 

• 메뉴 - 카카오 로그인 - 일반 누르기

 

 

• 사용 설정 상태 ON

 

 

• 스크롤 내려서 리다이렉트 URI 등록하기

리다이렉트 URI 등록 누르기

http://localhost:5173/oauth/code/kakao로 설정.

리다이렉트 URI는 적은 것과 다르게 설정해도 무관하다. 다만 예시를 보고 /oauth를 적어줘야한다.

 

 

• 카카오 로그인 - 동의항목 누르기

 

 

• 개인정보 - 닉네임 - 필수로 설정

닉네임을 필수 동의, 프로필 사진은 사용 안함으로 설정한다

 

필수동의 클릭 후 저장

 

 

 

• 카카오 디벨로퍼스 디자인 가이드 들어가기

 

- 카카오 디벨로퍼스 디자인 가이드

Kakao Developers

 

 

• 카카오 싱크 로그인 버튼 리소스 다운로드 들어가기

 

 

• 원하는 타입으로 설정 후 다운로드 누르기