[social-login] kakao 로그인 FE+BE

카카오를 통한 소셜로그인을 구현해보자

 

 

 

1. 프론트단에서 소셜 로그인 진행하는 버튼 구성한다.

2. 사용자는 해당 버튼을 클릭해 로그인 진행한다.

- 사용자는 인가코드를 발급받게 되고, 프론트에서 이를 헤더에 실어 서버에 요청을 보낸다

3. 서버는 해당 인가코드를 받고 인가 서버에 필요한 정보들을 담아 Access Token 요청한다.

4. 인가 서버는 검증 후 Access Token 주게 된다.

5. 서버는 받은 Token을 기반으로 자원 서버에 실제로 이메일 정보를 요청하고 검증 후에 이메일 정보를 반환해준다.

6. 해당 이메일 정보를 기반으로 회원가입이 되어있다면 단순 Acceess Token(JWT), Refresh Token(JWT) 발행
 회원가입이 되어 있지 않는다면 회원가입 후 발행해준다.

이렇게 되면 인증에 대해서도 Access Token(JWT)로 인증이 가능하며 만료되더라도 DB에 저장중인 Refresh Token을 통해 재발급하여 인증이 가능하다.

 

 

카카오 로그인 과정

1. 카카오에 인가 코드 발급 요청
2. 인가 코드를 백엔드에 알려준다
3. 로그인 처리를 한 후에 jwt 토큰 발급

 

 

kakao developers 설명을 참고해보자

Kakao Developers

 

 

 

1. 애플리케이션 등록

• 애플리케이션 추가하기

내 애플리케이션 > 애플리케이션 추가하기

• 웹 플랫폼 추가하기

내 애플리케이션 > 앱 설정 > 플랫폼 > Web 선택

 

• 카카로 로그인 활성화하기

내 애플리케이션 > 제품 설정 > 카카오 로그인

• Redirect URL 설정

프론트단 페이지 만들어서 설정 !!!!!!

테스트 환경 local, 배포 환경 설정

 

 

2. 프론트

 

//LoginView.vue

<div>
	<img src="../../assets/kakao_login_medium_narrow.png"
      @click="onKakaoLogin"/>
</div>

// kakao login
    const onKakaoLogin=() =>{
      requestKakaoLogin((res)=>{
        window.location.href = res.data;
      })
    };


// userApi.js
// kakao login 동의 얻고 인가코드 요청
 function requestKakaoLogin(callback,errorCallback){
   api.get(`/social/login`)
   .then(callback)
   .catch(errorCallback)
 }

 

카카오 인가코드를 헤더로 받을 페이지 라우터

//index.js
//kakao
  {
    path:"/social/login/kakao/callback",
    name:"kakaoLogin",
    component:kakaoLogin,
  },

 

 

카카오 인가코드 헤더로 받을 페이지

- 헤더 query 가져오기 : $route.query

- 헤더 query code 가져오기 : $route.query.code

설정한 리다이렉트 페이지에 Authentication Code가 오게된다.

이 코드를 통해 실제 서버에서는 Access Token을 발급받고 Access Token으로 이메일 정보를 받아와야한다.

<template>
  <div></div>
</template>

<script>
import router from "@/router";
import { ref } from "vue";
import { requestKakaoCode } from "../../api/userApi.js";
import { useStore } from "vuex";

export default {
    
    created() {
        const code = ref("");
        const store = useStore();
        const setIsLoginTrue = () => store.commit("userStore/SET_IS_LOGIN_TRUE");
        const userinfo = ref([]);
        const setUserInfo = () => store.commit("userStore/SET_USER_INFO", userinfo);
        code.value = this.$route.query.code
        requestKakaoCode(code.value,(res)=>{
            // userInfo 저장 
            userinfo.value.push(res.data);
            setUserInfo();
            setIsLoginTrue();
            router.push({ name: "Home" });
        })
    }
}
</script>

<style>

</style>

 

 

 

3. 백

내 애플리케이션 > 앱 설정 > 앱 키

application.yml 

server:
  port: 백엔드 포트번호

spring:
  redis:
    host: localhost
    port: 레디스 포트번호
  social:
    kakao:
      client_id: REST API 키
      redirect_uri: 등록한 REDIRECT_URI
      scope: account_email
      url:
        login: https://kauth.kakao.com/oauth/authorize
        token: https://kauth.kakao.com/oauth/token
        profile: https://kapi.kakao.com/v2/user/me

• client_id - 클라이언트를 구분해주는 ID, 등록하면 자동으로 발급해준다.
• login - 소셜마다 로그인을 진행하는 사이트, 필요한 파라미터를 입력해줘야한다.
• token - Access Token을 발급받는 url, 필요한 정보를 담아 보내야한다.
• profile - Access Token을 통해 정보를 받는 url, Access Token을 담아 보내야한다.

 

 

 

다음과 같이 @Value 어노테이션을 활용해 yml의 값을 불러와 필요한 파라미터를 로그인 url에 붙여 url을 완성시킨 후 View에 넘겨 로그인을 완성시키고 있다.

// socialloginController.java
@RequestMapping("/social/login")
public class SocialController {
    @Value("${spring.social.kakao.client_id}")
    private String kakaoClientId;
    @Value("${spring.social.kakao.redirect_uri}")
    private String kakaoRedirect;
    private final Environment env;

    @Autowired
    private UserService userService;

// 인가코드 요청 url 
@GetMapping()
    public String socialKakaoLogin() {
        StringBuilder loginUrl1 = new StringBuilder()
                .append(env.getProperty("spring.social.kakao.url.login"))
                .append("?client_id=").append(kakaoClientId)
                .append("&response_type=code")
                .append("&redirect_uri=").append(kakaoRedirect);
        return loginUrl1.toString();
    }


@ApiOperation(value = "소셜 로그인", notes = "소셜을 통해 로그인을 진행한다.")
    @GetMapping("/kakao/callback/{code}")
    public ResponseEntity<LoginResponseDto> loginByProvider(@PathVariable("code") String authCode) {
        String provider ="kakao";
        LoginResponseDto responseDto = userService.loginUserByProvider(authCode, provider);
        return new ResponseEntity<>(responseDto, HttpStatus.OK);
    }
}

 

 

 

백엔드 소셜로그인 부분은 참고사이트를 따라 구현하였다.

 

 

 

참고 

[Security] Spring JWT 인증 With REST API(OAuth2.0 추가) (3)

 

[React] 카카오 로그인

 

 

 

 

 

프로젝트 진행을 위해 부랴부랴 구현하느라 로직에 대한 정리가 되지 않았는데, 한 번 해결하고나니 로직이 어느정도 정리도 되고 감이 잡힌듯 하다.

 

 

 

 

 

 

📮개인 공부를 위한 공간으로 틀린 부분이 있을 수도 있습니다.📮

문제점 및 수정 사항이 있을 시, 언제든지 댓글로 피드백 주시기 바랍니다.