카카오로 로그인 하기

카카오로 로그인 하는 기능은 혼자 구현해보았다. 큰 흐름은 깃허브로 로그인 하는 것과 똑같다. 

일단 카카오 개발자 사이트에 들어가서 깃허브 OAuth app 만들었던것과 같이 내 어플리케이션을 만들어주었다. callback 되는 사이트는 깃허브와 비슷하게 /users/kakao/finish 로 하였다.

export const startKakaoLogin = (req, res) => {
    const baseUrl = "https://kauth.kakao.com/oauth/authorize";
    const config = {
        client_id: "내가 발급받은 클라이언트 아이디",
        redirect_uri: "http://localhost:4000/users/kakao/finish",
        response_type: "code",
        scope: "account_email,gender,profile_nickname",
    }
    const params = new URLSearchParams(config).toString();
    const finalUrl = `${baseUrl}?${params}`;
    return res.redirect(finalUrl);
}

1. 인가코드 발급 받기

일단 카카오개발자 사이트에서 REST API 문서에 들어가서 확인해보면 다음과 같다.

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

이때, 파라미터중에 required가 O 인, 즉 필수적인 파라미터는 scope를 제외한 세개이다. 클라이언트 아이디는 내가 발급받은 것이고, redirect_uri는 해당 과정이 끝나고 연결될 url이다. response_type은 code로 고정이라고 써있었다. scope에서는 내가 사용자로부터 받고싶은 정보들을 써야 했고, 콤마로 구분하여 써야한다.

그리고 URLSearchParams를 통해 새로운 url을 만든뒤 redirect 해주었다.

이렇게되면 카카오로부터 인가 코드를 발급 받은 단계 까지 온것이다. 이제 인가코드를 사용해 토큰을 받아야하는 단계이다. (이런 단계들은 카카오 개발자 사이트에 자세히 쓰여있다.)

 

2. 토큰 받기

POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-type: application/x-www-form-urlencoded;charset=utf-8

일단 POST를 사용하므로 나는 fetch를 사용하기로 했다. 나의 코드는 다음과 같다.

export const finishKakaoLogin = async (req, res) => {
    const baseUrl = "https://kauth.kakao.com/oauth/token";
    const config = {
        grant_type: "authorization_code",
        client_id: "발급받은 클라이언트 아이디",
        redirect_uri: "http://localhost:4000/users/kakao/finish",
        code: req.query.code,
    };
    const params = new URLSearchParams(config).toString();
    const finalUrl = `${baseUrl}?${params}`;
    const tokenRequest = await (
        await fetch(finalUrl, {
            method: "POST",
            "Content-Type": "application/x-www-form-urlencoded",
        })
    ).json();
}

카카오 개발자 사이트에 있는 파라미터 표이다. 아래의 4가지가 필수 파라미터 이다. 나는 config 객체에 이들을 담아 사용했다.

grant_type	String	authorization_code로 고정	O
client_id	String	앱 REST API 키 [내 애플리케이션] > [앱 키]에서 확인 가능	O
redirect_uri	String	인가 코드가 리다이렉트된 URI	O
code	String	인가 코드 받기 요청으로 얻은 인가 코드	O

POST를 통해 토큰 발급을 요청 하는 것이고, 요청 성공시 응답에는 토큰정보가 들어있다. 이 토큰 정보에 액세스 토큰이 들어있고, 나는 이를 이용해 사용자 정보를 얻어와야 한다.

처음에는 fetch의 리턴값을 다시 json()을 통해서 json형식으로 바꾸어주어야 하는데 이를 잊고있다가 그냥 했더니 이상한 객체가 리턴되어서 시간을 잡아먹었다. 

이제 액세스토큰을 받았으니 이를통해서 사용자 정보에 접근을 해야할 차례이다.

 

3. 액세스 토큰으로 사용자 정보에 접근하기

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const apiUrl = "https://kapi.kakao.com";
    const kakaoData = await (await (fetch(`${apiUrl}/v2/user/me`, {
        headers: {
            Authorization: `Bearer ${access_token}`,
        },
    }))).json();

    let user = await User.findOne({ email: kakaoData.kakao_account.email });
    if (!user) {
        user = await User.create({
            name: kakaoData.kakao_account.profile.nickname,
            username: kakaoData.kakao_account.profile.nickname,
            email: kakaoData.kakao_account.email,
            password: "",
            socialOnly: true,
        });
    }
    req.session.loggedIn = true;
    req.session.user = user;
    return res.redirect("/");
}

이 코드는 finishKakaoLogin 안에 들어있는 코드이다. 만약 리턴으로 받은 객체에 액세스토큰이 있다면, 일단 그 액세스토큰을 변수에 저장해두고 작업을 시작한다.

GET/POST /v2/user/me HTTP/1.1
Host: kapi.kakao.com
Authorization: Bearer ${ACCESS_TOKEN}/KakaoAK ${APP_ADMIN_KEY}
Content-type: application/x-www-form-urlencoded;charset=utf-8

사용자 정보를 가져오기 위한 안내 이다. 두가지 방법이 있는데, GET 혹은 POST 둘다 가능하고 액세스토큰을 이용하던가, 아니면 앱 어드민 키를 이용하는 것이다. 내가 가지고있는 것은 액세스 토큰이었기 때문에, 나는 이를 이용했다. 그리고 fetch는 default로 GET이라고 한다. 따라서 method를 따로 설정해주지 않으면 GET이 된다. 이때에도 반환된 값을 json형식으로 바꾸어주어야 한다. 

그리고 밑의 과정은 깃허브 로그인과 같다. 만약 이메일로 찾아낸 유저가 있다면 그냥 로그인 시켜주고, 없다면 해당 이메일로 새로운 계정을 만들어 주는 것이다.

 

끝~