Аутентификация 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.