Question

我正在使用Firebase authentication解决方案在我的Ionic应用中注册/登录用户。我正在努力如何最好地实现我的'密码重置流'。

目前，当用户忘记密码时，流程如下所示：

HTML：

<p class="forgot-text" ng-click="login.resetPassword()" ng-show="login.email">Forgot password?</p>

控制器：

vm.resetPassword = function() {
    authService.resetPassword(vm.email);
};

authService：

function resetPassword(email) {
    auth.$resetPassword({
        email: email
    }).then(function() {
        $location.path('/intro');
    }).catch(function(error) {
        alert(error);
    });
}

由于上述原因，用户会收到一封带有临时密码的电子邮件。值得庆幸的是，当用户登录时，isTemporaryPassword对象上有一个authData字段。

我在authService中利用了这一点：

function loginUser(email, password) {
    auth.$authWithPassword({
        email: email,
        password: password
    }).then(function(authData) {
        if (authData.password.isTemporaryPassword) {
            $location.path('/reset');
        } else {
            $location.path('/people');
        }
    }).catch(function(error) {
        alert(error);
    });
}

这是我的问题出现的地方。当用户到达/reset时，我希望他们只能输入两次新密码（第二次输入以进行确认），但Firebase $changePassword方法不仅包含电子邮件和新密码，还包含旧密码。这对我来说似乎是多余的，因为用户只需输入旧的（临时）密码即可到达此屏幕。这是我changePassword的{{1}}：

authService

我总是可以强迫用户再次输入他们的临时密码，或者我可以将此临时密码设置为function changePassword(email, oldPassword, newPassword) { auth.$changePassword({ email: email, oldPassword: oldPassword, newPassword: newPassword }).then(function() { $location.path('/people'); }).catch(function(error) { alert(error); }); }，但我觉得必须有更清洁的选项。有什么想法吗？

Answer 1

我能够以非常简单的方式解决这个问题。我将$location.path authService函数中的$resetPassword行更改为以下内容：

$location.path('/reset');

然后我将reset-password.html更新为以下内容：

<ion-view view-title="Reset Password" class="login-background">

<div class="signup-form">

<div class="list list-inset signup">
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Email</span>
    <input type="text" placeholder="name@example.com" ng-model="reset.email">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Temporary Password</span>
    <input type="password" ng-model="reset.tempPassword">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">New Password</span>
    <input type="password" ng-model="reset.newPassword">
  </label>
  <label class="item item-input">
    <span class="input-label" style="text-align:right">Confirm</span>
    <input type="password" ng-model="reset.confirmedPassword">
  </label>
</div>

<button class="button button-balanced" ng-click="reset.changePassword()">Update Password</button>

<p class="mismatch" ng-show="reset.mismatch">{{ reset.mismatchMessage }}</p>

最后，我的控制器中的changePassword函数如下所示：

vm.changePassword = function() {
  vm.mismatch = false;

  if (vm.newPassword === vm.confirmedPassword) {
    authService.changePassword(vm.email, vm.tempPassword, vm.newPassword);
  } else {
    vm.mismatch = true;
    vm.mismatchMessage = 'Password and confirmation must match';
  }
};

我应该如何构建Firebase auth密码重置流程？

1 个答案: