Laravel 5.4でAPI認証(Passport)を使った「/oauth/clients」で新クライアントを作成できないです。。

###前提・実現したいこと
Laravel5.4にてAPI認証(Passport)で「/oauth/clients」(Post)にてクライアントを作成しました。

###発生している問題・エラーメッセージ

app.js:29
POST http://localhost:8000/oauth/clients 401 (Unauthorized)

send @app.js:29
ajax @app.js:29
(anonymous)	@VM716:1

###該当のソースコード

$.ajax({
       url: 'http://localhost:8000/oauth/clients',
       type: 'POST',
  headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content'),
            'content-type':'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
    },
data:'{"name":"taro","redirect":"http://localhost:8000"}',
        success: function(response){ console.log(response.data); },
        error: function(req, err){ console.log(err);}
    });

###試したこと
「php artisan passport:client」でクライアントの作成はできるが、APIからのクライアント作成ができないです。
また、クライアントがある状態でのトークンの作成「/oauth/token」はできています。
そのため、passportのインストールはできていると思います。

###補足情報(言語/FW/ツール等のバージョンなど)
chromeのコンソールで、Ajaxを実行しています。

3日ほどかけて調査してますが、原因がわからず、どなたかご教示いただきたく思っています。。

行動規範の内容に同意します

回答2件

ベストアンサー

Laravel 5.4 API認証(Passport)
ドキュメントの内容を一通りやってみた所、/oauth/clientsを叩くには、まずユーザーがログイン認証している状態でないと401エラーになります。

開発検証を行う手順としては、

Laravel Passportを導入
php artisan make:auth でログイン画面のスキャフォールドを作成し、ユーザー登録とユーザーログインを行う
その後に/oauth/clientsをvendor:publishで作成されるVueの管理画面で検証

動作が確認できて出来ていない状態でjQueryで頑張るよりも、用意されたVueコンポーネントから理解するほうが早いと思います。

以下の記事なども参考にしてください
LARAVEL 5.3 で PASSPORTを試す
 API認証(Passport)機能の動作確認

検証に利用したPassportのvueコンポーネントを使うbladeテンプレート

※ app.jsとapp.cssはLaravel mixにて作成されるので、ドキュメントのフロントエンド・クイックスタートの導入後npm run devで事前にビルドしておいてください

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Document</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>

<div id="app">
    <passport-clients></passport-clients>
    <passport-authorized-clients></passport-authorized-clients>
    <passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</body>
</html>

authのミドルウェアを外したclient登録のルート定義の参考例
RouteServiceProvider.php

public function map()
{
    $this->mapApiRoutes();

    $this->mapWebRoutes();
    #Laravel\Passport\RouteRegistrarより prefixをoauth_no_loginに変更
    Route::group(['prefix' => 'oauth_no_login', 'namespace' => 'Laravel\Passport\Http\Controllers','middleware' => ['web']], function ($router) {
        $router->get('/clients', [
            'uses' => 'ClientController@forUser',
        ]);

        $router->post('/clients', [
            'uses' => 'ClientController@store',
        ]);

        $router->put('/clients/{client_id}', [
            'uses' => 'ClientController@update',
        ]);

        $router->delete('/clients/{client_id}', [
            'uses' => 'ClientController@destroy',
        ]);
    });
}

投稿2017/07/29 23:36

編集2017/08/05 05:24

aro10

総合スコア4106

tora_tanabata

2017/08/05 05:05

Vueコンポーネントで動きをみれました。ログインしないと使えないようでした。ログインしないで、アカウント登録をしたかったのですが、LaravelのデフォルトのAPIでは用意されていないのでしょうか。

aro10

2017/08/05 05:27

Passport::routes();で登録されるルート定義はauthがついているので、回答にauthのミドルウェアを外したoauth/clientAPIの追加ルート定義の参考例を追加してみました。詳しくはAuthServiceProviderで登録するPassport::routes();の中身である、Laravel\Passport\PassportやLaravel\Passport\RouteRegistrarなどのクラスを確認してみてください

tora_tanabata

2017/08/06 07:08

ありがとうございます！試してみます！！

行動規範の内容に同意します

最初はLaravelが用意してるものを使ったほうがいいです。
まずフロントエンド・クイックスタートで作られるVueコンポーネントで問題なく動くか確認。
https://readouble.com/laravel/5.4/ja/passport.html#frontend-quickstart
自分で作りたければClients.vueを参考に作る。

jQueryではなくaxiosならcsrf部分を自分で設定する必要はなくなります。

投稿2017/07/28 05:12