vuejs2 - 如何使用 Laravel Passport 和客户端凭据使用自己的 api？

Question

我已经为具有个人访问 token 的用户正确设置了它，但想保护所有 api 路由。阅读文档听起来像 Client Credentials Grant Tokens是我需要的。我的 .env 中有一个 Client ID 和 Client Secret文件;我添加了 client中间件使用 \Laravel\Passport\Http\Middleware\CheckClientCredentials::class并将其应用于某些 api 路由。

我正在使用 Vue 和 axios。

如何获取和设置访问这些 protected api 路由所需的 token ？

Answer 1

Laravel 文档对“使用自己的 API”并不清楚。我也用谷歌搜索了几天，甚至订阅了 Laracasts。没有帮助。我现在开始工作了，这是我笔记中的转储。

第 1 步 - 安装 Passport

composer require laravel/passport
php artisan migrate
php artisan passport:install

第 2 步 - 编辑/app/User.php

use HasApiTokens,Notifiable

第 3 步 - 编辑/app/Providers/AuthServiceProvider.php

use Laravel\Passport\Passport;

public function boot()
{
    $this->registerPolicies();
    Passport::routes();
}

第 4 步 - 编辑/config/auth.php

enter code     'api' => [
    'driver' => 'passport',
    'provider' => 'users',
],

第 5 步 - 前端快速入门

php artisan vendor:publish --tag=passport-components

第 6 步 - 编辑/resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#app'
});

步骤 7 - 身份验证路由和 View 脚手架

php artisan make:auth

第 8 步 - 编辑/app/Http/Kernel.php

 protected $middlewareGroups = [
        'web' => [
            ...
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,

第 9 步 - 编辑/routes/web.php(这会回答您的问题)

// Authorization routes Laravel Passport
Auth::routes();

// Landing page
Route::get('/', function () { return view('welcome');});

// Auth protected routes
Route::group(['middleware' => ['web', 'auth']], function () {
    Route::get('home', 'HomeController@index')->name('home');
    Route::get('example', function(){ return view('example'); });
}
//(stolen from /vendor/laravel/passport/src/RouteRegistrar.php - forAuthorization method)

第 10 步 - 编译 Assets

npm i -g npm
npm install
npm run dev

第 11 步 - 什么都没有。您不必在 VueJS 和 Axios 方面做任何事情。

你可以这样做:

axios.get('URL_XYZ')
.then(response => {
    console.log(response.data);
});

Laravel 文档:

When using this method of authentication, the default Laravel JavaScript scaffolding instructs Axios to always send the X-CSRF-TOKEN and X-Requested-With headers.

资料来源:
https://laravel.com/docs/5.5/passport
https://www.itechempires.com/2017/09/laravel-5-5-api-user-authentication-passport-package/