Question

我正在尝试使用 passport-local 和 passport-linkedin 在MERN堆栈中创建Outh，然后再创建react版本，我使用正在运行的ejs在Express MVC中创建了完美，但是当我切换为 具有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'),
    );

在Express MVC的情况下，所有路由均正常工作，但在响应中，所有身份验证路由都在提供json，但在“ / auth / linkedin”情况下，则没有响应

登录react组件

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;

在LinkedInSignIn（） 上没有给出任何答复

在控制台中出现以下错误：

无法加载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'标头请求的资源。因此，不允许访问原始“空”。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。 linkedin：1未捕获（承诺）TypeError：无法获取

无法在Express中的React组件中发送JSON

0 个答案: