Facebook 和 Google 身份验证过程在 Django Rest 框架中使用 Djoser 取消，Next.js+React 作为前端

Question

I used Djoser to handle basic user authentication functions for me in Django Rest Framework. And I tried to use its social auth endpoint. According to its documentation , if I understand correctly, I first added redirect_uri to its endpoint, eg :

http://127.0.0.1:8000/auth/o/facebook/?redirect_uri=http://localhost:3000

It worked fine. Then I used the link to authenticate and it returned code and state (as data in the code below) to me as queries in the redirect_uri. But then when I post back the code and state in getInitialProps method from Next.js server to my backend,

const authResponse = await axios.post(`http://127.0.0.1:8000/user_info/o/facebook/`,data,{
      headers:{
          'Content-Type':'application/x-www-form-urlencoded'
      }
}

Django returns a status code 400. Then I used postman to test posting code and state with 'Content-Type':'application/x-www-form-urlencoded' , it showed on the window:

{
    "non_field_errors": [
        "Authentication process canceled"
    ]
}

I tried the same case with Google OAuth2. The following is the python code in my settings.py.

import os
from dotenv import load_dotenv

load_dotenv()

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

DEBUG = True

ALLOWED_HOSTS = ['127.0.0.1','0.0.0.0']

INSTALLED_APPS = [
    ...
    'djoser',
    'social_django',
    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders',
    'user_info',
    ...
]

...

CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",
]

ROOT_URLCONF = 'myprojectname.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
            ],
        },
    },
]

...

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication'
    ),
    'DEFAULT_PERMISSIONS_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    )
}

...

AUTHENTICATION_BACKENDS = [
    "django.contrib.auth.backends.ModelBackend",
    "djoser.social.backends.facebook.FacebookOAuth2Override",
    "social_core.backends.google.GoogleOAuth2"
]

SOCIAL_AUTH_FACEBOOK_KEY = os.getenv('FACEBOOK_APP_ID')
SOCIAL_AUTH_FACEBOOK_SECRET = os.getenv("FACEBOOK_SECRET_KEY")

SOCIAL_AUTH_FACEBOOK_SCOPE = ["email"]
SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = {"fields": "id, name, email"}

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = os.getenv('GOOGLE_APP_ID')
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = os.getenv("GOOGLE_SECRET_KEY")

SOCIAL_AUTH_RAISE_EXCEPTIONS = False

DJOSER ={
    "LOGIN_FIELD": "email",
    "USER_CREATE_PASSWORD_RETYPE":True,
    "SEND_ACTIVATION_EMAIL": True,
    "ACTIVATION_URL":f'{os.getenv("FRONTEND_URL")}/activate/'+'{uid}/{token}',
    "SERIALIZERS": {
        'user_create':'user_info.serializers.UserCreateSerializer',
        'user':"user_info.serializers.UserCreateSerializer"
    },
    "SOCIAL_AUTH_ALLOWED_REDIRECT_URIS": [os.getenv("FRONTEND_URL")],
}

AUTH_USER_MODEL = 'user_info.User'

...

I only set my app domains as localhost and site url as http://localhost:8000/ in Facebook developer console.

Is there anyway I can get rid of the Authentication Process Cancelled and successfully get the token? Thanks a lot!!!!

Answer 1

I have the same issue and I was able to solve this one, however I got sucked into another but this will probably solve this issue for you. Just whitelist your URI to be authorized. I use Google OAuth and here's a screenshot of what I mean to convey.

You need to set 'http://127.0.0.1/' as the authorized domain.