在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對象本身。