Laravel開発：API認証のPassportを使ってみる

[こちらの内容はブログにも投稿しています。](https://ksysnote.com/php/laravel-passport/)

Laravelについてはこちらにまとめていこうと思います。

https://ksysnote.com/tag/laravel/
<h3>はじめに</h3>
APIの開発で認証をどのようにしようかと悩んだ時にLaravelでPassportというのがあるらしいので、少し調べながらまとめて行きたいと思います。

https://readouble.com/laravel/5.7/ja/passport.html
<h4>環境：</h4>
OS : macOS High Sierra 10.13.6

MAMP : 5.1

Laravel : 5.7.6
<h3>Laraveのプロジェクトを作成する</h3>
詳細な内容は「<a href="https://ksysnote.com/php/laravel-mamp-setup/">Laravel開発：１．環境構築をMAMPを使用して作成する</a>」に記載しているので、こちら参考にして下さい。

<span class="marker">・sample</span>という名でプロジェクトを作成します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ composer create-project laravel/laravel --prefer-dist sample</pre>
・VirtualHostの設定

MAMPを利用している場合は <span class="marker">MAMP/con/apache/extra/httpd-vhosts.conf</span> を編集します。

・DBの設定

phpMyAdminから今回のプロジェクト用に「<span class="marker">sample</span>」という名でdatabaseを作成します。

・.envの設定

以下の値を変更して下さい。
<pre class="EnlighterJSRAW" data-enlighter-language="null">APP_URL=http://localhost:8888
DB_PORT=8889
DB_DATABASE=sample
DB_USERNAME=root
DB_PASSWORD=root</pre>
この時点で <span class="marker">http://localhost:8888/</span> を表示するとLaravelの画面が表示されます。
<h3>Pasportをセットアップする</h3>
ここからは<a href="https://readouble.com/laravel/5.7/ja/passport.html#installation">公式ドキュメント</a>に沿って進めていきます。
<h4>インストール</h4>
まずは、Passportをインストールします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">composer require laravel/passport</pre>
インストールが終わるとPassportのマイグレーションファイルがが作成されているので、マイグレーションを実行してテーブルを作成します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">php artisan migrate</pre>
次にアクセストークンの生成に必要な暗号キーを作成します。次のコマンドで「パーソナルアクセス」と「パスワードグラント」のクライアントが生成されるようです。
<pre class="EnlighterJSRAW" data-enlighter-language="null">php artisan passport:install</pre>
実行すると以下のような結果が表示されます。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ php artisan passport:install
Encryption keys generated successfully.
Personal access client created successfully.
Client ID: 1
Client Secret: Z59H8xw3RCrRRcUnyxy6TccAKrsNgrceEwpqcGmN
Password grant client created successfully.
Client ID: 2
Client Secret: E2Ug4jn1pmBJVCRSkN3SSUaIB1nl5x8MGkNEfkso</pre>
クライアントが2つ作成されているので、Client Secretは保存して置きます。

<span class="marker">App\User</span>モデルに<span class="marker">HasApiTokens</span>を追加します
<pre class="EnlighterJSRAW" data-enlighter-language="null">&lt;?php

namespace App;

use Laravel\Passport\HasApiTokens; // 追加
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable; // HashApiTokensを追加</pre>
<span class="marker">App\Providers\AuthServiceProvider.php</span> に <span class="marker">Passport:rootes</span>メソッドの呼出しを追加します。

アクセストークンの発行、失効、クライアントとパーソナルアクセスの管理するrouteを登録するようです。
<pre class="EnlighterJSRAW" data-enlighter-language="null">public function boot()
{
    $this-&gt;registerPolicies();

    //
    Passport::routes(); // bootメソッドに追加
}</pre>
最後に、<span class="marker">config\auth.php</span> の設定を変更してapiの認証をpassportに変更します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">'guards' =&gt; [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',   // 変更
        'provider' => 'users',
    ],
],</pre>
<h3>フロントエンド</h3>
ユーザがログインしてトークンを発行することを想定して、簡単に発行できるテンプレートが用意されているようです。

こちらはVueJSのコンポーネントで利用できるようです。

まずはコンポーネントを用意します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">php artisan vendor:publish --tag=passport-components</pre>
<span class="marker">resources/js/components/passport</span>に3つのファイルが作成されます。

こちらを<span class="marker">/resources/js/app.js</span>に登録してVueJSから利用できるようにします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">// ↓↓↓↓追加
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'
});</pre>
次に<span class="marker">npm run dev</span>を実行します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">npm run dev</pre>
※ 自分の環境ではエラー（sh: cross-env: command not found）になりましたので、cross-envを追加します。追加後にキャッシュをクリアして再インストールします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">npm install --save-dev cross-env
rm -rf node/modules
rm package-lock.json
npm cache clear --force
npm install</pre>
再度、実行します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">npm run dev</pre>
<h3>ユーザ認証を追加してTokenの発行を試してみる</h3>
Laravelの認証機能を追加します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">php artisan make:auth</pre>
ログイン後のHome画面(<span class="marker">resources/views/home.blade.php</span>)で先程のコンポーネントを追加します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">@extends('layouts.app')

@section('content')
&lt;div class="container"&gt;
    &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;div class="card"&gt;
                &lt;div class="card-header"&gt;Dashboard&lt;/div&gt;

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    {{--↓↓↓↓ 追加--}}
                    <passport-clients></passport-clients>
                    <passport-authorized-clients></passport-authorized-clients>
                    <passport-personal-access-tokens></passport-personal-access-tokens>
                    {{--↑↑↑↑ 追加--}}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection</pre>
実際にユーザを登録してHome画面を表示するとトークンが発行できるようになっています。
<p id="yRSZCub"><img class="alignnone size-full wp-image-171 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bd97c3c3e1d5.png" alt="" /></p>
次は、APIの実装部分に入っていきたいと思います。