2017-02-02 9 views
3

Я пытаюсь внедрить логин OAUTH через Facebook в моем приложении Nodejs/Angular/Express/Passport, но я боюсь с ним.CORS - Facebook - Паспорт

я все еще получаю ошибку CORS:

XMLHttpRequest заблокированный политикой CORS: 'Access-Control-Allow-Origin:' Нет заголовка присутствует на запрошенный ресурс. Origin 'https://www.xxxxxx.net', следовательно, не допускается.

Хотя я уже добавил к моему EXPRESS роутера:

router.all('/*', function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 

    if ('OPTIONS' === req.method) { 
     res.send(200); 
    } 
    else { 
     next(); 
    } 
}); 

В консоли разработчика я могу видеть, что заголовок для "OAuth/Facebook" GET вызова добавляет «Access-Control-Allow-Origin ' и так далее.

В обратном вызове нет «Access-Control-Allow-Origin» и т. Д. - это правильно?

router.get('/oauth/facebook/',passport.authenticate('facebook',{ 
     failureRedirect: '/info', 
     scope:['email'] 
    })); 

router.get('/oauth/facebook/callback/', passport.authenticate('facebook',{ 
     failureRedirect: '/info', 
     successRedirect: '/', 
     scope:['email'] 
    }), 
    function(req,res){ 
    if(req.user){ 
     return res.json({token: req.user.generateJWT()}); 
    } else { 
     return res.status(400).json({message:"Not found"}); 
    } 
}); 
+0

Я думаю, что токены доступа отправляются через заголовок 'Authorization'; поэтому вы также должны предоставить его в заголовках: 'res.header ('Access-Control-Allow-Headers', 'Authorization, Content-Type');' Обычно для успешного запроса всегда учитывайте следующие заголовки: 'res. заголовок ('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept'); ' – dNitro

+0

Спасибо за ваш ответ - но все та же ошибка:/ – fdddk23

+0

Вы не можете загрузить диалоговое окно входа FB через AJAX. Вы должны вызвать его непосредственно в экземпляре верхнего окна (по той очевидной причине, что пользователи должны иметь возможность проверять через адресную строку, что они действительно входят в систему Facebook, а не на фишинговом сайте.) – CBroe

ответ

3

У меня было несколько неудач в этой установке, которые приводят к этой неудаче.

Прежде всего, вам нужно позвонить по ссылке "/ OAuth/facebook /" с HREF:

<a href="/oauth/facebook/" class="btn btn-primary"><span class="fa fa-facebook"></span> Login with Facebook</a> 

Это гарантирует, что не угловые ручки этот запрос.

Он называет этот маршрут на стороне сервера: router.get ('/ OAuth/Facebook /', passport.authenticate ('Facebook', { failureRedirect: '!/#/Дома', объем: [ 'email'] }));

Какие обратные вызовы:

router.get('/oauth/facebook/callback/', passport.authenticate('facebook',{ 
     failureRedirect: '/#!/info', 
     scope:['email'] 
    }), 
    function(req,res){ 
    if(req.user){ 
     return res.redirect(303, '/#!/fb/' +req.user.generateJWT()); 
    } else { 
     return res.status(400).json({message:"Not found"}); 
    } 
}); 

В моем случае я также должен вернуть токен для входа в систему: Вы должны обрабатывать ответ на свой собственный и перенаправить вызов собственный «ФБ» Маршрут на угловой стороне , который просто в основном берет мой ключ аутентификации в Angular и вводит пользователя в систему.

+0

Как вы можете обрабатывать ответ «по своему усмотрению» на интерфейсе? – Matt

2

Крест-Origin Resource Sharing (CORS) механизм дает веб-серверы управления доступом между доменами, которые позволяют безопасную передачу данных между доменами.

index.js: (сервер)

const cors = require('cors'); 
.. 
.. 
app.use(cors()); 

для получения дополнительной информации об использовании CORS: npm cors