从反应组件调用passport js函数的正确方法

Question

您好，我是 React 和 Nodejs 的新手。目前我正在尝试在 react 中创建一个登录组件，其中包含一个按钮，应用程序可以通过该按钮通过 Facebook 对用户进行身份验证。我正在使用passport.js 进行身份验证。我还使用回流来处理对节点服务器的任何 api 调用。

以下是每个的相应代码

动作.js

var Reflux = require('reflux');

module.exports = Reflux.createActions([
    "facebookLogin"
]);

商店.js

var Reflux = require('reflux');
var Actions = require('../actions');
var Api = require('../utils/api');

module.exports = Reflux.createStore({
    listenables: [Actions],

    facebookLogin: function(email) {
        Api.FBrequest(email)
            .then(function(response){
                console.log('returned user for facebook from server : ' + response);
            }.bind(this));
    }
});

api.js

module.exports = {
    FBrequest: function() {
        return (
            fetch('/auth/facebook', {
                method: 'get'
            }).then(function(response){
                return response.json();
            })
        );
    }
};    

脸书.js

// file at server for handling passport authentication calls
module.exports = function(app, passport){

    // call to facebook for authenticating user
    // in response to this call, facebook will reply in /auth/facebook/callback with the user object
    app.get('/auth/facebook', passport.authenticate('facebook', {scope:'email'}));

    // TODO return error on failure of login instead of navigating to the login route
    app.get('/auth/facebook/callback', passport.authenticate('facebook',
        {failureRedirect: '/login'}), function(req, res){
            // user successfully authenticated by facebook
            // return the user object
            return req.user;
        });
};

当我单击应用程序上的 fbLogin 按钮时，出现以下错误

Fetch API cannot load https://www.facebook.com/v2.2/dialog/oauth?response_type=code&redirect_uri=…3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=1807765906116990. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我想知道使用 fetch 直接将 get 发送到“/auth/facebook”的服务器并让服务器处理请求并返回用户对象是正确的方法。如果是，那么这是哪里出了问题？如果不是，那么通过反应实现相同的正确方法是什么？

Answer 1

对于像我今晚一样偶然发现这个问题的任何人 - 我们通过将登录按钮包装在 a href 标签中解决了这个错误 - 然后将用户带到我们的授权路线。用户获得授权后，Facebook 会将用户返回给我们。然后，每次安装我们的组件时，我们都会确保状态已安装我们的登录用户。如果没有，我们通过 axios 向传回用户对象的路由发出 get 请求，并适当地设置我们的状态。