어떤 사이트에서 회원가입이나 로그인을 하려고 할 때 SNS 로그인 버튼이 있는 것을 볼 수 있다. 이러한 로그인을 우리는 OAuth 로그인이라고 부른다.
백엔드와 프론트엔드에서 이 로직을 어떻게 처리하는지 설명하는 포스팅이다.
구글 공식 문서를 보면 사용자가 Request token
을 주면 구글에서 인가 코드
를 보내준다.
그러면 사용자는 인가 코드
를 이용해서 Access Token
을 달라고 요청하고
그 토큰을 이용하여 구글 로그인을 수행하는 로직이다.
하지만 이대로는 이해가 잘 되지 않으니 프론트와 백엔드를 이용하여 좀 더 자세한 로직을 설명하려 한다.
위 이미지를 참고하면 흐름은 다음과 같다.
1. 프론트엔드에서 OAuth 로그인을 요청한다.
2. 구글 서버에서 인가코드를 발행한다 (Access Token)
3. 받은 인가 코드를 백엔드에 보내준다.
4. 인가코드를 이용하여 구글 서버에 사용자의 정보를 요청한다.
5. 올바른 인가코드를 받은 구글 서버는 해당 사용자의 정보를 제공한다.
이러한 로직을 이용하여 실제로 코드를 짜보자.
우선 구글서버의 인가코드를 받기위해서는 어플리케이션을 등록해야한다.
API 및 서비스 > OAuth 동의 화면
을 들어간다.위 사진에 보이는 Google+ API를 눌러 사용을 눌러준다.
(본인은 이 작업을 하지 않아 시간을 꽤 소모했다..)
window.location.href ="https://accounts.google.com/o/oauth2/auth?" +
"client_id={클라이언트 ID}&"+
"redirect_uri={리디렉션 URI}&"+
"response_type=token&"+
"scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile";
우선 프론트에서 구글 로그인을 위한 버튼을 만들고 그 버튼을 눌렀을 때 위의 링크로 이동하도록 설정해준다.
google cloud platform > 사용자 인증 정보
에 가면 아까 만든 클라이언트 id
가 있다. 그것을 복사해서 붙여준다.token
을 받겠다고 적어주고const parsedHash = new URLSearchParams(window.location.hash.substring(1));
const accessToken = parsedHash.get("access_token");
const { data } = await Api.post("oauth/google", { accessToken });
위의 코드를 이용해서 쿼리문으로 받아온 access_token
값을 뽑아오고 백엔드로 넘겨준다.
const { accessToken } = req.body;
const { data } = await axios.get(
`https://www.googleapis.com/oauth2/v1/userinfo?access_token=${accessToken}`
);
백엔드에서는 프론트엔드에서 넘어온 accessToken
값을 이용해서 구글 서버에 사용자의 정보를 요청한다.
정보를 받은 뒤에는 본인의 DB에 회원가입 혹은 로그인을 진행하고, JWT 토큰
을 새로 발급해서 로그인을 진행해주면 끝이다!
본인은 DB에 없는 정보면 회원가입을, 있는 정보라면 로그인을 시켜주는 방식으로 진행했다.
이전부터 도전해보고 싶었던 방식이었는데 시간이 많이 걸리고 코딩을 완수하지 못해서 매번 문턱에서 멈췄었다..
막상 코드를 완성한 뒤에 포스팅을 하다보니 생각보다 간단했다..
코딩할때에는 시간이 많이 걸리고, 삽질도 많이 했는데 허무하기도 하지만 이번 기회에 제대로 기억하고 잊지말아야겠다.
credential을 디코딩해서 구현하려고했는데 인증을 여러번 하니까 credential 정보는 넘어오지않더라구요 ㅠㅠ 그래서 검색하다가 올리신 포스팅을 보고 구글 api 조회를 한번더 태우니 제가 원하는 프로필 정보가 넘어오는군요 !! ㅠㅠ 도움이 많이됐습니당 감사합니다