Laravel 5.5 Passport client_secret и Vue JS Auth

Question

Добрый день всем,

Я изучаю Laravel Passport и Vue.JS (автономно) одновременно. Я использую Password Grant Token для аутентификации пользователя.

Я сталкиваюсь с такой проблемой, что secret_key всегда должен быть скрыт.

У меня есть Login Component в моем vuejs, где мне нужно добавить client_secret в качестве параметра для получения токена доступа. Тем не менее, так как VUEJS является структурой JavaScript. есть способ, которым кто-то может увидеть client_secret в минимизированном файле сборки.

У меня такой вопрос, это нормально? Есть ли способ скрыть client_secret?

сначала я не возражаю против этой проблемы, так как я реализовал CORS на laravel, где я могу выбрать только 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

Я столкнулся с той же проблемой и нашел интересное решение. Вы можете добавить пользовательскую конечную точку на сервер и сделать запрос оттуда.

Все, что вам нужно сделать, это:

Сначала создайте маршрут в файле api.php Route::post('/login', 'AuthController@login');

Затем создайте функцию AuthController и функцию входа в систему, связанную с этим маршрутом php artisan make:controller 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 нужно отправить запрос на http://example.test/login с именем пользователя и паролем, чтобы получить обратно access_token, не зная client_secret, так как он абстрагирован от серверной части.

Вот видео , которое объясняет это и реализует его очень хорошо.

И презентация о некоторой теории и о том, как вы можете сохранять и отправлять токен из приложения vue.js после получения токена.

Надеюсь, это поможет.

Answer 2

Laravel Passport имеет встроенный способ , позволяющий вам использовать свой собственный API с приложением Javascript. Он предоставляет простое промежуточное ПО, которое вы можете добавить в свою группу web промежуточного ПО (которое вы найдете в App\Http\Kernel):

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

Laravel проверит, вошел ли пользователь в систему (через стандартный файл cookie / защита сессии), и если это так, он сгенерирует для вас JWT и сохранит его в файле cookie. Он также проверит наличие этого файла cookie и проверит его, когда вы отправляете запросы к своему API, чтобы вам больше не нужно было передавать маркер доступа.

Однако следует отметить, что вам нужно будет убедиться, что вы продолжаете передавать свои токены CSRF вместе с вашими запросами (при условии, что у вас включена защита CSRF). Если вы используете Axios с Vue, вы можете легко убедиться в этом, выполнив следующие действия:

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

При таком подходе вам вообще не нужно беспокоиться о токенах доступа или предоставлять клиенту client_id и secret.