我是一个Ember新手(使用ember-cli)并开始在应用程序上工作,我有一个登录对话框,触发登录对话框,成功登录到Facebook但在控制台中点击了#34; Uncaught ReferenceError:未定义checkLoginState"。
我正在使用facebook sdk代码的初始化程序: 应用程序/初始化/ Facebook的sdk.js
/* global FB */
export function initialize(application){
application.deferReadiness();
};
export default {
name: 'facebook-sdk',
initialize: function(){
var fbAsyncInit = function() {
FB.init({
appId: 'XXX',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version: 'v2.7'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = fbAsyncInit;
}
和我的登录按钮:app / templates / components / login-form.hbs
<button {{action 'authenticateWithFacebook'}} class="btn btn-primary" data-auto-logout-link="true" style="cursor: pointer;" > Login</button>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" data-auto-logout-link="true"> Connect with Facebook
我的组件文件夹中的所有操作代码:app / components / login-form.js
/* global FB */
import Ember from 'ember';
const{ inject: {service}, Component} = Ember;
export default Component.extend({
session: service('session'),
torii: service(),
actions: {
authenticateWithFacebook() {
FB.login(function(response){
console.log(response);
});
},
checkLoginState() {
FB.login(function(response){
console.log(response);
});
},
authenticates() {
let { identification, password } = this.getProperties('identification', 'password');
return this.get('session').authenticate('authenticator:devise', identification, password).catch((reason) => {
this.set('errorMessage', reason.error || reason);
alert("Hey! I tried, but I don't know how to authenticate.");
});
}
}
});
触发authenticateWithFacebook操作的第一个按钮运行正常(甚至显示其状态响应==已连接及其包含的所有内容,例如控制台中的accessToken,expiresIn ..等)。只有当我点击第二个按钮时才会出现错误。因此我假设SDK需要在调用操作之前先加载。如果是这样的话,我不确定是否应该将SDK代码和FB登录方法分开,或者将它们全部放在同一个文件夹中。
非常感谢任何帮助或澄清。或者让我知道我是否需要添加更多代码以使其更清晰。谢谢。