FE
로그인할 때 카카오로 로그인을 클릭하면
- 소셜 로그인을 할 때
카카오 로그인 버튼을 눌렀을 때
1) 어떤 걸로 로그인하는지 다시 로그인 페이지로 돌아왔을 때 알 수 있도록 localStorage.setItem("login", "kakao")
2) window.location.assign(아래 api)로
카카오 auth server에 요청을 보낸다
이때 redirect_uri로 다시 돌아오고 싶은 페이지 (여기서는 로그인하고 있는 페이지), response_type은 어떤 타입으로 받고 싶은지 선택, kakao_client_id는 내 앱을 카카오 소셜 로그인에 등록할 때 발급 받은 id
https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${redirect_url}3) 카카오 계정으로 로그인이 안되어 있으면 카카오 로그인 요청이 오고, 카카오로 로그인을 하면 동의 화면이 나오고 동의를 하면 redirect uri로 인가 코드가 전달된다 (authorization_code)
4) 다시 로그인 페이지로 돌아왔을 때
(react의 경우 useEffect(함수, [])를 해서 새롭게 렌더링 될 때마다 호출되도록 한다)
localStorage.getItem('login')으로 어떤 소셜 로그인을 했는지 확인하고 url.searchParams.get("code")로 params로 올 authorizationcode를 받는다
이때 없으면 인증이 안된거고
5) 있으면 code를 가지고 백엔드 api로 code를 보낸다. 여기서 code, 카카오에 내 앱을 등록하면서 받은 kakao_client_id, kakao_client_secret, client_origin을 가지고 https://kauth.kakao.com/oauth/token 에 data를 보내서 response로 accessToken, refreshToken을 받는다
BE
6) 같은 백엔드에서 카카오에서 제공하는 api를 이용해 카카오에서 가지고 있는 사용자의 정보 등을 넘겨줄 수 있다
이때 headers: { Authorization: 'Bearer ${kakaoAccessToken} }를 보내준다
카카오 사용자 정보에는 사용자가 넘겨주기로 동의한 데이터들이 있다
ex. 닉네임, 썸네일 이미지 url, 패스워드, 이메일 등등
만약 사용자 정보가 없다면 (예를 들어 유저 정보 제공에 대한 동의를 안 했다든가 그러면 새롭게 만들어서 정해줄 수도 있고 (우리 서비스는 그렇게 했다), 아니면 다른 방법을 찾아야겠조
7) 같은 백엔드에서 res에 쿠키로 넣어줄 카카오에서 넘겨준 accessToken와 refreshToken을 새로 만들어서 넣어준다 (새로 만들어줘야 하나? 그냥 카카오에서 받은 거 넣으면 되지 않나? : 이건 서비스 내에서 자체적으로 관리하는 토큰이다. 카카오를 통해 사용자를 인증했고 그걸 토대로 우리 서비스가 사용자를 인정해서 자체 토큰을 발급하는 것이다. 카카오 accessToken은 다시 카카오에 정보를 요청할 때 사용하려고 넣어둔건가?)
res.cookie('accessToken', accessToken, cookieOption) 이런 식으로 넣어주면 되다
8) 같은 백엔드에서 res.json으로 사용자 정보와 자체 서비스에서 직접 만든 accessToken을 클라이언트에 보낸다
FE
9) 백엔드로 authorization code를 보내서 위의 과정 끝에 사용자의 정보를 response로 받아온다
localStorage에 user, token으로 유저의 정보와 accessToken을 넣어준다. 아마 그냥 넣으면 안되고 stringify를 해줘야 할 거다 (localStorage의 스펙 보기)
axios.default.header로 authorization: Bearer ${직접 만든 토큰}을 보내준다
그럼 이제 로그인이 완료되고 요청을 보낼 때마다 header에 있는 accessToken을 이용해서 사용자의 인증할 수 있다
그 뒤의 플로우
로그인이 되어야 볼 수 있는 페이지에서는
checkAccessToken으로 req.headers의 authorization을 확인해서 accessToken을 찾고 있으면 env에 정의해둔 access_secret을 이용해서 verify를 해준다
카카오 탈퇴
https://kapi.kakao.com/v1/user/unlink
이 링크로 마찬가지로 authorization: bearer accessToken(값)을 보내준다
