REST-API 활용한 카카오 소셜 로그인 구현(feat. React, SpringBoot)

REST-API 활용한 카카오 소셜 로그인 구현(feat. React, SpringBoot)

 

 

REST-API를 활용한 카카오 로그인 문서

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

Kakao Developers

 

카카오 개발자 페이지

https://developers.kakao.com/

Kakao Developers

 

 

💡 간단 요약

- REST-API를 활용한 카카오 로그인 방법을 사용하였다.
- 개발환경 : React + SpringBoot
- 프론트엔드 : 카카오로부터 인가코드를 받고 받은 인가코드를 백엔드에 넘겨주는 역할을 하였다. (+ 마지막 리다이렉팅까지)
- 인가코드를 넘기면 백엔드로부터 (우리 사이트 전용) JWT를 발급받았다.
- 백엔드 : 프론트로부터 인가 코드를 넘겨받고 카카오로부터 토큰을 발급받는다. 그리고 해당 토큰에 담긴 유저 정보를 활용해 JWT를 새롭게 발급 후 프론트에게 돌려준다.

 

 

❗ 카카오 토큰을 그대로 클라이언트에게 직접 넘겨주고 사용시키면 고소당할 수도 있다?!
-> 프런트엔드에서는 거의 다 (url+http정보) 조회가 가능해서 해킹당하면 사용자의 카카오 정보가 유출될 수도 있으니 확실히 고소당할 수도 있다고 참고한 사이트 개발자분이 언급하심..?
→ Next.js의 SSR을 이용해서 안보이게 할 수는 있을 수도 있다는 프런트 개발자말을 듣기는 들었다 (공부해봐야 겠다..)

 

 

소셜 로그인 과정

간단한 소셜 로그인 진행사항의 흐름을 담은 이미지

 

 

인가 코드 받기-카카오 개발자 기본 세팅

 

카카오 공식문서

카카오 공식문서를 보면, 대략적으로 어떤 방식으로 개발을 진행해나가야 할지 알 수 있다.

 

 

대략

https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code

이러한 주소로 접근을 하고 인가 코드를 받아올 수 있다.

이제 cliend_id와 redirect_uri를 받아와서 {CLIENT_ID}와 {REDIRECT_URI}에 채워주어야 한다.

 

 

cliend_id

cliend_id는 kakao developers에서 내 애플리케이션을 추가했을 때 생기는 REST_API 키를 넣어준다.

 

 

플랫폼 추가

Web에서 사용할 것이기 때문에 Web 플랫폼에 사이트 도메인을 추가한다.

배포하기 전이기 때문에 localhost:3000으로 설정했다.

→ 배포하게 된다면 배포한 주소 추가하면 된다.

(port번호 → frontend의 port번호)

 

 

Redirect URI

카카오 로그인에서 사용할 OAuth Redirect URI를 설정한다.

→ front에서

 

Redirect URI는 카카오 로그인 메뉴에 들어가서 추가를 해준다. 이때 경로 설정은 백엔드와 협의해서 맞춘다.

oauth/callback/kakao로 redirect 시키기로 정하고 다음과 같이 등록해줬다.

💡 Redirect URI는 반드시 프론트에서 접근할 수 있는 Host로 지정해주어야 한다. → localhost:3000

이유 : 프런트에서 인가 코드 받고 넘기고 등등 모든 작업이 이루어져야 하는데

프론트엔드가 접근할 수 없는 Host로 지정을 해버리면(백엔드 포트번호로 보내버린다던지)

접근이 불가해서 아무 작업도 할 수 없기 때문이다.

 

Process

위에서 봤던 이미지 흐름대로 진행

 

Front에서 카카오 로그인으로 인가코드 요청

→ 카카오 로그인 & 서비스 이용등록 수락 등록

→ Redirect 호출(Front)

→ 인가코드를 이용해 토큰정보 받기(Back)

→ 토큰정보를 이용해 유저정보 받기(Back) → 유저 등록

→ 유저정보 등록 후 JWT Token 리턴(Back → Front)

 

 

1. kakao 로그인 버튼 클릭 (Front) 

• LoginPage.js

function socialLoginKakao() {
    console.log('kakao login clicked');
    AuthenticationService.loginSocialKakao();
}

 

• AuthenticationService.js

loginSocialKakao() {
    window.location.href = KAKAO_AUTH_URL;
}

카카오 로그인 버튼을 눌렀을 때 위에서 만든 URL 주소로 연결을 시켜주면 된다.

(Client_ID와 KAKAO_AUTH_URL은 OAuth.js 에서 따로 관리할 수 있도록 분리했다.)

 

 

2. Redirect 호출(Front)

• AuthenticationService.js 수정

kakaoLogin 비동기 통신을 위한 메소드

async kakaoLogin(code) {
    return await axios.get(`/api/oauth/kakao?code=${code}`);
}

→ 백으로 kakao에서 받은 code를 넘긴다.

 

• 리다이렉트될 화면 OAuth2RedirectHandeler.js

// 리다이렉트될 화면
// OAuth2RedirectHandeler.js
import React, { useEffect } from 'react';
import { Oval } from 'react-loader-spinner';
import { useNavigate } from 'react-router-dom';
import AuthenticationService from 'service/AuthenticationService';

const OAuth2RedirectHandler = (props) => {
    let params = new URL(document.URL).searchParams;
    let code = params.get('code');
    let navigate = useNavigate();

    useEffect(async () => {
        await AuthenticationService.kakaoLogin(code)
            .then((response) => {
                console.log('kakaoLogin');
                console.log(response.data.data.token);
                console.log(response.data.data.userEmail);
                AuthenticationService.registerSuccessfulLoginForJwt(response.data.data.userEmail, response.data.data.token);
            })
            .catch((error) => {
                console.log('kakaoLogin Failed');
            });
        navigate('/main');
    }, []);

    return (
        <div>
            <div>
                <div>잠시만 기다려 주세요! 로그인 중입니다.</div>

                <Oval height="80" width="80" radius="9" color="#00Bfff" ariaLabel="three-dots-loading" wrapperStyle wrapperClass />
            </div>
        </div>
    );
};

export default OAuth2RedirectHandler;

 

AuthenticationService.kakaoLogin 메소드를 자세히 보면,

await AuthenticationService.kakaoLogin(code)
    .then((response) => {
        console.log('kakaoLogin');
        console.log(response.data.data.token);
        console.log(response.data.data.userEmail);
        AuthenticationService.registerSuccessfulLoginForJwt(response.data.data.userEmail, response.data.data.token);
    })
    .catch((error) => {
        console.log('kakaoLogin Failed');
    });
navigate('/main');

→ 성공하면 일반 로그인과 마찬가지로 http로 응답받은 JWT Token을 localStorage에 저장하고 로그인 처리되며 메인으로 이동

 

• App.js 수정

import OAuth2RedirectHandler from 'service/OAuth2RedirectHandler';

:
:

<Route path="/oauth/callback/kakao" element={<OAuth2RedirectHandler />} />

→ App.js 에서 해당 컴포넌트 경로 설정(Redirect될 화면)

 

 

 

3. 인가코드를 이용해 토큰정보 받기(Back)

• OauthController

@ApiOperation(value = "카카오 로그인", notes = "카카오 로그인")
@ResponseBody
@GetMapping("/kakao")
public void kakaoCallback(@ApiParam(value = "kakao auth code", required = true) @RequestParam String code) {
    String accessToken = oauthService.getKaKaoAccessToken(code);
}

➡️ front → back으로 parameter로 code를 받고 이 코드를 이용해 KaKaoAccessToken을 받는다.

 

 

• OAuthService - getKaKaoAccessToken

code를 이용해 KaKaoAccessToken을 받는 메소드

public String getKaKaoAccessToken(String code) {

    String access_Token = "";
    String refresh_Token = "";
    String reqURL = "https://kauth.kakao.com/oauth/token";

    try {
        URL url = new URL(reqURL);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();

        //POST 요청을 위해 기본값이 false인 setDoOutput을 true로
        conn.setRequestMethod("POST");
        conn.setDoOutput(true);

        //POST 요청에 필요로 요구하는 파라미터 스트림을 통해 전송
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
        StringBuilder sb = new StringBuilder();
        sb.append("grant_type=authorization_code");
        sb.append("&client_id=" + clientId); // TODO REST_API_KEY 입력
        sb.append("&redirect_uri=" + redirectUri); // TODO 인가코드 받은 redirect_uri 입력
        sb.append("&code=" + code);
        bw.write(sb.toString());
        bw.flush();

        //결과 코드가 200이라면 성공
        int responseCode = conn.getResponseCode();
        System.out.println("responseCode : " + responseCode);
        //요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기
        BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        String line = "";
        String result = "";

        while ((line = br.readLine()) != null) {
            result += line;
        }
        System.out.println("response body : " + result);

        //Gson 라이브러리에 포함된 클래스로 JSON파싱 객체 생성
        JsonParser parser = new JsonParser();
        JsonElement element = parser.parse(result);

        access_Token = element.getAsJsonObject().get("access_token").getAsString();
        refresh_Token = element.getAsJsonObject().get("refresh_token").getAsString();

        System.out.println("access_token : " + access_Token);
        System.out.println("refresh_token : " + refresh_Token);

        br.close();
        bw.close();
    } catch (IOException e) {
        e.printStackTrace();
    }

    return access_Token;
}

 

 

4. 토큰정보를 이용해 유저정보 받기(Back) → 유저 등록

KaKaoAccessToken을 통해 카카오에서 필요한 해당 유저의 정보를 받는 메소드

public HashMap<String, Object> getUserKakaoInfo(String access_Token) {

    // 요청하는 클라이언트마다 가진 정보가 다를 수 있기에 HashMap타입으로 선언
    HashMap<String, Object> userInfo = new HashMap<String, Object>();
    String reqURL = "https://kapi.kakao.com/v2/user/me";
    try {
        URL url = new URL(reqURL);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("GET");

        // 요청에 필요한 Header에 포함될 내용
        conn.setRequestProperty("Authorization", "Bearer " + access_Token);

        int responseCode = conn.getResponseCode();
        System.out.println("responseCode : " + responseCode);

        BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

        String line = "";
        String result = "";

        while ((line = br.readLine()) != null) {
            result += line;
        }
        System.out.println("response body : " + result);

        JsonParser parser = new JsonParser();
        JsonElement element = parser.parse(result);

        String id = element.getAsJsonObject().get("id").getAsString();

        JsonObject properties = element.getAsJsonObject().get("properties").getAsJsonObject();
        JsonObject kakao_account = element.getAsJsonObject().get("kakao_account").getAsJsonObject();

        String nickname = properties.getAsJsonObject().get("nickname").getAsString();
        if(kakao_account.getAsJsonObject().get("email") != null){
            String email = kakao_account.getAsJsonObject().get("email").getAsString();
            userInfo.put("email", email);
        }

        userInfo.put("nickname", nickname);
        userInfo.put("id", id);

    } catch (IOException e) {
        e.printStackTrace();
    }
    return userInfo;
}

 

 

5. 유저정보 등록 후 JWT Token 리턴(Back → Front)

위에서 얻은 유저 정보를 가지고 우리 유저에 등록한 뒤, 우리 서버 전용 JWT Token을 프런트로 넘겨준다.

 

Back

OAuthService.java

• kakaoLogin

kakao로그인 시 이미 회원가입이 진행된 유저인지(이미 카카오 로그인 동의하고 등록된 유저)확인한다.

확인하고 userEmail을 이용해 일반 유저처럼 JWT Token을 발급하여 return 한다.

public UserKakaoLoginResponseDto kakaoLogin(String access_Token) {
    UserKakaoSignupRequestDto userKakaoSignupRequestDto = getUserKakaoSignupRequestDto(getUserKakaoInfo(access_Token));
    UserResponseDto userResponseDto = findByUserKakaoIdentifier(userKakaoSignupRequestDto.getUserKakaoIdentifier());
    if (userResponseDto == null){
        signUp(userKakaoSignupRequestDto);
        userResponseDto = findByUserKakaoIdentifier(userKakaoSignupRequestDto.getUserKakaoIdentifier());
    }

    String token = jwtTokenProvider.createToken(userResponseDto.getUserEmail());
    return new UserKakaoLoginResponseDto(HttpStatus.OK, token, userResponseDto.getUserEmail());
}

 

• findByUserKakaoIdentifier

이미 회원가입 처리된 카카오 로그인 유저인지 확인.

public UserResponseDto findByUserKakaoIdentifier(String kakaoIdentifier) {
    List<User> user = userRepository.findUserByUserKakaoIdentifier(kakaoIdentifier).orElseThrow(() -> new UsernameNotFoundException("해당하는 유저를 찾을 수 없습니다."));

    if(user.size() == 0){
        return null;
    }
    return new UserResponseDto(user.get(0));
}

→ List로 되어있는 이유는 일반 사용자들일 경우 kakaoIdentifier가 필요가 없어 일단 수정하지 않고 null로 그냥 두었는데, 그래서 entity에서 해당 변수를 unique나 nullable 처리를 하지 못해서 조회시 List로 불러와질 가능성 때문에 JPA이용시 다건 조회와 유사하게 사용해야 해서 위와 같은 방식으로 두었다.

❗️ ➡️ 원래는 일반유저에게 “-1”이나 “0”과 같은 디폴트 값을 주고 nullable = false처리라도 하는 게 맞는 것 같다.

 

 

• signUp

등록되어 있지 않은 유저일 경우

kakao에서 받은 user의 id를 user_kakao_identifier로 등록하고, 비밀번호는 필요하지 않아 -1로 두고 저장한다.

@Transactional
public Long signUp(UserKakaoSignupRequestDto userKakaoSignupRequestDto) throws BaseException {
    Long id;
    try {
        id = userRepository.save(userKakaoSignupRequestDto.toEntity()).getUserId();
    } catch (Exception e) {
        throw new BaseException(BaseResponseCode.FAILED_TO_SAVE_USER);
    }
    return id;
}

private UserKakaoSignupRequestDto getUserKakaoSignupRequestDto(HashMap<String, Object> userInfo){
    String userPassword = "-1";
    UserKakaoSignupRequestDto userKakaoSignupRequestDto = new UserKakaoSignupRequestDto(userInfo.get("email").toString(), userInfo.get("nickname").toString(),userPassword,userInfo.get("nickname").toString(),userInfo.get("id").toString());
    return userKakaoSignupRequestDto;
}

 

OAuthController.java

@ApiOperation(value = "카카오 로그인", notes = "카카오 로그인")
@ResponseBody
@GetMapping("/kakao")
public BaseResponse<UserLoginResponseDto> kakaoCallback(@ApiParam(value = "kakao auth code", required = true) @RequestParam String code) {
    String accessToken = oauthService.getKaKaoAccessToken(code);
    return new BaseResponse(oauthService.kakaoLogin(accessToken).getStatus(), "요청 성공했습니다.", oauthService.kakaoLogin(accessToken));
}

→ token과 이메일(프런트에서 현재 유저 저장할 때 필요해서)을 리턴하도록 한다.

 

Front

• OAuth2RedirectHandeler.js

리다이렉트 될 화면인데 여기서 보면

응답결과에서 userEmail과 token을 가지고 로그인 처리 될 수 있도록 일반 유저와 동일하게 JWT토큰과 email을 localStorage에 저장할 수 있도록했다.

AuthenticationService.registerSuccessfulLoginForJwt(response.data.data.userEmail, response.data.data.token);

useEffect(async () => {
    await AuthenticationService.kakaoLogin(code)
        .then((response) => {
            console.log('kakaoLogin');
            console.log(response.data.data.token);
            console.log(response.data.data.userEmail);
            AuthenticationService.registerSuccessfulLoginForJwt(response.data.data.userEmail, response.data.data.token);
        })
        .catch((error) => {
            console.log('kakaoLogin Failed');
        });
    navigate('/main');
}, []);

 

 

front에서 처리해줘야 할 부분과 back에서 처리할 부분을 잘 생각하고 나누고, 통신하면 잘 구현할 수 있는 것 같다.

처음에는 좀 헤맸는데, 카카오 소셜 로그인 방법을 많이 찾아보고, 공식 문서도 보고 흐름을 이해하니까 그 다음부터는 잘 구현할 수 있었던 것 같다..

 

끝 🐧

 

---

Reference

감사한 분들...🥲

 

https://velog.io/@ohjs813/Spring-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-REST-API

δ Spring 카카오 로그인 REST API

https://data-jj.tistory.com/53

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)