OAuth 2.0 카카오 로그인 구현하기 (Express)

1. 앱키 발급 및 받을 사용자 정보 설정

https://developers.kakao.com/

Kakao Developers

Kakao Developers 가입 후 어플리케이션 생성 하여 앱키를 발급받는다.

 

제품 설정 - 카카오 로그인 항목의 활성화 설정, OpenID Connect 활성화 설정을 ON으로 바꿔준다.

 

 

그 아래 Redirect URI에 본인 백엔드 서버의 파둘 엔드포인트 하나를 추가한다.

보통 callback 키워드로 엔드포인트를 생성하더라 근데 난 그냥 kakako로 했다.

 

제품설정 - 카카오 로그인 - 동의항목 에서 카카오로그인으로 부터 받아올 사용자 정보를 지정한다.

-> 사업자 정보 등록을 해야지 닉네임 프로필 사진 등을 제외한 이메일이나 이름 정보를 받아 올 수 있다.

 

2. 백엔드 서버 구현

express 서버의 아까 등록한 URI를 엔드포인트로 파두자

 

아래는 컨트롤러 파일의 kakako 함수다.

const kakao = async (req, res) => {
    const { code } = req.query; // 카카오에서 전달된 인증 코드

    try {
        // Access Token 요청
        const tokenResponse = await axios.post(
            'https://kauth.kakao.com/oauth/token',
            null,
            {
                params: {
                    grant_type: 'authorization_code',
                    client_id: `${Kakao_Client_ID}`, // 환경 변수에서 Client ID 가져오기
                    redirect_uri: 'http://13.209.17.149/api/auth/kakao', // 등록된 Redirect URI
                    code, // 전달된 인증 코드
                },
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }
        );

        const accessToken = tokenResponse.data.access_token;

        // 사용자 정보 요청
        const userResponse = await axios.get('https://kapi.kakao.com/v2/user/me', {
            headers: {
                Authorization: `Bearer ${accessToken}`,
            },
        });
        const user = userResponse.data;
        let user_id = await findKakaoUserByNicknameModel(user.properties.nickname);

        if (user_id == -1){
            // 새 사용자 추가
            const newUser = {
                email : 'kakao',
                password : '카카오 로그인 유저입니다',
                nickname : user.properties.nickname,
                profileImage : user.properties.thumbnail_image 
            };

            await addUserModel(newUser);
        }

        user_id = await findKakaoUserByNicknameModel(user.properties.nickname);

        const sessionStore = req.sessionStore;
        if (sessionStore && sessionStore.sessions) {
            Object.entries(sessionStore.sessions).forEach(([sessionId, sessionData]) => {
                const parsedData = JSON.parse(sessionData); // 세션 데이터는 JSON 문자열로 저장됨
                if (parsedData.user && parsedData.user.user_id === user.user_id) {
                    console.log(`기존 세션 제거: ${sessionId}`);
                    sessionStore.destroy(sessionId, (err) => {
                        if (err) {
                            console.error('세션 제거 중 오류:', err);
                        }
                    });
                }
            });
        }

        req.session.user = { 
            user_id: user_id,
            email: 'kakao', 
            nickname: user.properties.nickname, 
            profileImage: user.properties.thumbnail_image 
        };
        res.redirect('/posts');
    } catch (error) {
        console.error('카카오 로그인 실패:', error.response?.data || error.message);
        res.status(500).json({
            message: '카카오 로그인 실패',
            error: error.response?.data || error.message,
        });
    }
};

 

위 코드는 로그인 성공하면 회원가입이 자동으로 되어 서비스 DB에 자동 저장이 된다.

쿠키/세션으로 로그인 상태 관리를 하여 세션도 생성이 되도록 했다.

 

 

3. 프론트엔드 서버에 카카오 로그인 버튼 추가

html

<!-- 카카오 로그인 버튼 추가 -->
<div class="kakao-login">
    <a
        href="https://kauth.kakao.com/oauth/authorize?client_id=본인의클라이언트아이디&redirect_uri=위에서설정한uri&response_type=code"
        class="kakao-login-btn"
    >
        <img
            src="/images/kakao_login_medium_wide.png"
            alt="카카오로 로그인"
        />
    </a>
</div>

 

css

.kakao-login {
    text-align: center;
    margin-top: 20px;
  }
  
.kakao-login-btn img {
max-width: 100%;
height: auto;
cursor: pointer;
transition: transform 0.2s;
}

.kakao-login-btn img:hover {
transform: scale(1.05);
}

 

 

카카오 로그인 버튼은 자기 맘대로 다지인해서 사용하면 안된다.

아래 가이드를 보고 잘 따라서 만들자

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

Kakao Developers

 

 

원래 클라이언트 아이디는 이렇게 하느코딩 하면 안된다 하지만 어쩌피 카카오 로그인 창에 다 뜬다.

큰 상관 없을 것 같아 이렇게 구현했다.

 

이럼 카카오 로그인 끝이다!~

 

어떤식으로 동작되는지 간단히 짚고 넘어가자.

 

4. 동작 원리

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

Kakao Developers

여기 정말 잘 설명이 되어있다.

위 사이트에서 가져온 그림을 참고하며 설명해보면

 

우리는 일반적인 회원가입 과정을 생략하고, 바로 로그인 창으로 접근하는 방식으로 구현했다.

카카오 로그인 창에서 사용자가 로그인을 하면, 사전에 설정한 동의 창이 표시되며, 사용자는 우리가 지정한 동의 항목을 확인한 후 "동의하고 계속하기" 버튼을 누른다.

이후, 카카오 서버는 우리 백엔드 서버의 지정된 URI로 인가 코드를 포함한 GET 요청을 보내 로그인 절차가 진행되었음을 알린다.

우리는 이 GET 요청을 처리하는 함수 내에서, 카카오 서버로 액세스 토큰을 요청하는 POST 요청도 함께 구현해 두었다.

이 과정을 통해 토큰을 발급받으면, 다시 그 토큰을 이용해 카카오 API에서 유저 정보를 요청한다.

최종적으로 받은 유저 정보를 바탕으로, 로그인 완료 페이지의 URI를 응답으로 보내면, 이 요청이 카카오 서버를 거쳐 클라이언트까지 전달된다.
이로써 클라이언트에서는 로그인된 상태로 페이지가 정상적으로 넘어가게 된다.

 

근데 보통 email로 사용자를 구분하는데 사업자 등록증 없으면 email정보를 받아오지 못한다는게 좀 서럽다.

위 처럼만 회원가입 로그인을 구현한다면 취약점 무조건 존재할 수 밖에 없다...