「Vercel環境でLaravelを動かしました！でも、認証(Middleware)が上手く動作しないんです...。」
はじめに
Vercel環境だとLaravelの認証周りの組み込み、ちょっと複雑でドキュメントも少ないですよね。
今回は、簡易ですが環境変数の設定値を使ったBasic認証を行う方法を紹介しようと思います。
手順、そこまで難しくないです。サクッとできちゃいます。
- Vercel環境でLaravelを動かす方法
- Basic認証実装(Middlewareの実装)
- RoutingにMiddlewareを適用
環境
- Vercel
- Laravel v11
- PHP 8.3
- vercel-php 0.7.3
Vercel環境でLaravelを動かす方法
こちらについては以前記事書いてます。
PHP8.3で動きますのでぜひ。
Basic認証の実装
Basic認証の実装内容については本題ではないので端折ります。
適当ですがこんな感じですかね。
※ サンプルです。エラーハンドリング等割愛してます。
実際のプロジェクトで使うにはご注意ください。
App/Http/Middleware/BasicAuthMiddleware.php
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
class BasicAuthMiddleware
{
public function handle(Request $request, \Closure $next): Response {
// 構成からユーザー名・パスワードを取得.
$user = config('auth.basic.username');
$pass = config('auth.basic.password');
// リクエストヘッダーからBasic認証情報を取得.
$auth = $request->header('Authorization');
$credentials = str_replace('Basic ', '', $auth);
$decoded = base64_decode($credentials, true);
[$inputUser, $inputPass] = explode(':', $decoded, 2);
// 認証チェック.
if ($inputUser === $user && $inputPass === $pass) {
return $next($request);
}
return response('Unauthorized', 401)
->header('WWW-Authenticate', 'Basic realm="Protected Area"')
->header('Cache-Control', 'no-cache, no-store, must-revalidate')
->header('Pragma', 'no-cache')
->header('Expires', '0');
}
あまり本題じゃないので触れるか迷いましたが...。
env()から直接環境変数を読み込むパターンでもいいですが、/config/auth.phpに構成としてセットしたほうがキャッシュされて速度面のケアができるみたいです。
あと、設定的なのはそっちで管理しておいたほうが綺麗な気もします。
RoutingにMiddlewareを適用
1. Middlewareをアプリに読み込ませる
Laravel11からは読み込ませ方が違うみたいですね。
こちらの記事参考にしてみてください。
bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
$middleware->append(App\Http\Middleware\BasicAuthMiddleware::class);
})
3. Routingに設定
// `/`と`/about`にBasic認証を設定
Route::middleware(App\Http\Middleware\BasicAuthMiddleware::class)->group(function () {
Route::get('/', function () {
return view('welcome');
});
Route::get('/about', [AboutController::class, 'index'])->name('about.index');
});
構成についてもリポジトリに載せてますのでよしなにカスタマイズしてみてください。
まとめ
いかがでしたか？
さほどテクニカルなことはやってませんので、すぐにでもできる内容かと思います。
以上、あざしたっ！
補足
Next.js(Vercel環境)でBasic認証をかけたい場合はこちら。