Блог

Главная - Вопросы по программированию - Вызов ReactJS для внутреннего маршрута для входа пользователя в систему с помощью Google / Facebook

Вызов ReactJS для внутреннего маршрута для входа пользователя в систему с помощью Google / Facebook

#node.js #reactjs #express #oauth-2.0

#node.js #reactjs #экспресс #oauth-2.0

Вопрос:

У меня есть сервер NodeJS Express, работающий на localhost: 5000, также мой сервер ReactJS работает на порту localhost: 3000

Я пытаюсь реализовать вход в систему с помощью OAuth2.0 Google, но у меня возникают проблемы с вызовом внутреннего маршрута из моего приложения React.

У меня есть стратегия входа в Google на моем сервере, и она работает. Генерирует мне токен и возвращает его.

ВНУТРЕННИЕ МАРШРУТЫ (протестированы и работают, генерируют и возвращают мне токен после выбора учетной записи Google)

 router.get(
  '/api/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

router.get(
  '/api/auth//google/redirect',
  passport.authenticate('google', { session: false }),
  (req, res) => {
    signToken(res, req.user);
  }
);

// Sign JSON Web Token, expires in 60 minutes
const signToken = (res, user) => {
  const payload = {
    id: user.id,
    name: user.name,
    email: user.email,
    role: user.status.role
  };

  jwt.sign(payload, keys.secretOrKey, { expiresIn: 3600 }, (err, token) => {
    res.json({
      success: true,
      token: `Bearer ${token}`
    });
  });
};

Я уже упоминал, что у меня возникли проблемы с ReactJS. Каков правильный способ сделать вызов из моего интерфейса в серверную часть, чтобы получить этот токен JWT?

У меня есть прокси в моем package.json

  "proxy": "http://localhost:5000"

Из моего компонента я пытаюсь регулярно вызывать axios на свой серверный сервер, чтобы открыть это окно для выбора пользователя Google… Я вроде потерял в этой части, как это должно работать. Мой код:

 import React, { Component } from 'react';
import axios from 'axios';

class testLogin extends Component {
  onGoogleClick = () => {
    axios
      .get('/api/auth/google')
      .then(res => console.log(res.data))
      .catch(err => console.log(err));
  };
  render() {
    return (
      <div>
        <button onClick={this.onGoogleClick}>Login With Google Account</button>
      </div>
    );
  }
}

export default testLogin;

Ошибка, которую я получаю:

Доступ к XMLHttpRequest по адресу ‘https://accounts.google.com/o/oauth2/v2/auth?response_type=codeamp;redirect_uri=http://localhost:5000/api/auth/google/redirectamp;scope=profile emailamp;client_id=510739647280-cggqldrpluvg35do2lv83ud3118pgal5.apps.googleusercontent.com ‘ (перенаправлено с ‘http://localhost:3000/api/auth/google ‘) из источника’http://localhost:3000 ‘ был заблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок ‘Access-Control-Allow-Origin’.

Ответ №1:

Попробуйте добавить это

 app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', '*')
      next()
})

Вы должны включить cors в своем приложении express: включите cors на nodejs

Ответ №2:

1. Сначала установите пакет cors и require (‘cors’).

2.Затем скопируйте следующий код

     app.use(
      cors({
         origin: "http://localhost:3000", 
         // allow to server to accept request from different origin
         methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
         credentials: true // allow session cookie from browser to pass through
           })
        );

Метки: