React + Django 프로젝트 Google Login 적용

euNung·2023년 12월 25일

개발 기록

목록 보기

1/1

구글 로그인 적용 이유

최근 리액트를 다시 공부하게 되면서 이미 배포된 Todolist 프로젝트를 리팩토링해야겠다고 마음을 먹었다. 배포된 환경을 보면서 계속 로그인 서비스가 없다는 것이 마음에 걸렸고, 이전에 일반 로그인은 경험해보았으니 소셜 로그인 기능을 추가해보기로 마음먹었다. 대부분의 소셜 로그인 api 사용 방법이 비슷한 것으로 알고 있었고, 본인이 구글을 많이 사용해서 구글 로그인만 일단 적용해보았다.

Workflow

전체적인 과정은 다음과 같다.
프론트에서 구글 로그인 요청을 해서 얻은 값을 백엔드 서버에 전송한 후, 백엔드 서버에서 해당 값이 유효한지 구글 api를 통해 확인한다. 유효하다면 사용자 정보를 추출하여 해당 사용자가 회원가입을 했는지 확인한 후 회원가입 여부에 따라 회원가입을 진행한다. 이후 JWT token을 생성하여 프론트로 보내준다. 프론트에서 JWT token을 header에 적용하여 api 요청을 보내면 백엔드에서 사용자 확인이 가능하다.
구글 로그인 Workflow

과정 및 코드

코드를 작성하기 전에 구글에서 Oauth2 api를 사용할 수 있도록 설정해주어야 한다.
1. Google Cloud 검색 > 콘솔 > API 및 서비스
2. 필요에 따라 새 프로젝트를 생성 후 사용자 인증 정보 탭에서 상단의 +사용자 인증 정보 만들기 > OAuth 클라이언트 ID 클릭
과정2 이미지
3. 이후 나타나는 페이지에서 본인의 환경에 따라 클라이언트 키를 생성
4. OAuth 2.0 클라이언트 ID 목록이 하나 추가 것을 확인 후 해당 페이지를 클릭
5. 승인된 자바스크립트 원본, 승인된 리디렉션 URI 입력 후 저장

6. 클라이언트 ID 확인

이제 코드를 작성해줄 차례이다.
프론트는 @react-oauth/google 라이브러리를 사용했는데 정말 간단했고, 백엔드 설정에서 파이썬 문법과 Django를 오랜만에 사용해서 고난을 겪었지만 동작이 가능할 정도로 간단하게만 적용시켰다. 백엔드 코드는 다음에 기회가 되면 자세히 다뤄보겠다.

import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import React from "react";

const onLogin = (res) => {
  fetch(process.env.API_URL + "/google/login/callback/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        access_token: res.clientId,
        id_token: res.credential,
      }),
    })
    .then((res) => res.json())
    .then((res) => {
    localStorage.setItem("token", res.access_token);
    location.reload();
  })
    .catch((e) => {
    alert("서버 요청 중 오류가 발생했습니다.");
  });
}

const GoogleLoginButton = () => {
  // GOOGLE_CLIENT_ID는 위 6번 과정에서 확인할 수 있다.
  const clientId = process.env.GOOGLE_CLIENT_ID;
  
  return (
    <>
      {clientId && (
        <GoogleOAuthProvider clientId={clientId}>
          <GoogleLogin
            onSuccess={(res) => {
              onLogin(res);
            }}
            onError={() => {
              console.log("err");
            }}
          />
        </GoogleOAuthProvider>
      )}
    </>
  );
};

export default GoogleLoginButton;

결과

적용된 결과는 아래 링크에서 확인할 수 있다.
🔗 https://todolist-eunung.web.app/

더 알아보기

백엔드는 최대한 간단하게 가져가기 위해서 이전에 사용했었던 pythonanywhere를 그대로 사용했다. 여기서 문제가 발생했는데 개발 환경에서는 잘 동작됐던 구글 로그인이 배포 환경에서는 구글 로그인을 시도하면 응답이 오지않았다.
이유를 알아보니 views.py에서 동일한 백엔드 서버로 JWT token을 생성하는 api를 요청하는데 free account에서는 worker가 하나라서 해당 작업을 수행할 worker가 없다는 이유였다... 배포 환경에 해당 기능을 성공적으로 마무리하고 싶어서 일시적으로 hacker account로 업그레이드한 후 배포 환경에서도 구글 로그인을 적용할 수 있었다.
🔗 pythonanywhere Forum 글 확인하기

euNung

프론트엔드 개발자

React + Django 프로젝트 Google Login 적용