人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

Laravel6 に jwt-auth をインストールしSPAからログインする(バックエンド Laravel編)

● Laravel6 に jwt-auth をインストールする

composer require tymon/jwt-auth:1.0.0-rc.5

● 設定ファイルを生成

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

/config/jwt.php が生成されます

● シークレットの作成

php artisan jwt:secret
jwt-auth secret [gci1Fmy188jqcB2tW80kfbHFnB28ypBgkA81vM1pCGEjZaIE8RI5FkpsAjZmc4An] set successfully.

.envファイルの最後に

JWT_SECRET=gci1Fmy188jqcB2tW80kfbHFnB28ypBgkA81vM1pCGEjZaIE8RI5FkpsAjZmc4An

が作成されます。

● Userモデルに「implements JWTSubject」しインターフェースを追加する

use Tymon\JWTAuth\Contracts\JWTSubject;
class User extends Authenticatable implements JWTSubject

インターフェースとして追加するので、次の2つのメソッドがないとエラーとなります。

getJWTIdentifier
getJWTCustomClaims

● Userモデルにメソッドを追加する

    public function getJWTIdentifier()
    {
        // JWT トークンに保存する ID を返す
        return $this->getKey();
    }

    public function getJWTCustomClaims()
    {
        // JWT トークンに埋め込む追加の情報を返す
        return [];
    }

引用: http://bit.ly/39N5OFB

● api の 認証ドライバを jwt にする

config/auth.php

        'api' => [
            // 'driver'   => 'token',
            'driver'   => 'jwt',
            'provider' => 'users',
            'hash'     => false,
        ],

● ルーター routes/api.php に4つのルートを追加する

https://jwt-auth.readthedocs.io/en/develop/quick-start/

routes/api.php

// jwt-auth
Route::group(['middleware' => 'api', 'prefix' => 'auth'], function ($router) {
    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');
});

● Authコントローラーを作成

php artisan make:controller AuthController

app/Http/Controllers/AuthController.php が作成されます。

次の内容で保存します


<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    /**
     * Create a new AuthController instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->guard = "api"; // 追加
    }

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    {
        $credentials = request(['email', 'password']);

        if (!$token = auth($this->guard)->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }
        return $this->respondWithToken($token);
    }

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->json(auth($this->guard)->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth($this->guard)->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth($this->guard)->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth($this->guard)->factory()->getTTL() * 60, // 変更
        ]);
    }
}

なお、公式サイトでは

auth()

となっているのを

 ↓

auth($this->guard)

に変更しています。

● 1. ログインしてみる

postmanから

1. Headersを

email : <メールアドレス>
password : <パスワード>

2. Paramsを

Accept : application/json

https://<あなたのサーバ>/api/auth/login

へPOST送信すると、次のように戻ってきます。

{
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvand0YXV0aC5udW1kLm1lXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTgxNzY2MzI0LCJleHAiOjE1ODE3Njk5MjQsIm5iZiI6MTU4MTc2NjMyNCwianRpIjoiSXROMjRMUnduU3k4dlA5UCIsInN1YiI6MSwicHJ2IjoiODdlMGFmMWVmOWZkMTU4MTJmZGVjOTcxNTNhMTRlMGIwNDc1NDZhYSJ9.IVWsI-OM0hWWAlp5NYE6tAIk_tk_IoCl91jwnD1OVE4",
    "token_type": "bearer",
    "expires_in": 3600
}

これでログイン成功時にアクセストークンが取得できました。

● 2. 取得したアクセストークンを使って自分の情報を取得する

1. Headersを

Authorization : Bearer <アクセストークン>

https://<あなたのサーバ>/api/auth/me

へPOST送信すると、次のように戻ってきます。

{
    "id": 1,
    "name": "<ユーザー名>",
    "email": "<メールアドレス>",
    "email_verified_at": null,
    "created_at": "2020-02-15 15:23:16",
    "updated_at": "2020-02-15 15:23:16"
}

● 3. 取得したアクセストークンをリフレッシュ(再発行)する

1. Headersを

Authorization : Bearer <アクセストークン>

https://<あなたのサーバ>/api/auth/refresh

へPOST送信すると、次のように戻ってきます。

{
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvand0YXV0aC5udW1kLm1lXC9hcGlcL2F1dGhcL3JlZnJlc2giLCJpYXQiOjE1ODE3Njc3MzksImV4cCI6MTU4MTc3MTM5NCwibmJmIjoxNTgxNzY3Nzk0LCJqdGkiOiJmSDRDdDhCdm5ETUdzbVEwIiwic3ViIjoxLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.GXx89GJLIC3X-Yr5YpiHOQGqqk0EyDnVshHkvvYdQ_4",
    "token_type": "bearer",
    "expires_in": 3600
}

● 4. 取得したアクセストークンをログアウトさせる

(ログアウトすると、そのトークンは使用できなくなります。 = ログアウトする )

1. Headersを

Authorization : Bearer <アクセストークン>

https://<あなたのサーバ>/api/auth/logout

へPOST送信すると、次のように戻ってきます。

{
    "message": "Successfully logged out"
}

● Laravel で CORS に対応する

Laravel で CORS に対応する|プログラムメモ

No.1703
02/16 22:35

edit