用戶用Angularjs和Firebase登錄

-1

我想找到一種方法來用Angularjs和Firebase創建一個簡單的登錄表單。我目前有一個簡單的註冊表單，它將一個userName添加到我的firebase數據庫中。我需要知道的只是如何在firebase系統中標識userName後獲取接受用戶的登錄頁面，並且如果數據庫中沒有此類userName，可能會發生回調錯誤。這是我的註冊表格：用戶用Angularjs和Firebase登錄

<html ng-app="myApp"> 
<body ng-controller="userCtrl"> 
    <div class="centerForm"> 

     <form> 
      <div class="form-group"> 
      <label for="exampleInputUser">Username</label> 
      <input type="username" ng-model="userName" class="form-control" id="exampleInputUser" placeholder="username"> 
      </div> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" ng-model="userPassword" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
      <table class="nav" align="center"> 
      <tr> 
       <td> 
        <p><button type="submit" class="btn btn-primary" ng-click="saveUser()">Submit</button> 
        <a href="#" class="btn btn-info" role="button">Sign Up</a></p> 
       </td> 
      </tr>  
      </table> 
     </form> 

    </div> 
</body> 
</html>

，這是我的註冊代碼：

<script> 
      angular.module('myApp', []) 
      .controller('userCtrl', function($scope) { 
       $scope.userName =""; 
       $scope.userPassword=""; 

       $scope.myData = new Firebase("https://myfirebaseapp.firebaseio.com/") 

       $scope.saveUser = function() { 
        $scope.myData.push({userName: $scope.userName}); 
       }; 

       }); 





    </script>

我的登錄表單，然後會看起來像：

<html ng-app="myApp"> 
<body ng-controller="userCtrl"> 
    <div class="centerForm"> 

     <form> 
      <div class="form-group"> 
      <label for="exampleInputUser1">Username</label> 
      <input type="username" ng-model="userName" class="form-control" id="exampleInputUser1" placeholder="username"> 
      </div> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" ng-model="userPassword" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
      <table class="nav" align="center"> 
      <tr> 
       <td> 
        <p><button type="submit" class="btn btn-primary" ng-click="loginUser()">Submit</button> 
        <a href="#" class="btn btn-info" role="button">Sign Up</a></p> 
       </td> 
      </tr>  
      </table> 
     </form> 

    </div> 
</body> 
</html>

來源

2016-03-04 Alex Hughes

你的代碼只把用戶名的火力點，它實際上沒有創建一個帳戶，所以你應該在您實際登錄前先修復此問題。 –

我使用的角度JS而我在Firebase中的登錄功能如下所示：

app.factory("Auth", ["$firebaseAuth",function($firebaseAuth) { 
var ref = new Firebase("https://myfirebaseapp.firebaseio.com"); 
return $firebaseAuth(ref); 
}]); 

$scope.login = function() { 
    $scope.authObj.$authWithPassword({ 
     name: $scope.data.name, 
     email: $scope.data.email, 
     password: $scope.data.password 
    }).then(function(authData) { 
     authenticated = true; 
     console.log("Logged in as:", authData.uid, authenticated); 
     $location.path("profile"); 
     check(); 
    }).catch(function(error) { 
     authenticated = false; 
     console.error("Authentication failed:", error); 
     check(); 
    }); 
}

來源

2016-03-04 15:10:06

AngularFire存在此原因 - 將Angular與Firebase綁定。

下面是一個工作示例。這是登錄控制器：

var app = angular.module('appName'); 

app.factory("Auth", ["$firebaseAuth", 
    function($firebaseAuth) { 
    var ref = new Firebase("https://yourtester.firebaseio.com"); 
    return $firebaseAuth(ref); 
    } 
]); 

app.controller('loginCtrl', ['$scope', '$state', '$http', 'Auth', 
    function($scope, $state, $http, Auth) { 
    $scope.auth = Auth; 
    $scope.auth.$onAuth(function(authData) { 
     $scope.authData = authData; 
    }); 
    $scope.login = function() { 
     Auth.$authWithPassword({ 
     email: $scope.email, 
     password: $scope.password 
     }) 
     .then(function(authData) { 
     console.log('Logged in as:', authData.uid); 
     //$state.go('profile'); 
     }) 
     .catch(function(err) { 
     console.log('error:',err); 
     //$state.go('login'); 
     }); 
    }; 
    } 
]);

這是login.html的文件：

<body ng-app='appName' ng-controller="loginCtrl"> 
    <h1>Login!</h1> 
    <form ng-submit='login()'> 
     <div class="form-group"> 
     <label for="email">Email address</label> 
     <input id="email" ng-model='email' type="email" placeholder="Email" required> 
     </div> 
     <div class="form-group"> 
     <label for="password">Password</label> 
     <input id="password" ng-model='password' type="password" placeholder="Password" required> 
     </div> 
     <button class="btn btn-success">Login</button> 
    </form>

來源

2016-03-04 17:50:06 mdegges

此代碼如何通過檢查賬戶是否在數據庫中來驗證任何登錄？ – Ufomammut

用戶用Angularjs和Firebase登錄

回答

相關問題