Laravel 护照 : CreateFreshApiToken in App: Authorization Failed

Question

我正在尝试安装 Laravel Passport在 Laravel 5.7.18 上使用 PHP 7.2.13。

我的应用程序使用 JavaScript(Axios 和 Vue)在自身内部使用 API

我在 JavaScript 网络应用程序中收到 401 未授权错误。我有 read the documentation并将 CreateFreshApiToken 添加到网络内核。 laravel_token cookie 实际上是在设置自己。但是，oauth 表在数据库中是干净的。

HTTP/内核:

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

JavaScript:

axios.get("api/users/" + id).then(({ data }) => {
    this.user = data;
});

Auth.php:

'guards' => [
        'web' => [
            'driver'   => 'session',
            'provider' => 'users',
        ],

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

路由(Api.php):

Route::middleware('auth:api')->group(function () {
    Route::resource('users', 'UserController');
    Route::resource('groups', 'GroupController');
    // .. plus more resources
});

Axios 配置:

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

var token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

返回 401 的浏览器 header :

与 postman 的工作要求:

Answer 1

如果您使用用户名和密码进行初始登录，那么假设您正在构建一个有权进行用户/密码登录尝试的第一方应用程序。

It is highly recommended that if you are building a Reactive app using Angular, React.js or Vue.js then an SPA (Single Page Application) approach will yield a much more robust product.

https://en.wikipedia.org/wiki/Single-page_application

---

You should note that with this particular method, if your application makes a static (none ajax request) and thus reloads in the browser, you will loose the auth token. In this case you are not playing host to an app that is by it's very definition an SPA, so if you need to retain the token between static request reloads then you need to store the token in a cookie, I suggest using a cookie rather than localStorage because the availability of localStorage is not 100% guaranteed to be at your disposal in all web browsers.

If your application is on the same domain, you do not need to use Passport. Instead native session cookie auth is perfectly fine, all you have to do is make sure you are passing the CSRF Token for post requests.

---

对于用户/通行证 token 授予，您应该遵循以下准则: https://laravel.com/docs/5.7/passport#password-grant-tokens

根据该指南，当您向 /oauth/token 发出成功请求时，返回的 token 应在您的应用程序中设置为带有 Bearer token 的 Authorization header 。

token 请求响应如下所示:

{
    "token_type": "Bearer",
    "expires_in": 31536000,
    "access_token": "eyJ0eXAiOiJKVJhb...nheKL-fuTlM",
    "refresh_token": "def502008d6313e...94508f1cb"
}

您应该按如下方式请求和处理该 JSON 对象:

axios.post('/oauth/token', {
    grant_type: "password",
    client_id: "1",
    client_secret: "zkI40Y.......KvPNH8",
    username:"email@address.com",
    password:"my-password"
}).then( response => {

    axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.access_token}` 

} );

client_id (id) 和client_secret 的值来自oauth_clients 表，应该已经有一个条目在那里。

如果没有则运行 php artisan passport:client --password

不要忘记您必须配置一些 header ，查看这篇文章有一些关于 Oauth Authorization header 的相关信息: How to send authorization header with axios