2

我正在使用 next js 和 django 创建一个网站，并尝试使用 Google social auth 进行身份验证。为此，我使用 djoser 库和其他 JWT 库，如 django-simple-jwt。起初外翻是可以的。我可以选择我的谷歌帐户，但它会将错误请求返回为 400 状态。当我尝试使用邮递员时，它给出了以下错误：**“non_field_errors”：[“在服务器端会话数据中找不到状态。” ]**

Google.tsx 文件

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { googleAuthenticate } from '../actions/auth.action';
import { useRouter } from 'next/router'


const Google = ({ googleAuthenticate }) => {
  const router = useRouter();
  const code = router.query.code;
  const state = router.query.state;


    useEffect(() => {

        if (state && code) {
            googleAuthenticate(code, state)
        }
    }, [state, code]);

    return (
        <div className='container'>
            <div className='jumbotron mt-5'>
                <h1 className='display-4'>Welcome to Auth System!</h1>
                <p className='lead'>This is an incredible authentication system with production level features!</p>
                <hr className='my-4' />
                <p>Click the Log In button</p>
                <Link href='/LoginApi' ><button>Login</button></Link>
            </div>
        </div>
    );
};

export default connect(null, { googleAuthenticate })(Google);

我的 redux 操作文件为：

export const googleAuthenticate = (state, code) => async dispatch => {

    console.log("GoogleAuthenticate called -------------------")
    const access = (typeof window !== "undefined") ? localStorage.getItem('access') : '';

    console.log("google auth = " + code)
    console.log("google auth = "  +state)

    if (state && code && !access) {
        const config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };

        const details = {
            'state': state,
            'code': code
        };

        const formBody = Object.keys(details).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(details[key])).join('&');

        console.log("url link "  + `${BACKEND_URL}/auth/o/google-oauth2/?${formBody}`)
        try {
            const res = await axios.post(`${BACKEND_URL}/auth/o/google-oauth2/?${formBody}`, config);

            console.log("login success from google " + res.data)
            dispatch({
                type: GOOGLE_AUTH_SUCCESS,
                payload: res.data
            });

            dispatch(load_user());
        } catch (err) {
            console.log("error in google login " + err);
            dispatch({
                type: GOOGLE_AUTH_FAIL
            });
        }
    }
};```
4

0 回答 0