Laravel5.7:API認証のPassportを使ってみる

Laravel

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

laravel
「laravel」の記事一覧です。

はじめに

APIの開発で認証をどのようにしようかと悩んだ時にLaravelでPassportというのがあるらしいので、少し調べながらまとめて行きたいと思います。

API認証(Passport) 5.7 Laravel

環境:

OS : macOS High Sierra 10.13.6

MAMP : 5.1

Laravel : 5.7.6

Laraveのプロジェクトを作成する

詳細な内容は「Laravel開発:1.環境構築をMAMPを使用して作成する」に記載しているので、こちら参考にして下さい。

・sampleという名でプロジェクトを作成します。

$ composer create-project laravel/laravel --prefer-dist sample

・VirtualHostの設定

MAMPを利用している場合は MAMP/con/apache/extra/httpd-vhosts.conf を編集します。

・DBの設定

phpMyAdminから今回のプロジェクト用に「sample」という名でdatabaseを作成します。

・.envの設定

以下の値を変更して下さい。

APP_URL=http://localhost:8888
DB_PORT=8889
DB_DATABASE=sample
DB_USERNAME=root
DB_PASSWORD=root

この時点で http://localhost:8888/ を表示するとLaravelの画面が表示されます。

Pasportをセットアップする

ここからは公式ドキュメントに沿って進めていきます。

インストール

まずは、Passportをインストールします。

composer require laravel/passport

インストールが終わるとPassportのマイグレーションファイルがが作成されているので、マイグレーションを実行してテーブルを作成します。

php artisan migrate

次にアクセストークンの生成に必要な暗号キーを作成します。次のコマンドで「パーソナルアクセス」と「パスワードグラント」のクライアントが生成されるようです。

php artisan passport:install

実行すると以下のような結果が表示されます。

$ 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

クライアントが2つ作成されているので、Client Secretは保存して置きます。

App\UserモデルにHasApiTokensを追加します

<?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を追加

App\Providers\AuthServiceProvider.phpPassport:rootesメソッドの呼出しを追加します。

アクセストークンの発行、失効、クライアントとパーソナルアクセスの管理するrouteを登録するようです。

namespace App\Providers;use Laravel\Passport\Passport;    // 追加use Illuminate\Support\Facades\Gate;use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;class AuthServiceProvider extends ServiceProvider{    protected $policies = [        'App\Model' => 'App\Policies\ModelPolicy',    ];    public function boot()    {        $this->registerPolicies();        Passport::routes();    // 追加    }}

最後に、config\auth.php の設定を変更してapiの認証をpassportに変更します。

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

    'api' => [
        'driver' => 'passport',   // 変更
        'provider' => 'users',
    ],
],

フロントエンド

ユーザがログインしてトークンを発行することを想定して、簡単に発行できるテンプレートが用意されているようです。

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

まずはコンポーネントを用意します。

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

resources/js/components/passportに3つのファイルが作成されます。

こちらを/resources/js/app.jsに登録してVueJSから利用できるようにします。

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

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

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue').default
);
// ↑↑↑↑追加
const app = new Vue({
    el: '#app'
});

次にnpm run devを実行します。

npm run dev

※ 自分の環境ではエラー(sh: cross-env: command not found)になりましたので、cross-envを追加します。追加後にキャッシュをクリアして再インストールします。

npm install --save-dev cross-env
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

再度、実行します。

npm run dev

ユーザ認証を追加してTokenの発行を試してみる

Laravelの認証機能を追加します。

php artisan make:auth

ログイン後のHome画面(resources/views/home.blade.php)で先程のコンポーネントを追加します。

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <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

実際にユーザを登録してHome画面を表示するとトークンが発行できるようになっています。

次は、APIの実装部分に入っていきたいと思います。

追記 2019/1/12

・一部誤字を修正
・Vue.componentの登録で、.default を追加

Note: バージョン5.7.19以前のLaravelでは、コンポーネントを登録する時にコンソールエラーが出る時に、.defaultを追加します。この変更については、Laravel Mix v4.0.0リリースノートで説明がなされています。

https://readouble.com/laravel/5.7/ja/passport.html#personal-access-tokens

コメント

  1. […] こちらの内容はブログにも投稿しています。 […]