소셜로그인 연동 → 카카오 2

작성일 | In ,

로그인 성공 페이지

  • 카카오 API를 사용하여 로그인 성공 후 인가 코드 받기
    • 인가 코드로 카카오 토큰 API로 토큰을 요청.
      • 토큰으로 사용자의 정보를 가져옴
      • 토큰으로 로그인을 유지

로그인 성공 후 정보를 받아와 000님 반갑습니다. 라고 로그인 완료 된 모습을 띄우고 싶었다.
그러면 인가 된 코드를 받아와서 인가 코드를 넘겨 토큰을 받은 후 토큰으로 정보들을 확인 할 수 있었다.

인가 코드 받아오기

인가 코드를 받아오려면 카카오 개발자 센터에서 받은 REST API KEY와 내가 설정한 REDIRECT URI를 넣어야 했다.

1
2
3
const REDIRECT_URI = 'http://localhost:5173/sidepj_bose/login'
const REST_API_KEY = 'REST_API_KEY';
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

그리고 로그인 성공했을 시 window.location.href = link; 라는 코드를 추가

로그인에 성공했는데 깜박 거리더니 URL뒤에 ?code= 로 뭐가 막 들어왔다.
하지만 나는 다른페이지에서 사용자의 이름을 띄워주고 싶었고 SucessLogin.jsx 파일을 하나 만들어 ‘/successlogin’ 이라는 경로를 만들어줌.
그리고 window.location.href = link; 후에 nav(’/sucesslogin’)을 넣어줌.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const REDIRECT_URI = 'http://localhost:5173/sidepj_bose/login'
const REST_API_KEY = 'REST_API_KEY';
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

const KakaoLogin = () => {
    // ...
    
    const onLoginKakao = () => {
        window.Kakao.Auth.login({
            success: function(authObj) {
                window.location.href = link;
                nav('/successlogin')
            },
            fail: function(err) {
                console.error(err);
            },
        });
    };
    
    // ...    
}

export default KakaoLogin;

내 생각에는 url을 받고 성공한 페이지로 이동할 줄 알았는데, 깜박 거리고 아무런 움직임이 없음.
너무도 당연한 일이였고 successlogin 페이지에서 어떻게 code 값을 받아올 수 있는지 고민.
code를 받아오는 곳이 url이고 query로 받아오니까 REDIRECT_URI를 successlogin 페이지로 하면 될거라고 생각이 났음. Redirect 다시 한번 더 짚고 넘어가게됨….

1
2
3
const REDIRECT_URI = 'http://localhost:5173/sidepj_bose/sucesslogin'
const REST_API_KEY = 'REST_API_KEY';
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

이젠 오류가 무섭지도 않다. 페이지 이동하면서 난 오류였고, 참고에 너무 잘 적어주심.
카카오 개발자센터에서 Redirect URI를 등록하지 않은 것.
카카오 개발자센터에서 Redirect URI 까지 잘 등록해주면 url의 query param 값으로 code 값을 받을 수 있었고 SuccessLogin.jsx 파일에서 code 값을 추출할 수 있었음.

1
2
3
4
5
6
7
8
import { useLocation, useNavigate } from 'react-router-dom';

const SuccessLogin = () => {
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const code = queryParams.get('code');
    console.log(code)
}

여기까지가 인가코드를 받는 방법.

인가코드로 토큰 요청

원하는 정보에 접근하거나 로그인을 유지하려면 토큰이 필요.
카카오 API를 사용 → API 목록보기
토큰 받기를 들어가면 친절하게 요청의 헤더와 바디 값을 알 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const getKakaoToken = async () => {
    try {
        const response = await fetch('https://kauth.kakao.com/oauth/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                grant_type: 'authorization_code',
                client_id: 'REST_API_KEY',
                redirect_uri: 'http://localhost:5173/sidepj_bose/successlogin',
                code: code,
            }),
        });
        
        const data = await response.json();
        const accessToken = data.access_token;
    }
    catch(e) {
        console.error(e)
    }
}

토큰 값 받기 완료.

사용자 정보 가져오기

사용자 정보 가져오는 방법 또한 카카오 API를 사용.

1
2
3
4
5
6
7
8
9
const userResponse = await fetch('https://kapi.kakao.com/v2/user/me', {
    headers: {
        Authorization: `Bearer ${accessToken}`,
        'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
});

const userData = await userResponse.json();
const username = userData.kakao_account.profile.nickname;

여기서 계속 profile을 접근 할 수 없다고 떠서 userData를 콘솔로 찍어보니까 진짜 없었다…
산 넘어 산…

뭔가 저기 동의항목에서 필수로 받아야하나 생각이 들었고, 닉네임을 필수로 선택 변경

나머지는 권한이 없었음.
필수로 변경하고 다시 로그인해서 들어가니까

드디어 성공했다!

로그인 유지

내 사이트에서 로그인을 유지해줘야하는데 카카오 API에는 뭔가 구현해볼 수 있는 API가 없었다.
밀리의 서재 때 한번 해봤어서 느낌은 얼추 알것같았고, 이 블로그에 정리가 잘 되어있었다.

이건 밀리의 서재 때 토큰으로 로그인 유지하는 방법 → 토큰의 유무를 확인하기

Github Pages에서는 왜 안될까?

Git Pages에 배포한 후 결과물을 봤을 때 http://localhost:5173으로 넘어가서 성공 페이지가 보이지 않음.
Redirect URI를 고정시켜놔서 그런걸로 판단.

1
2
3
4
5
6
7
8
9
10
11
12
let REDIRECT_URI;
let ServerName = window.location.hostname;
switch (ServerName) {
    case 'localhost':
        REDIRECT_URI = 'http://localhost:5173/sidepj_bose/successlogin';
        break;
    case 'zxxmin.github.io':
        REDIRECT_URI = 'https://zxxmin.github.io/sidepj_bose/successlogin';
        break;
    default :
        break;
}

위와 같이 location.hostname 을 가져와서 조건을 주었는데도 안됨.
콘솔에 location.hostname을 검색했을 때는 잘 나왔는데, 왜 안될까????

이유

Github Pages에서는 SPA(Single Page Application)에 적합하지 않아서, 페이지를 리프레시하거나 직접 URL을 입력할 때 404 에러가 발생.
SPA는 이미 index.html과 JS 번들을 브라우저에게 넘겨서 브라우저가 처리하고 있는데, Github Pages에서는 새로고침하거나 리프레시할 때 서버에 요청하는데 서버에서는 요청한 페이지를 가지고 있지 않음.
이럴 때 대응은 404페이지 일 때 다시 메인으로 보내는 방법이 있다고 하는데,,,
더 적합한 방법을 찾아봐야겠음. → 아니면 배포를 vercel로 다시 옮겨야하나 고민.

평가

카카오 로그인 연동만 이틀이 걸렸다. 카카오 개발자센터에 등록을 하는 것만으로 하루가 걸렸다.
역시 직접 해보면 생각과 많이 달라지는 것 같다.
그래도 구현이 되니까 너무 뿌듯하고, 또 자신감도 얻었다. 로그인 페이지는 앞으로 어떠한 도메인을 해도 굉장히 중요한 페이지인데 앞으로 해야하는 날이 온다면 걱정보다는 자신감이 먼저이지 않을까 생각이 든다.

참고 블로그 - 카카오 로그인 구현하기
참고 블로그 - 정말 쉽다! 카카오 소셜 로그인
참고 블로그 - Kakao Developers