我应该如何构建 Firebase 身份验证密码重置流程?

How should I structure Firebase auth password reset flow?

我在我的 Ionic 应用程序中为 registering/logging-in 用户使用 Firebase authentication 解决方案。我正在努力寻找如何最好地实施我的 'password reset flow'.

目前,当用户忘记密码时,流程开始如下:

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

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

我在我的 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 方法不仅需要电子邮件和新密码,还需要旧密码.这对我来说似乎是多余的,因为用户只是输入了他们的旧(临时)密码才能到达此屏幕。这是来自我的 authServicechangePassword

function changePassword(email, oldPassword, newPassword) {
    auth.$changePassword({
        email: email,
        oldPassword: oldPassword,
        newPassword: newPassword
    }).then(function() {
        $location.path('/people');
    }).catch(function(error) {
        alert(error);
    });
}

我总是可以强制用户再次输入他们的临时密码,或者我可以将这个临时密码设置为 $rootScope,但我觉得必须有一个更简洁的选项。有什么想法吗?

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

$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';
  }
};