はじめに
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
完成版のプロジェクトはこちら