はじめに

Laravel Passport は Laravel アプリケーションに OAuth2 サーバの機能を作成できるパッケージです。

本記事では Laravel Passport を使用して、OAuth2を用いた認証機能を作成します。

厳密には OAuth2 は "認可" で用いられる仕組みですが、Laravel の公式ドキュメントより "認証" の用途で使用されているように見受けられましたので、本記事では基本的に "認証" という用語に統一させて頂きます。

OAuth2 とは？

わかりやすく解説されている記事がありますのでそちらをご覧ください。私も記事を見て勉強させて頂きました。

Laravel Passport では、以下の Grant が利用可能ですが、中には非推奨のものも存在します。

Authorization Code Grant
Client Credentials Grant
~~Implicit Grant~~ → 非推奨
~~Password Grant~~ → 非推奨

特に Implicit Grant に関しては、セキュリティ面での問題も指摘されています。

したがって、今回は非推奨とされている Grant は利用せず、最も一般的と思われる Authorization Code Grant を用います。また、認可コード横取り攻撃のリスクを軽減するため、PKCE を用いた方法で作成します。

完成イメージ

以下2つの Laravel プロジェクトを作成して、Authorization Code Grant を用いた認証を実際に試せる環境を構築します。

リソースサーバ兼認証サーバ
クライアントアプリ

リソースサーバ兼認証サーバ

用途

OAuth2 サーバとしての役割を担うために作成する。
また、ユーザ管理の機能も有する想定とする。

画面

画面名	画面イメージ
ログイン画面
マイページ画面（ログイン直後の画面）
ユーザ情報確認画面
ユーザ情報更新画面

ルート

HTTPメソッド	パス	用途
GET	/oauth/authorize	認可コードを発行する
POST	/oauth/token	アクセストークンを発行する
GET	/login	ログイン画面を表示する
GET	/	マイページ画面を表示する
GET	/user/{path?}	ユーザ情報確認／更新画面を表示する
POST	/login	ログイン処理を実行する
GET	/logout	ログアウト処理を実行する
POST	/user	ユーザ情報を更新する
GET	/api/user	ログインユーザ情報を取得する
DELETE	/api/token/{clientId}	発行したトークンを取り消す

クライアントアプリ

用途

リソースサーバ兼認証サーバを用いた認証を行うために作成する。

画面

画面名	画面イメージ
ログインユーザ情報画面 ※ 未認証の場合
ログインユーザ情報画面 ※ 認証済みの場合

ルート

HTTPメソッド	パス	用途
GET	/auth/redirect	OAuth サーバからのコールバック処理を実行する
GET	/auth/callback	OAuth サーバへのリダイレクト処理を実行する
GET	/	ログインユーザ情報画面を表示する
GET	/logout	ログアウト処理を実行する
GET	/api/user	ログインユーザ情報を取得する

技術構成

どちらの Laravel プロジェクトにおいても以下の構成で作成します。

PHP 8.2
Laravel 10.x
Vue.js 3.3
Vue Router 4
TailwindCSS
MySQL 8.0

ただし、認証に用いるパッケージはそれぞれの目的に応じて異なるパッケージを使用します。

プロジェクト名	パッケージ	目的
リソースサーバ兼認証サーバ	Laravel Passport	OAuth2 のサーバ機能を有するため
クライアントアプリ	Laravel Sanctum	SPA認証を行うため

事前準備

以下の Laravel 10.x プロジェクトをそれぞれ新規作成済み
- リソースサーバ兼認証サーバ
- クライアントアプリ
.env にデータベースの接続情報を設定済み

作成手順

非常に長くなってしまったので、記事を分割させて頂きました。

【リソースサーバ兼認証サーバ】
1. Laravel Passport のインストール
 2. Laravel Passport の初期設定
 3. ログイン画面の作成
 4. マイページ画面の作成
 5. ユーザ情報確認／更新画面の作成
 6. ログアウト処理の追加

【クライアントアプリ】
7. トークンのリクエスト処理の追加
 8. Laravel Sanctum の初期設定
 9. ログインユーザ情報表示画面の作成
 10. ログアウト処理の追加

【リソースサーバ兼認証サーバ】
11. Laravel Passport のルート登録
 12. トークン取消 API の作成

まとめ

実際に作成してみると大変でしたが、Laravel Passport があれば OAuth2 サーバを自力で作成できることがわかりました。
当初の希望としては Open ID Connect を用いて認証機能を作成したかったのですが、良い方法を見つけられなかったため、OAuth2 を用いて認証機能を作成しました。
セキュリティ面での問題やその他機能に関するご指摘などがあれば、コメントいただけますと幸いです。

GitHub

完成版のプロジェクトはこちら