Реагируйте, логин Google не работает с Axios - PullRequest
Новая
       66

Реагируйте, логин Google не работает с Axios

0 голосов
/ 03 мая 2020

Я выполняю аутентификацию с помощью 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;

Ответы [ 2 ]

2 голосов
/ 03 мая 2020

В вызове fetch вы включаете {type : 'application/json'}, но не включаете заголовки конфигурации для вызова ax ios.

Пожалуйста, попробуйте включить конфигурацию типа приложения: 

const responseGoogle = (response) => {

  let tokenBlob = new Blob([
    JSON.stringify({
        access_token: response.accessToken
    }, null, 2)
  ]);

  let config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  // The call takes the URl, the body (your stringified blob), and the headers config
  axios.post('http://localhost:8000/api/auth/google/login', tokenBlob, config)
      .then(response => {
          const token = response.headers;
          if (token){
              setData({
                  ...data, token: token, isAuthenticated: true
              });
          }
      });
};
0 голосов
/ 03 мая 2020

я нашел решение, мне просто нужно было сделать 

    const responseGoogle = (response) => {
        const access_token = response.accessToken;
        const tokenSend = {access_token}

        axios.post('http://localhost:8000/api/auth/google/login', tokenSend)
            .then(response => {
                const token = response.headers;
                    setData({
                        ...data, token: token, isAuthenticated: true, user: response.data
                    })
            })
    };
...