Вход в Google с помощью Django и React

Я пытаюсь интегрировать google login с Django и React (Vite), но постоянно получаю ошибку. Я настроил учетные данные в облачной консоли google, я использую @react-oauth/google для логина во фронтенде. Логин во фронтенде проходит, а в бэкенде - нет. Я не знаю, что я делаю неправильно.

Ниже приведена ошибка и код.

Фронтэнд работает хорошо, но бэкэнд имеет проблемы

settings.py

AUTH_USER_MODEL = "base.User"


# Application definition

INSTALLED_APPS = [
    "django.contrib.sites",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    # App
    "base",
    # Third party apps
    "rest_framework",
    "rest_framework.authtoken",
    "dj_rest_auth",
    "dj_rest_auth.registration",
    "allauth",
    "allauth.account",
    "allauth.socialaccount",
    "allauth.socialaccount.providers.google",
    "corsheaders",
    # Debug toolbar for development
    "debug_toolbar",
]



SITE_ID = 1


MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "allauth.account.middleware.AccountMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "debug_toolbar.middleware.DebugToolbarMiddleware",
]

AUTHENTICATION_BACKENDS = [
    "base.auth_backends.CaseInsensitiveModelBackend",
    "allauth.account.auth_backends.AuthenticationBackend",
]



# Social login settings

CALLBACK_URL = config("CALLBACK_URL")
LOGIN_REDIRECT_URL = "/api/auth/google/callback/"
SOCIALACCOUNT_LOGIN_ON_GET = True

ACCOUNT_EMAIL_VERIFICATION = "none"
ACCOUNT_AUTHENTICATION_METHOD = "email"
ACCOUNT_EMAIL_REQUIRED = True

SOCIALACCOUNT_PROVIDERS = {
    "google": {
        "APP": {
            "client_id": config("CLIENT_ID"),
            "secret": config("CLIENT_SECRET"),
            "key": "",
        },
        "SCOPE": [
            "profile",
            "email",
        ],
        "AUTH_PARAMS": {
            "access_type": "online",
        },
        "METHOD": "oauth2",
        # "REDIRECT_URI": "http://localhost:8000/api/auth/google/callback/",
    }
}


# Simple jwt config for dj-rest-auth 

SIMPLE_JWT = {
    "ROTATE_REFRESH_TOKENS": True,
    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=5),
    "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
}


REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "rest_framework_simplejwt.authentication.JWTAuthentication",
    ),
}


REST_AUTH = {
    "LOGIN_SERIALIZER": "base.serializers.CustomLoginSerializer",
    "USE_JWT": True,
}

views.py

class GoogleLoginView(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    callback_url = settings.LOGIN_REDIRECT_URL
    client_class = OAuth2Client

GoogleLogin.tsx

import { useGoogleLogin } from "@react-oauth/google";

const GoogleLoginButton = () => {
  const login = useGoogleLogin({
    onSuccess: async (tokenResponse) => {
      // Send the token ID to your Django backend
      const res = await fetch(
        `${import.meta.env.VITE_API_URL}/api/auth/google/login/`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            access_token: tokenResponse.access_token,
          }),
        }
      );

      if (res.ok) {
        const data = await res.json();
        console.log("User authenticated:", data);
        // Handle successful login response (e.g., store tokens and navigate)
      } else {
        console.error("Login failed:", res);
      }
    },
    onError: (error) => {
      console.error("Google Login Failed:", error);
    },
  });

  return (
    <button
      onClick={() => login()}
      className="p-2.5 bg-teal-900 hover:bg-teal-900/70 transition-colors rounded-lg w-full"
    >
      Login with Google
    </button>
  );
};

export default GoogleLoginButton;

Вернуться на верх