Question

大家好，

我正在同时学习Laravel Passport和Vue.JS（独立）。我正在使用Password Grant Token对用户进行身份验证。

我遇到这个问题，secret_key必须始终隐藏。

我的vuejs中有这个Login Component，我需要在其中添加client_secret作为获取访问令牌的参数。但是，由于VUEJS是一个javascript框架。有人可以在缩小的构建文件上看到client_secret。

我的问题是，这很正常吗？有没有办法隐藏client_secret？

起初，我不介意这个问题，因为我已经在laravel上实现了CORS，而我只能选择allowedOrigins。我的想法是，只要我可以过滤allowedOrigins，他们是否知道密钥都不重要。

这是我在VUEJS中的代码

login(){
        this.$validator.validateAll().then((result) => {
          if (result) {
              var data = {
                client_id: 3,
                client_secret: 'client-secret key',
                grant_type: 'password',
                username: this.inputs.email,
                password: this.inputs.password
            }
            this.$http.post("oauth/token", data).then(response => {
                this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now());
                bus.$emit('reload');
                this.$router.push('/');
            })
          }
        });
      }

任何建议将不胜感激。

谢谢。

Answer 1

Laravel Passport具有built in way，可让您通过Javascript应用程序使用自己的API。它提供了一个简单的中间件，您可以将其添加到web的中间件组中（可以在App\Http\Kernel中找到）：

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

Laravel将检查您是否有登录用户（通过标准cookie /会话防护），如果是，它将为您生成JWT并将其存储在cookie中。当您向API发出请求时，它还将检查该cookie的存在并进行验证，以使您不再需要传递访问令牌。

但是要注意的一件事是，您将需要确保继续随请求传递CSRF令牌（假设您已启用CSRF保护）。如果您将Axios与Vue结合使用，则可以通过以下操作确保此操作非常容易：

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
};

使用这种方法，您完全不必担心访问令牌，也无需向客户端公开client_id和secret。

Answer 2

我遇到了同样的问题，找到了一个有趣的解决方案。您可以在后端添加一个自定义终结点，然后从那里发出请求。

您要做的只是：

首先，在api.php文件Route::post('/login', 'AuthController@login');

中创建一条路由

然后，创建与该路由php artisan make:controller AuthController关联的AuthController和登录功能

最后，安装Guzzle，这是HTTP客户端，它将允许您从PHP composer require guzzlehttp/guzzle发出请求，并从登录功能发出请求

public function login(Request $request)
{
    $http = new \GuzzleHttp\Client;

    try {

        $response = $http->post('http://example.test/oauth/token', [
            'form_params' => [
                'grant_type' => 'password',
                'client_id' => 2,
                'client_secret' => 'your_client_secret',
                'username' => $request->username,
                'password' => $request->password,
            ]
        ]);

        return $response->getBody();

    } catch (\GuzzleHttp\Exception\BadResponseException $e) {

        if($e->getCode() == 400)
        {
            return response()->json('Invalid Request, Please enter email or password.', $e->getCode());
        }
        else if($e->getCode() == 401)
        {
            return response()->json('Your credentials are incorrect. Please try again', $e->getCode());
        }

        return response()->json('Something went wrong on the server.', $e->getCode());

    }
}

现在，vue.js前端应用程序Juste需要使用用户名和密码向http://example.test/login发送发布请求，以便在不知道access_token的情况下取回client_secret，因为它是提取到后端。

Here is the video可以对其进行解释并非常好地实施。

还有a presentation关于一些理论，以及检索令牌后如何从vue.js应用存储和发送令牌。

希望这会有所帮助。

Laravel 5.5 Passport client_secret和Vue JS Auth

2 个答案: