Laravel5.6 PassportでAPI認証を実装

LaravelをSPAやスマホアプリのバックエンドとして使いたい時はAPIを実装することになります。
ログイン機能付きシステムの場合はAPIで認証する必要も出てきます。

LaravelにはAPI認証を実装するためのPassportというパッケージが公式で用意されています。

https://readouble.com/laravel/5.6/ja/passport.html

これを使ったごくシンプルなデモをやってみたのですが、やや詰まったので記事にしておきます。

公式ドキュメント以外では以下の記事を参考にしました。

https://blog.hinaloe.net/2016/09/15/try-passport-laravel-5-3/

http://www.dn-web64.com/archives/web/laravel_passport/

デモ手順

Laravelプロジェクトの環境構築は割愛します。
まず、ログイン機能を生成します。

php artisan make:auth

Passportを導入します。

composer require laravel/passport

自動的にPassport用のマイグレーションファイルが追加されるので、マイグレートします。

php artisan migrate

作成したテーブルにプリセット設定を注入します。

php artisan passport:install

ここでClient IDとClient Secretが表示されるのでClient ID=2のSecretを控えておいて下さい。
後で使用します。

app/User.phpを次のように書き換えます。

use Laravel\Passport\HasApiTokens; // use Illuminate\Support\Facades\Gate;の行の前に追加
use HasApiTokens, Notifiable; // use Notifiable;の行を置換

app/Providers/AuthServiceProvider.phpを次のように書き換えます。

use Laravel\Passport\Passport; // use Illuminate\Support\Facades\Gate;の行の上に追加
Passport::routes(); // $this->registerPolicies();の行の下に追加

config/Auth.phpを次のように書き換えます。

'driver' => 'passport' // 'driver' => 'token'の行を置換

デモ用のユーザを登録します。
ブラウザで/registerページにアクセスします。

各項目を埋めて登録します。
上の例ではパスワードは”password”としました。

以上でLaravelのセットアップは完了しました。
実際にAPIを叩いてみます。
APIの試験にはChrome拡張のRestet Clientを使用しました。

Restlet Client - REST API Testing

Passportにはgrantと呼ばれる認証方式がいくつか用意されているのですが、今回はメールアドレスとパスワードで認証するgrantを使います。

/oauth/tokenにPOSTリクエストするとアクセストークンを取得できるようになっています。
リクエストヘッダーにContent-Type: application/jsonを付与し、JSONは以下の形式で渡します。

{
    "grant_type": "password",
    "client_id": 2,
    "client_secret": <Secret>,
    "username": <メールアドレス>,
    "password": <パスワード>,
    "scope": "*"
}

client_secretは先ほど控えたものを貼り付けます。
grant_typeはpassword、client_idは2として下さい。

こんな感じで渡すと、

レスポンスでアクセストークンが得られます。
このアクセストークンを使い、/api/userを叩いてみます。

/api/userには正しいトークンが渡されているかをチェックするバリデーションがかけられています。

リクエストヘッダーにAccept: application/jsonとAuthorization: Bearer <アクセストークン>を付与してGETリクエストを行います。

これで叩くと、

ユーザ情報が得られました。

今度はアクセストークンをわざと変えてリクエストしてみます。

頭2文字を消してみました。
これで/api/userを叩くと、もちろん正しくないアクセストークンなので、

認証で弾いてくれます。

以上がPassportのデモとなります。

次はGoogleログインやTwitterログインを可能にするSocialiteも試してみたいと思います。