使用Angularjs和Firebase登錄用戶

Question

我試圖找到一種使用Angularjs和Firebase創建簡單登錄表單的方法。 我目前有一個簡單的注冊表單，該表單將userName添加到我的Firebase數據庫中。 我需要知道的是，一旦在Firebase系統中標識了userName，如何獲得一個接受用戶的登錄頁面，如果數據庫中沒有這樣的userName，可能會產生回調錯誤。 這是我的注冊表格：

<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>

Answer 1

出於這個原因，存在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>

Answer 2

我使用的是angular 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();
    });
}

使用Angularjs和Firebase登錄用戶

問題描述

2 個解決方案

解決方案1
5 2016-03-04 17:50:06

解決方案2
1 2016-03-04 15:10:06

使用Angularjs和Firebase登錄用戶

問題描述

2 個解決方案

解決方案1 5 2016-03-04 17:50:06

解決方案2 1 2016-03-04 15:10:06

解決方案1
5 2016-03-04 17:50:06

解決方案2
1 2016-03-04 15:10:06