在Ember.js应用程序中实现Firebase simpleLogin电子邮件和密码

Question

我一直在试图弄清楚如何在我的ember.js应用程序中从这个blog post和这个source code正确实现firebase的simpleLogin无济于事。

博客文章示例使用github作为身份验证提供程序，但我需要使用电子邮件&密码选项。我迄今为止成功地将用户添加到了有问题的Firebase的注册用户，并且可以吐出一个user.id和user.email，但我无法与用户一起登录，因为它没有将用户添加到Firebase用户/路径。

AuthController.js

App.AuthController = Ember.Controller.extend({ 
    authed: false, 
    currentUser: null, 

    init: function() { 
     this.authClient = new FirebaseSimpleLogin(dbRef, function(error, user) { 
      if (error) { 
       alert('Authentication failed: ' + error); 
      } else if (user) { 
       this.set('authed', true); 
       var userRef = new Firebase(usersPath + '/simplelogin:' + user.id); 
       var controller = this; 
       var properties = { 
        id: user.id, 
        email: user.email 
       }; 
       userRef.once('value', function(snapshot) { 
        var user = App.User.create({ ref: userRef }); 
        user.setProperties(properties); 
        controller.set('currentUser', user); 
       }); 
      } else { 
       this.set('authed', false); 
      } 
     }.bind(this)); 
    }, 

    login: function() { 
     this.authClient.login('password', { 
      email: this.get("email"), 
      password: this.get("password"), 
      rememberMe: this.get("remember") 
     }); 
    }, 

    logout: function() { 
     this.authClient.logout(); 
    }, 

    createUser: function() { 
     var email = createEmail.value; 
     var password = createPassword.value; 
     this.authClient.createUser(email, password, function(error, user) { 
      if (!error) { 
       console.log('User Id: ' + user.id + ', Email: ' + user.email); 
      } 
     } 
    )} 
}); 

创建用户模板

<form {{action createUser on='submit'}} class="form-horizontal" role='form'> 
    <div class='form-group'> 
     <label class="col-sm-5 control-label" for='createEmail'><p class='lead'>What's your email?</p></label> 
     <div class="col-sm-7"> 
      {{input type="email" classNames="form-control" value=createEmail id="createEmail" placeholder="Don't worry, we won't spam you..."}} 
     </div> 
    </div> 
    <div class='form-group'> 
     <label class="col-sm-5 control-label" for='createPassword'><p class='lead'>Choose a password...</p></label> 
     <div class="col-sm-7"> 
      {{input type="password" classNames="form-control" value=createPassword id="createPassword" placeholder="Make it super hard to guess!"}} 
     </div> 
    </div> 
    <div class='form-group'> 
     <label class="col-sm-5 control-label" for='confirm'><p class='lead'>And confirm it</p></label> 
     <div class="col-sm-7"> 
      {{input type="password" classNames="form-control" value=confirm id="confirm" placeholder="Make sure you know what you typed..."}} 
     </div> 
    </div> 
    <button type='submit'>Submit</button> 
</form> 

只要让我知道如果你需要看到更多的我的代码，我会在这里把它起来。谢谢！

@ kingpin2k你有什么想法吗？由@麦克 - 普格提供

答：

我AuthController现在看起来是这样的：

App.AuthController = Ember.Controller.extend({ 
    authed: false, 
    currentUser: null, 

    init: function() { 
    this.authClient = new FirebaseSimpleLogin(dbRef, function(error, user) { 
     if (error) { 
     alert('Authentication failed: ' + error); 
     } else if (user) { 
     this.set('authed', true); 
     var userRef = new Firebase(usersPath + '/simplelogin:' + user.id); 
     var controller = this; 
     var properties = { 
      id: user.id, 
      email: user.email 
     }; 
     userRef.once('value', function(snapshot) { 
      var data = snapshot.val(); 
      var user = App.User.create({ ref: data}); 
      user.setProperties(properties); 
      controller.set('currentUser', user); 
     }); 
     } else { 
     this.set('authed', false); 
     } 
    }.bind(this)); 
    }, 

    login: function() { 
     console.log('made it inside login'); 
     console.log(email.value);  
     console.log(password.value); 
     console.log(remember.value); 
     this.authClient.login('password', { 
      email: email.value, 
      password: password.value, 
      rememberMe: remember.value 
     }); 
    }, 

    logout: function() { 
     this.authClient.logout(); 
    }, 

    createUser: function() { 
     console.log('made it inside createUser'); 
     var email = createEmail.value; 
     console.log(email); 
     var password = createPassword.value; 
     console.log(password); 
     this.authClient.createUser(email, password, function(error, user) { 
      if (!error) { 
       console.log('User Id: ' + user.id + ', Email: ' + user.email); 
       var userRef = new Firebase(usersPath + '/simplelogin:' + user.id); 
       userRef.set({ 
        email: user.email, 
        id: user.id 
       }); 
      } 
     } 
    )} 
}); 

我还必须添加一个空的usermodel：

App.User = EmberFire.Object.extend({ 

}); 

这它！！现在我可以进行身份​​验证，然后提取当前用户数据。

Answer 1

Firebase简单登录功能不会将用户添加到您伪造的用户/路径中。它将用户存储在某个系统定义的区域中。如果您想在用户/路径中存储关于用户的数据，那么您需要创建该信息。

例如：

createUser: function() { 
     var that = this; 
     var email = createEmail.value; 
     var password = createPassword.value; 
     this.authClient.createUser(email, password, function(error, user) { 
      if (!error) { 
       console.log('User Id: ' + user.id + ', Email: ' + user.email); 
       var userRef = new Firebase(usersPath + '/simplelogin:' + user.id); 
       userRef.set({email: user.email}); // This is where you'd add Display Name, phone #, whatever 

       that.authClient.login('password', email, password); 
      } 
     } 
    )} 

您的登录代码似乎能正确调用火力地堡简单登录代码，在用户登录时会触发你在构造函数中指定的回调。在该回调，我想你会想改变你的userRef.once（）方法：

userRef.once('value', function(snapshot) { 
        var data = snapshot.val(); 
        var user = App.User.create({ ref: data}); 
        user.setProperties(properties); 
        controller.set('currentUser', user); 
       }); 

的一次（）成功回调为您提供在该路径的数据的快照，所以你要绑定到该信息而不是仅仅是Firebase引用的userRef对象本身。