[GOOGLE]
1. 프론트엔드에서 OAuth 로그인을 요청한다.
2. 구글 서버에서 인가코드를 발행한다 (Access Token)
3. 받은 인가 코드를 백엔드에 보내준다.
4. 인가코드를 이용하여 구글 서버에 사용자의 정보를 요청한다.
5. 올바른 인가코드를 받은 구글 서버는 해당 사용자의 정보를 제공한다.
Plain Text
복사
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";
JavaScript
복사
우선 프론트에서 구글 로그인을 위한 버튼을 만들고 그 버튼을 눌렀을 때 위의 링크로 이동하도록 설정해준다.
•
client_id : google cloud platform > 사용자 인증 정보에 가면 아까 만든 클라이언트 id가 있다. 그것을 복사해서 붙여준다.
•
redirect_uri : 이것도 아까 적은 리디렉션 URI를 적어준다.
•
response_type : token을 받겠다고 적어주고
•
scope : 받아올 유저의 정보 범위를 적어준다.
리디렉션으로 넘어온 URI 코드
const parsedHash = new URLSearchParams(window.location.hash.substring(1));
const accessToken = parsedHash.get("access_token");
const { data } = await Api.post("oauth/google", { accessToken });
Plain Text
복사
위의 코드를 이용해서 쿼리문으로 받아온 access_token 값을 뽑아오고 백엔드로 넘겨준다.