facebook - EmberFire facebook 身份验证 : nothing happens with authwithOAuthPopup

Question

我一直在关注这个tutorial在我的 Ember CLI + EmberFire + Firebase 应用程序上设置 Facebook 身份验证。

但是，当我单击登录按钮时，没有任何 react 。它甚至没有给我一条错误消息。

我正在为我的登录按钮使用 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() {

                });
        }
    }
});

然后我在初始化程序/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");
    }
};

有什么问题？

Answer 1

您对 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