Аутентификация react oauth2 не работает при отправке запроса

я пытаюсь интегрировать социальную аутентификацию для моего сайта react, который я использую drf на стороне сервера, здесь я использую библиотеку react-oauth2/google, потому что пакет react-google-login npm кажется обесцененным, так что в отличие от react-google-login, который после отправки запроса в google со стороны клиента возвращает accesstoken и refresh token, которые автоматически отправляются на сторону django через обратный вызов, запрашивающий django authtoken, а также отправку/сравнение данных пользователей, если таковые имеются. С другой стороны, react-oauth2/google дает мне только один токен под названием code. Я отправил его на сторону сервера, и он вернул неверный мандат. ошибка

я использую social_django для сервера drf

AUTH.JS

const GoogleLoginFunc = useGoogleLogin({
        flow: 'auth-code',
        onSuccess: async (codeResponse) => {
            console.log(codeResponse);
            
            // const tokens = await axios.post(
            //     'http://localhost:3000/auth/google', {
            //         code: codeResponse.code,
            //     });

            // console.log(tokens);
            SocialGoogleLoginFunc(codeResponse.code)
        },
        onError: errorResponse => console.log(errorResponse),
    });






<GoogleLogin
                            
                            onSuccess={GoogleLoginFunc}

                            // onSuccess={credentialResponse => {
                            //     console.log(credentialResponse.credential);
                            //     SocialGoogleLoginFunc(credentialResponse.credential)
                            //   }}


                            onError={() => {
                                console.log('Login Failed');
                            }}

                            useOneTap
                            />;

GOOGLEAUTH.JS

const SocialGoogleLoginFunc=(accesstoken,app_id,app_secret)=>{
// console.log(`MY CREDENTIALS ${app_id},${app_secret}`)
// let client_id='nILBGJCOSiaLKDyRZeFpHmUoyDw0PgChrkEGzjkj'
// let client_secret='fkUSbr5mtR6oIX3osX51zS1ycbWOfNWGvEjhhKwVQvBb3rJ8gRN1BW2gkFMiPBfBKq3437IC3joXQUEFxPRs1PSXfSgKehOCwoRJoNgjtAzI6ZXwdjyX3RyZfTKKb8hE'

// console.log(client_secret.includes(' '))
// http://127.0.0.1:8000/client/auth/convert-token
// grant_type:"convert_token",
// client_id: client_id,
// client_secret: client_secret,
// backend:"google-oauth2", 
// token:accesstoken
// http://127.0.0.1:8000/
fetch('http://127.0.0.1:8000/auth/api/register-by-access-token/social/google-oauth2/',{
   
    method: "POST",
    body: JSON.stringify({
        
        access_token:accesstoken

    }),
    headers: {
        "Content-Type": 'application/json;charset',
        "accept":'application/json;charset'

    }

})
.then(response=>{
    return response.json()
}).then(data=>{
   try{
    console.log(data)
    localStorage.setItem('access_token',data.access_token)
    localStorage.setItem('refresh_token',data.refresh_token)
   }catch(error){
    console.log(error)
   }

})

}

export default SocialGoogleLoginFunc

Это связано с тем, что при использовании flow: "auth-code" в useGoogleLogin возвращается код авторизации, а не токен доступа. Если вы удалите эту строку (flow: "auth-code"), запрос отправит вам токен доступа, как это было в случае с react-google-login.

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