EmberFire facebook 身份验证:authwithOAuthPopup 没有任何反应
EmberFire facebook authentication: nothing happens with authwithOAuthPopup
我一直在关注此 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>
然后我在我的控制器文件夹中创建了 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
我一直在关注此 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>
然后我在我的控制器文件夹中创建了 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