Я пытаюсь создать 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: Не удалось получить