Google OAuth

Google OAuth를 포함한 인증 대행 서비스들은 대부분 비슷한 플로우로 흘러간다.

Apple 제외. 얘네는 인증이 매우 까다롭다. 아래 글을 참조하자.

애플 OAuth

 

OAuth를 구성하면서 프론트와 백의 역할을 구분하는게 중요하다.

FrontEnd -> GoogleOAutoServer -> BackEnd -> TokenReturn

인증 키 발급

먼저 Google OAuth 인증을 위해 인증 Client Key를 받아야한다.

GCP 에 가입한 뒤 Credentials에서 OAuth client ID를 생성해주자.

URL1 에는 GoogleOAuthServer에 요청을 보내는 프론트의 ORIGIN ( except port num ) 을 적어주고, URL2 에는 Google OAuth Token 발급이 끝난 뒤 돌아갈 URL을 적어주자.

프론트엔드 플로우

Node.js로 필요 기능만 간단히 구현했다.

로그인 화면

router.get("/", async function (req, res, next) {
  return res.send(`
    <h1>log in</h1>
    <a href="/login">Log in</a>
  `);
});

로그인 단계

router.get("/login", async (req, res) => {
  let url = "https://accounts.google.com/o/oauth2/v2/auth";
  // client_id는 위 스크린샷을 보면 발급 받았음을 알 수 있음
  // 단, 스크린샷에 있는 ID가 아닌 당신이 직접 발급 받은 ID를 사용해야 함.
  url += `?client_id=${GOOGLE_CLIENT_ID}`;
  // 아까 등록한 redirect_uri
  // 로그인 창에서 계정을 선택하면 구글 서버가 이 redirect_uri로 redirect 시켜줌
  url += `&redirect_uri=${GOOGLE_REDIRECT_URI}`;
  // 필수 옵션.
  url += "&response_type=code";
  // 구글에 등록된 유저 정보 email, profile을 가져오겠다 명시
  // url += "&scope=email profile";
  url += "&scope=email";
  // 완성된 url로 이동
  // 이 url이 위에서 본 구글 계정을 선택하는 화면임.
  res.redirect(url);
});

redirect

router.get("/done", async function (req, res, next) {
  const { code } = req.query;
  console.log(`code: ${code}`);

  const resp = await axios.post(GOOGLE_TOKEN_URL, {
    code,
    client_id: GOOGLE_CLIENT_ID,
    client_secret: GOOGLE_CLIENT_SECRET,
    redirect_uri: GOOGLE_REDIRECT_URI,
    grant_type: "authorization_code",
  });
  res.json(resp.data);
});

백엔드 플로우

프론트에서 redirect 엔드포인트에서 받은 data에 있는 accessToken을 백엔드로 전달하면, 토큰을 분해해 정보를 확인하고, 회원 정보를 저장 혹은 인증을 거친 뒤에 Google OAuth Token이 아닌 자체 토큰으로 분해해 프론트에 전달한다.