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