Laravel 5.1/AngularJS：在 Angular 视图中重置密码（如何验证 CSRF 令牌？）

Question

我设法调整了默认的 Laravel 身份验证，以便它可以作为我的 AngularJS 的 API，到目前为止一切正常。可以转到 /reset 并输入一封电子邮件，然后会收到一封包含密码重置 link 的电子邮件，该电子邮件会转到 /reset/{token} ，如果您没有收到任何验证错误，您的密码将成功更改。

唯一的问题是，因为我使用的是 Angular 视图，所以在显示 reset-password 状态之前，实际上没有任何东西可以验证令牌并确保它不仅仅是乱码。我尝试将其添加到控制器的顶部：

    if ($stateParams.token != $cookies.get('XSRF_TOKEN')) {
        $state.go('reset');
    }

...这基本上可以查看令牌是否是当前的 CSRF 令牌，但这不起作用，因为当发送密码重置 link 时，CSRF 令牌已更改或其他...它不再是会话中的令牌。

有人知道我该怎么做吗？如果在“/reset/:token”上的 url 中输入的令牌无效，我只想重定向用户。

这是我的代码..

App.js:

        .state('reset', {
            url: '/reset',
            data: {
                permissions: {
                    except: ['isLoggedIn'],
                    redirectTo: 'user.dashboard'
                }
            },
            templateUrl: 'views/auth/forgot-password.html',
            controller: 'ForgotPasswordController as forgot'
        })
        .state('reset-password', {
            url: '/reset/:token',
            data: {
                permissions: {
                    except: ['isLoggedIn'],
                    redirectTo: 'user.dashboard'
                }
            },
            templateUrl: 'views/auth/reset-password.html',
            controller: 'ResetPasswordController as reset'
        })

这是 ResetsPassword.php 中的 ResetsPassword 特征。大多数已经设置好了，但我 removed/changed 作为 API:

有很多工作要做

     /**
     * Send a reset link to the given user.
     */
    public function postEmail(EmailRequest $request)
    {
        $response = Password::sendResetLink($request->only('email'), function (Message $message) {
            $message->subject($this->getEmailSubject());
        });

        switch ($response) {
            case Password::RESET_LINK_SENT:
                return;

            case Password::INVALID_USER:
                return response()->json([
                    'denied' => 'We couldn\'t find your account with that information.'
                ], 404);
        }
    }

    /**
     * Get the e-mail subject line to be used for the reset link email.
     */
    protected function getEmailSubject()
    {
        return property_exists($this, 'subject') ? $this->subject : 'Your Password Reset Link';
    }

    /**
     * Reset the given user's password.
     */
    public function postReset(ResetRequest $request)
    {
        $credentials = $request->only(
            'password', 'password_confirmation', 'token'
        );

        $response = Password::reset($credentials, function ($user, $password) {
            $this->resetPassword($user, $password);
        });

        switch ($response) {
            case Password::PASSWORD_RESET:
                return;

            default:
                return response()->json([
                    'error' => [
                        'message' => 'Could not reset password'
                    ]
                ], 400);
        }
    }

    /**
     * Reset the given user's password.
     */
    protected function resetPassword($user, $password)
    {
        $user->password = bcrypt($password);

        $user->save();
    }

Answer 1

想通了。

对于遇到类似问题的任何人...这是我解决它的方法（以后可能会变得更好，但现在它有效）。

我为 API 添加了另一个 url，它是 reset/password，它需要一个 GET 请求。我根据 $stateParams 值将令牌传递给它，如果 password_resets table 中不存在该令牌，或者如果该令牌确实存在且已过期，则 return 一些错误.在控制器中，我通过重定向处理错误。我再次认为这不是理想的，因为任何查看源代码的人都可以更改它并删除重定向，所以我必须找到更好的方法来实现它。

不过，现在它仍然有效并且仍然是一个解决方案。

ResetsPasswords.php（为get请求添加了一个方法）：

public function verifyToken(Request $request)
    {
        $user = DB::table('password_resets')->where('token', $request->only('token'))->first();

        if ($user) {
            if ($user->created_at > Carbon::now()->subHours(2)) {
                return response()->json([
                    'success' => [
                        'message' => 'Token is valid and not expired.'
                    ]
                ], 200);
            } else {
                return response()->json([
                    'error' => [
                        'message' => 'Token is valid but it\'s expired.'
                    ]
                ], 401);
            }
        } else {
            return response()->json([
                'error' => [
                    'message' => 'Token is invalid.'
                ]
            ], 401);
        }
    }

在我的 resetPasswordController.js 中，我只是检查响应 returns 'success' 或任何 'error' 响应，以及它是否是 'error'响应我会做类似 $state.go('reset') 的操作，这会将他们重定向回 "forgot password" 表单，他们在其中输入电子邮件以获取重置密码 link.

编辑：

我认为在控制器中检查有效令牌很糟糕，因为它总是至少会在一瞬间加载视图。我一直在寻找某种中间件，但后来我忘记了我已经在使用 angular-permission 包，它有点像前端中间件。

我定义了一个角色 isTokenValid 并将其设置为自动调用我拥有的 authService 中的一个函数，并根据令牌的有效性从我的 API 获得响应。如果成功，角色允许用户进入状态。否则它重定向到 reset 状态。这可以防止视图在瞬间显示。行为与 Laravel 中间件非常相似。

唯一的问题是因为它发生在前端，任何黑客都可以绕过它，但这没关系，因为服务器端代码仍然存在，所以即使他们访问视图，他们也无法使用密码做任何事情输入导致令牌仍然无效并且必须匹配特定用户。

另一个改进是找到一种即使没有前端中间件实现也不允许视图的方法。如果我找到办法，也许我会再次更新。

实施

角色：

        .defineRole('isTokenValid', function(stateParams) {
            var token = stateParams.token;
            var deferred = $q.defer();

            authService.verifyToken(token)
                .then(function(res) {
                    if (res.success) {
                        deferred.resolve();
                    }
                }, function(res) {
                    if (res.error) {
                        deferred.reject();
                    }
                });

            return deferred.promise;
        });

和状态：

            .state('reset-password', {
                url: '/reset/:token',
                data: {
                    permissions: {
                        only: ['isTokenValid'],
                        redirectTo: 'reset'
                    }
                },
                templateUrl: 'views/auth/reset-password.html',
                controller: 'ResetPasswordController as reset'
            })

希望对遇到同样问题的人有所帮助。

Laravel 5.1/AngularJS：在 Angular 视图中重置密码（如何验证 CSRF 令牌？）

Laravel 5.1/AngularJS: Reset password in Angular view (how to validate CSRF token?)

php

csrf

laravel

angularjs

laravel-5