Я выполняю аутентификацию с помощью google на передней стороне, которая отправляет токен доступа на сервер, а сервер проверяет токен и, если он действителен, возвращает токен, который разрешит доступ к защищенным ресурсам.
Я следовал этому руководству на среде , я все реализовал, и он работает хорошо. проблема на уровне отправки запроса к бэкэнду, с fetch все работает хорошо, но если я пытаюсь реализовать ax ios, сервер отправляет ответ 401 неавторизованным
с fetch
const googleResponse = (response) => {
const tokenBlob = new Blob([
JSON.stringify({
access_token: response.accessToken
}, null, 2)
], {type : 'application/json'});
const options = {
method: 'POST',
body: tokenBlob,
};
fetch('http://localhost:8000/api/auth/google/login', options).then(r => {
const token = r.headers;
r.json().then(user => {
if (token) {
setData({
//...data, isAuthenticated: true, user: user, token: token
...data, isAuthenticated: true, user: user, token: token
})
}
});
})
};
с топором ios
const responseGoogle = (response) => {
const tokenBlob = new Blob([
JSON.stringify({
access_token: response.accessToken
}, null, 2)
]);
axios.post('http://localhost:8000/api/auth/google/login', tokenBlob)
.then(response => {
const token = response.headers;
if (token){
setData({
...data, token: token, isAuthenticated: true
})
}
})
};
полный код
import React, {useState} from "react";
import {config} from "./config";
import {GoogleLogin, GoogleLogout} from 'react-google-login';
import axios from 'axios';
const App = () => {
const [data, setData] = useState({
isAuthenticated : false,
token : '',
user : null
})
const {isAuthenticated, user} = data;
const logout = () => {
setData({
...data, token: "", user: null, isAuthenticated: false
})
};
const onFailure = (error) => {
alert(error);
};
const googleResponse = (response) => {
const tokenBlob = new Blob([
JSON.stringify({
access_token: response.accessToken
}, null, 2)
], {type : 'application/json'});
const options = {
method: 'POST',
body: tokenBlob,
};
fetch('http://localhost:8000/api/auth/google/login', options).then(r => {
const token = r.headers;
r.json().then(user => {
if (token) {
setData({
//...data, isAuthenticated: true, user: user, token: token
...data, isAuthenticated: true, user: user, token: token
})
}
});
})
};
let content = !! isAuthenticated ?
(
<div>
<p>Authenticated</p>
<div>
{user && user.email}
</div>
<div>
<GoogleLogout clientId={config.GOOGLE_CLIENT_ID}
buttonText="Logout"
onLogoutSuccess={logout}
/>
</div>
</div>
) :
(
<div>
<GoogleLogin
clientId={config.GOOGLE_CLIENT_ID}
buttonText="Login"
onSuccess={googleResponse}
onFailure={onFailure}
isSignedIn
/>
</div>
);
return (
<div className="App">
{content}
</div>
);
}
export default App;