facebook - EmberFire Facebook身份验证:authwithOAuthPopup没有任何 react

我一直遵循此tutorial在我的Ember CLI + EmberFire + Firebase应用程序上设置Facebook身份验证。

但是，当我单击“登录”按钮时，没有任何反应。而且它甚至都没有给我错误信息。

我正在使用application.hbs模板作为登录按钮:

<p class="lead button">
  <button {{action "login"}} class="btn btn-default">
    {{fa-icon "facebook"}}
      Sign in with Facebook
  </button>
</p>

然后，我在 Controller 文件夹中创建了application.js，用于在其中放置登录操作:

import Ember from 'ember';
import Firebase from 'firebase';

var ref = new Firebase("https://nutella.firebaseio.com");

export default Ember.Controller.extend({
    actions: {
        login: function() {
                var controller = this;
                controller.get("session").login().then(function(user) {

                }, function() {

                });
        }
    }
});

然后在initializer / emberfire.js中有登录对象:

import Ember from 'ember';


var session = Ember.Object.extend({
    ref : new Firebase("https://nutella.firebaseio.com"),

    addFirebaseCallback: function() {
        var session = this;

        this.get("ref").onAuth(function(authData) {
            if (authData) {
                session.set("isAuthenticated", true);
            } else {
                session.set("isAuthenticated", false);
            }
        });
    }.on("init"),

    login: function() {
        return new Promise(function(resolve, reject) {
            this.get("ref").authWithOAuthPopup("facebook", function(error, user) {
                if (user) {
                    resolve(user);
                } else {
                    reject(error);
                }
            });
        });
    },

    currentUser: function() {
        return this.get("ref").getAuth();
    }.property("isAuthenticated")
});


export default {
    name: "Session",

    initialize: function (container, app) {
        app.register("session:main", session);
        app.inject("controller", "session", "session:main");
        app.inject("route", "session", "session:main");
    }
};

有什么事吗

最佳答案

您对this的使用无效，因为使用Promise()时上下文已更改。将您的登录功能更改为此:

login: function() {
    var _this = this; // cache for usage in Promise
    return new Promise(function(resolve, reject) {
        _this.get("ref").authWithOAuthPopup("facebook", function(error, user) {
            if (user) {
                resolve(user);
            } else {
                reject(error);
            }
        });
    });
},

另外，您可以使用ES6箭头函数语法(=>)，因此对this的使用将保持有效，如下所示:

login: function() {
    return new Promise((resolve, reject) => {
        this.get("ref").authWithOAuthPopup("facebook", function(error, user) {
            if (user) {
                resolve(user);
            } else {
                reject(error);
            }
        });
    });
},

您可以在此处了解有关箭头功能的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions