triplus) 구글로그인 구현

하쿄이_hakyoiii·2021년 12월 27일

프로젝트일지

목록 보기

4/12

이번에 소셜로그인을 진행하면서 카카오, 네이버, 구글로 로그인이 가능하게 만들기로 했다. 다들 oauth 로그인을 해보고싶다고 해서, 나는 구글로그인만 하기로 결정됐다.

나머지 oauth 중에 구글로그인이 좀 까다롭다고 해서 걱정했는데, 우여곡절이 있긴 했지만 나름 선방했다.

순서는 아래와 같다.

구글 application 설정(client—내 어플)
내 앱에서 구글로그인 버튼 클릭 시 구글로 이동 → 사용자가 승낙
사용자가 승낙하면 accesscode를 받아서 설정해준 redirecturl로 리다이렉트 된다.
리다이렉트와 동시에 서버에 accesscode를 전달해준다.
서버는 accesscode를 받아서 accesstoken을 받아올 요청을 authorization server(google)에 보내준다.
accesstoken과 사용자 정보를 받아 db에 저장 or 찾는다.
완료되면 우리쪽의 accesstoken을 발급해 클라이언트에 전달한다.

token발급을 서버에서 하는 이유는 보안상의 이유 때문이다.

코드

클라이언트에서 google로그인 버튼 클릭

const handleSignGoogle = () => {
    window.location.assign(
      `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.REACT_APP_GOOGLE_CLIENT}&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}/googlecallback&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email&state=google`
    );
  };

구글에서 내앱을 설정하고 부여받은 clientid와 설정한 redirecurl을 파라미터로 담아 google oauth2에 보내준다.

승인 후 redirect url 페이지로 돌아옴

const navigate = useNavigate();
  const url = new URL(window.location.href);
  const authorizationCode = url.searchParams.get('code');
  const dispatch = useDispatch();

  useEffect(() => {
    googleOauth(authorizationCode).then((res) => {
      console.log(res);
      dispatch(oauthLogin());
      navigate(-1);
    });
  }, [authorizationCode, navigate, dispatch]);

페이지가 렌더링 될 때 url에 파라미터로 보내진 code를 찾아 서버에 전달해준다.

서버에 요청이 들어오면 accessCode로 토큰 요청을 보낸다

google: async (req, res) => {
    const accessCode = req.body.authorizationCode;
    const oauth2Client = new google.auth.OAuth2(
      process.env.GOOGLE_CLIENT_ID,
      process.env.GOOGLE_CLIENT_SECRET,
      process.env.REDIRECT_URL
    );
    const { tokens } = await oauth2Client.getToken(accessCode);
    oauth2Client.setCredentials(tokens);
    const userInfo = await axios.get(
      `https://www.googleapis.com/oauth2/v3/userinfo?access_token=${tokens.access_token}`
    );
    const { sub, email, picture } = userInfo.data;
    user
      .findOrCreate({
        where: { userId: sub, email: email },
        defaults: { userId: sub, email: email, image: picture },
      })
      .then(([data, created]) => {
        const accessToken = generateAccessToken(data.dataValues);
        sendAccessToken(res, accessToken);
        return res.status(201).json({ success: true, message: '로그인이 완료되었습니다' });
      })
      .catch((err) => console.log(err));
  },