用户注册时如何检查是否存在电子邮件地址(Angularjs和Firebase)

时间:2013-12-03 13:06:20

标签: angularjs angularjs-directive firebase angularfire

我目前正在开发一个使用firebase和angularjs的项目,我希望我的应用程序检查每次用户尝试创建帐户时是否已存在电子邮件。

这里是HTML标记:

<div class="well text-center">
  <h1 class="text-info"><i class="fa fa-group socio_icon"></i></h1>
    <h1>Blog title</h1>
    <p class="lead">Slogan goes here</p>

    <form name="signup_form" novalidate autocomplete="off">
        <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.fullnames.$dirty && signup_form.fullnames.$invalid , 'has-success': signup_form.fullnames.$valid}">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" placeholder="Enter full names" name="fullnames" ng-model="signup.form" ng-minlength=5 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.fullnames.$dirty && signup_form.fullnames.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.fullnames.$dirty && signup_form.fullnames.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>
            </p>

          <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.email.$dirty && signup_form.email.$invalid , 'has-success': signup_form.email.$valid}">
                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                <input type="email" class="form-control" placeholder="Enter email address" name="email" ng-model="signup.email" ng-minlength=5 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.email.$dirty && signup_form.email.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.email.$dirty && signup_form.email.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
            </p>

          <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.password1.$dirty && signup_form.password1.$invalid , 'has-success': signup_form.password1.$valid}">
                <span class="input-group-addon"><i class="fa fa-lock"></i></i></span>
                <input type="password" class="form-control" placeholder="Enter password" name="password1" ng-model="password1" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" ng-minlength=6 ng-maxlength=45 required />
                <span class="input-group-addon valid" ng-show="signup_form.password1.$dirty && signup_form.password1.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.password1.$dirty && signup_form.password1.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>

            </p>

            <p>
          <div class="input-group input-group-lg" ng-class="{'has-error': signup_form.password2.$dirty && signup_form.password2.$invalid , 'has-success': signup_form.password2.$valid}">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" id="password2" name="password2" ng-model="password2" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required placeholder="Re-enter password"/>
                <span class="input-group-addon valid" ng-show="signup_form.password2.$dirty && signup_form.password2.$valid"><i class="fa fa-check-circle text-success"></i></span>
                <span class="input-group-addon valid" ng-show="signup_form.password2.$dirty && signup_form.password2.$invalid"><i class="fa fa-exclamation-circle text-warning"></i></span>
          </div>

      </p>
      <p>
        <button type="submit" ng-disabled="signup_form.$invalid" class="btn btn-primary btn-lg btn-block">Singup and enjoy!
        </button>
      </p>
    </form>
</div>

并且js看起来像这样:

'use strict';

angular.module('myApp')
  .controller('MainCtrl', function ($scope) {

    var ref = new Firebase('https://myfirebase.firebaseio.com/');


  });

1 个答案:

答案 0 :(得分:4)

检查Firebase中记录是否存在的典型方法是使用索引。由于firebase不是references中的某些字符,因此您需要先转发电子邮件。

由于这是一个常见问题,我有gist showing how to do this

原谅双关语的“要点”是,您需要在创建用户时创建索引,然后检查该索引:

var fb = new Firebase(URL);

function isDuplicateEmail(email, callback) {
  fb.child('email_index/'+escapeEmail(email)).once('value', function(snap) {
     callback( snap.val() !== null );
  });
}

function updateUser(user_id, email) {
   fb.child('user/'+user_id).set({email: email});
   fb.child('email_index/'+escapeEmail(email)).set(user_id);
}

function escapeEmail(email) {
  return (email || '').replace('.', ',');
}