Benutzer-login mit Angularjs und Firebase

Ich versuche einen Weg zu finden, erstellen Sie eine einfache login-Formular mit Angularjs und Firebase. Ich habe derzeit ein einfaches Anmeldeformular, das fügt einen Benutzernamen in mein FB-Datenbank. Alles was ich wissen muss ist wie man eine login-Seite, akzeptiert der Benutzer, sobald der userName identifiziert wird, in dem FB-system, und möglicherweise einen callback-Fehler, wenn keine entsprechenden Benutzernamen innerhalb der Datenbank. Dies ist mein signup form:

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

und dies ist mein Zeichen code:

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

Meine login-Formular würde dann ungefähr so Aussehen:

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

Ihr code ist nur indem der Benutzername in der Feuerstellung, es ist nicht wirklich ein Konto erstellen, so dass Sie beheben sollten, bevor Sie tatsächlich anmelden.

InformationsquelleAutor Alex Hughes | 2016-03-04

AngularFire besteht für diese Grund - binden Eckig mit FB.

Hier ist ein funktionierendes Beispiel. Dies ist die login-controller:

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');
      });
    };
  }
]);

- Und dies ist die login.html Datei:

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

Wie funktioniert dieser code validieren-login mit der überprüfung, ob der account in der Datenbank oder nicht?

InformationsquelleAutor mdegges

Ich bin mit angular JS und meine login-Funktion für die FB sieht im controller:

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();
    });
}

InformationsquelleAutor Markus Streicher

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.