Невозможно отправить JSON в реагирующий компонент в экспресс - PullRequest
0 голосов
/ 19 сентября 2018

Я пытаюсь создать Outh в стеке MERN, используя passport-local и passport-linkedin , перед созданием реагирующей версии я создал в Express MVC, используя ejs, который работал отлично, нокогда я переключился на реакцию авторизация с linkedin не дает никакого ответа

сервер

var session = require('express-session');
var morgan = require('morgan');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var passport = require('passport');
var flash = require('connect-flash');
var cors = require('cors')
var path = require('path');

var configDB = require('./config/database.js');
mongoose.connect(configDB.url, { 
    useMongoClient: true,
});
require('./config/passport')(passport);

app.use(cors());
app.use(morgan('dev'));

app.use(bodyParser.json());

app.use(session({
    secret: 'anystringoftext',
    saveUninitialized: true,
    resave: true
}));

app.use(passport.initialize());
app.use(passport.session());
app.use(flash()); 

стратегия:

passport.use(new LinkedinStrategy({
    consumerKey: configAuth.linkedinAuth.consumerKey,
    consumerSecret: configAuth.linkedinAuth.consumerSecret,
    callbackURL: configAuth.linkedinAuth.callbackURL,
    profileFields: ['id', 'first-name', 'last-name', 'email-address', 
   'headline']
       },
    function (token, tokenSecret, profile, done) {
        process.nextTick(function () {
            User.findOne({
                'linkedin.id': profile.id
            }, function (err, user) {
                if (err)
                    return done(err);
                if (user)
                    return done(null, user);
                else {
                    console.log(profile);

                    var newUser = new User();
                    newUser.linkedin.id = profile.id;
                    newUser.linkedin.token = token;
                    newUser.linkedin.tokenSecret = tokenSecret;
                    newUser.linkedin.firstName = profile._json.firstName;
                    newUser.linkedin.lastName = profile._json.lastName;
                    newUser.linkedin.emailAdress = 
                    profile._json.emailAdress;
                    newUser.linkedin.headline = profile._json.headline;





                    newUser.save(function (err) {
                        if (err)
                            throw err;
                        return done(null, newUser);
                    })




                }
            })
        })
    }))

маршруты

app.post('/login', passport.authenticate('local-login'),
    function(req,res){
        res.json(req.user.local)
    });


app.post('/register', passport.authenticate('local-signup'),
    function(req,res){
    res.json(req.user.local)
})



app.get('/auth/linkedin',
    passport.authenticate('linkedin', {
        scope: ['r_basicprofile', 'r_emailaddress']
    }),function(req,res){
        res.json(req.user.linkedin)
    }
    );




app.get('/auth/linkedin/callback',
    passport.authenticate('linkedin'),
    );

Все маршруты работали правильно в случае экспресс-MVC, но в ответ все маршруты аутентификации дают JSONно нет ответа в случае "/ auth / linkedin"

Реакция входа в систему Компонент

import React from 'react';

class Signin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: ''
  }
 }



onEmailChange = (event) => {
    this.setState({
      email: event.target.value
    })
  }




onPasswordChange = (event) => {
    this.setState({
      password: event.target.value
    })
  }

  onSubmitSignIn = () => {
    fetch('http://localhost:8080/login', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          password: this.state.password,
          email: this.state.email
        })
      })
      .then(response => response.json())
      .then(user => {
        if (user) {
          this.props.loadUser(user)
          this.props.onRouteChange('home');
        }
      })
  }



 onLinkedinSignIn = () => {
    fetch('http://localhost:8080/auth/linkedin')
    .then(response => response.json())
    .then(user => {
        if (user) {
          this.props.loadUser(user)
          this.props.onRouteChange('home');
        }
      }) 
  }

render() {
   return ( <
    article className = "br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 
  shadow-5 center" >
  <main className = "pa4 black-80" >
  <div className = "measure" >
  <fieldset id = "sign_up"
  className = "ba b--transparent ph0 mh0" >
  <legend className = "f1 fw6 ph0 mh0" > Login < /legend> <
  div className = "mt3" >
  < label className = "db fw6 lh-copy f6"
  htmlFor = "name" > Name < /label> <
  input className = "pa2 input-reset ba bg-transparent hover-bg-black hover- 
   white w-100"
  type = "text"
  name = "email"
  id = "name"


  onChange = {
    this.onEmailChange
  }

  /> </div>



  <div className = "mv3" >
  <label className = "db fw6 lh-copy f6"
  htmlFor = "password" > Password < /label> <
  input className = "b pa2 input-reset ba bg-transparent hover-bg-black 
    hover-white w-100"
  type = "password"
  name = "password"
  id = "password"
  onChange = {
    this.onPasswordChange
  }
  /> </div >
 </fieldset>
   <div className = "" >
  <input onClick = {this.onSubmitSignIn}
   className = "b ph3 pv2 input-reset ba b--black bg-transparent grow 
   pointer f6 dib"
  type = "submit"
  value = "Login" />
  </div> 
  </div> <br/><br/>




     <div className = "" >
      <button onClick={this.onLinkedinSignIn}>
      Linkedin
    </button>
      </div>
      </main> 
      </article >
    );
  }
}

 export default Signin;

onLinkedinSignIn () не дает никакого ответа

В консоли выдается следующая ошибка:

Не удалось загрузить https://www.linkedin.com/uas/oauth/authenticate?oauth_token=77--63c87e5c-9c90-4776-9446-68c5acaa0570: Перенаправление с 'https://www.linkedin.com/uas/oauth/authenticate?oauth_token=77--63c87e5c-9c90-4776-9446-68c5acaa0570'на 'https://www.linkedin.com/uas/oauth/authorize?oauth_token=77--63c87e5c-9c90-4776-9446-68c5acaa0570&state=' заблокирован политикой CORS: в запрошенном заголовке нет Access-Control-Allow-Origin'ресурс.Происхождение 'null', следовательно, не разрешено.Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.linkedin: 1 Uncaught (в обещании) TypeError: Не удалось получить

...