EmberFire аутентификация facebook: ничего не происходит с authwithOAuthPopup

Question

Я слежу за этим tutorial, чтобы настроить аутентификацию Facebook на моем Ember CLI + EmberFire + Firebase.

Однако ничего не происходит, когда я нажимаю кнопку входа в систему. И это даже не дает мне сообщение об ошибке.

Я использую 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() { 

       }); 
     } 
    } 
}); 

Затем я войти в объект инициализатора/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); 
      } 
     }); 
    }); 
}, 

Вы можете узнать больше о arrow функции здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions