Question

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

以下是每个

的相应代码

actions.js

var Reflux = require('reflux');

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

store.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();
            })
        );
    }
};

facebook.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直接向'/ auth / facebook'发送get到服务器并让服务器处理请求并返回用户对象是正确的方法。如果是那么这会出错？如果不是那么通过反应实现相同的正确方法是什么？

Answer 1

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

从反应组件

1 个答案: