こんにちは。トビログ管理人のとびうおです！
この記事ではLaravel10でパッケージ等を使わずに、オリジナルのログイン画面を作成する方法を解説していきます。
ログイン機能でいうと、laravel uiやbreezeでも実装可能ですが、
実はlaravel単体でも簡単に作れます！
laravelのauthを使用する
主にこちらを参考に、作っていきます。
まず、ログインするための画面には
- 登録画面
- ログイン画面
- ユーザー画面
- ログアウト画面(ボタン)
が必要になってきます。
なので、まずは登録画面から作成していきましょう！
Laravel10で登録画面を作成する
登録画面を作成していくには
- controllerの作成
- viewの作成
- postするためにcontrollerにメソッドを追加
ことが必要です。
まず、controllerの作成からやっていきましょう！
なお、Laravel10では
UserモデルとUsersテーブルはすでに作成済みでした。
そのため、今回はその工程を飛ばします。
UserControllerを作成する
まずは、UserControllerを作成していきます。
./vendor/bin/sail php artisan make:controller UserControllerと打ち、UserControllerを作成します。
このように表示されればOKです。
UserControllerにviewを返す関数を追加する
そうしたら、UserControllerにviewを返す関数を追加しましょう。
public function showRegister()
{
return view('register');
}
viewを作成していく
続いて、registerのviewを作成していきましょう。
viewの中身
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登録画面</title>
</head>
<body>
<h1>登録画面</h1>
<form action="" method="post">
@csrf
<label for="name">名前</label>
<input type="text" name="name" id="name">
<label for="email">メールアドレス</label>
<input type="email" name="email" id="email">
<label for="password">パスワード</label>
<input type="password" name="password" id="password">
<button type="submit">送信</button>
</form>
</body>
</html>
routeに追加する
そうしたら、routeにこのviewが返ってくるurlを追加しましょう。
web.php上に、
Route::get('/register',[\App\Http\Controllers\UserController::class,'showRegister']);と追加します。
/registerにアクセスをしてみる
その上で、/registerにアクセスをしてみましょう。
そうすると、次のような画面が表示されます。
送信ボタンの先を作る前にmigrateをしよう！
ここまでこれたら、userを実際に登録&認証ができるようなcontrollerを作成していきます。
また、ついでに登録完了後に誰としてログインしているかがわかるprofile画面も作成していきましょう！
なおこれをする前に、migrateを済ませておきましょう。(でないと↓のようなエラーがでます)
./vendor/bin/sail php artisan migrateと入力し、
ちゃんとmigrateされるかをみましょう(事前にしている場合は INFO Nothing to migrate.とでます)
送信先を作る
では、送信先のcontrollerの関数を作成します。
これが今回一番大事です！
public function register(Request $request)
{
$user = User::query()->create([
'name'=>$request['name'],
'email'=>$request['email'],
'password'=>Hash::make($request['password'])
]);
Auth::login($user);
return redirect()->route('profile');
}
行っているのは
- Userをcreateメソッドで作成する
- Authを使って、createしたユーザーとしてログインをする
- profileにリダイレクトしてあげる
の3つです。
なおこの2の時に、パスワードをHash化させて保存するということも覚えておいてくださいね！
このHash化は大事なセキュリティ要素で、
これをしておかないとdbが漏洩した際に
パスワードが漏れてしまいます！
profileに飛ばす関数を作成する
この間にサクッとprifileに飛ばす関数をcontrollerにつくり、 viewも作っちゃいましょう！
↓をuserControllerに作成
public function profile()
{
return view('profile');
}↓がprifileのview(profile.blade.php として作成しています)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{\Illuminate\Support\Facades\Auth::user()->name}}でログインしています。
</body>
</html>
routeに追加する
ここまでできたら、routeに追加していきましょう！
web.phpに以下のコードを追加する。
Route::post('/register',[\App\Http\Controllers\UserController::class,'register']);
Route::middleware('auth')->group(function (){
Route::get('/profile',[\App\Http\Controllers\UserController::class,'profile'])->name('profile');
});
middlewareのauthを使って、
ログインしているユーザーのみが
profile画面を見れるようにしているよ！
registerしてみよう！
実際に登録ができるようになります！
ログアウト機能を作成しよう！
では続いて、ログインの前のログアウト機能を実装していきましょう。
まずは、ログアウトするための関数をUserControllerに追加していきます。
ログアウト機能をUserControllerに追加
簡単にログアウト機能をUserControllerに作成していきます。
public function logout()
{
Auth::logout();
return redirect('/');
}とてもシンプルな実装で、
- Authを使ってログアウトさせる
- redirectでトップに戻す
という処理をしています。
ルートに追加する
そして、これをルートに追加していきます。
Route::post('logout',[\App\Http\Controllers\UserController::class,'logout'])->name('user.logout');
middlewareの中に入れておくかはどちらでもいいと思いますが、
個人的には入れておくことをお勧めします！
ボタンをviewに設置する
そうしたら、ボタンをviewに追加しましょう。
profile.blade.phpに追加します！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{\Illuminate\Support\Facades\Auth::user()->name}}でログインしています。
<form action="{{route('user.logout')}}" method="post">
@csrf
<button>ログアウト</button>
</form>
</body>
</html>
実際にログアウトしてみる
そうすると、実際にログアウトすることができます。
ログイン画面を作成する
そうしたら、ようやくここでログイン画面の作成に着手していきます。
ログインをするviewを返す関数をcontrollerに追加
ではまず、ログインをするviewを返す関数をcontrollerに追加していきましょう！
UserControllerに↓の関数を追加していきます
public function showLogin()
{
return view('login');
}ログイン用のviewを追加
そしたら、続いて、ログイン用のviewファイルを作成していきます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ログイン画面</title>
</head>
<body>
<h1>ログイン画面</h1>
<form action="" method="post">
@csrf
<label for="email">メールアドレス</label>
<input type="email" name="email" id="email">
<label for="password">パスワード</label>
<input type="password" name="password" id="password">
<button type="submit">送信</button>
</form>
</body>
</html>ルートに追加
ここまできたら、web.phpに↑の画面を表示するようにしましょう！
Route::get('/login',[\App\Http\Controllers\UserController::class,'showLogin']);そうすると、http://0.0.0.0/loginにアクセスすると、以下の画面が表示されるようになります。
ボタンを押した後のメソッドをUserControllerに作成する
UserControllerに以下の関数を追加していきます。
public function login(Request $request)
{
$credentials = $request->validate([
'email' => ['required', 'email'],
'password' => ['required'],
]);
if (Auth::attempt($credentials)) {
$request->session()->regenerate();
return redirect()->intended('profile');
}
return back();
}ルートに追加する
その後、web.phpに先ほどの関数に飛ばすものを追加します。
Route::post('/login',[\App\Http\Controllers\UserController::class,'login']);実際にログインをしてみる
ログアウトしている状態で、ログインをしてみましょう。
ログインに失敗すると、back()関数で元の画面に戻ります。
2回目では正しいメールアドレスとパスワードを入力しているので、無事ログインができました！
ログインしていない状態で/profileを見にいくと…
ログインしていない状態で、/profileを見にいくと、
というエラーが表示されてしまいます。
これは、route nameのloginがないからなので、ここで、loginをする画面を表示しているrouteに追加します。
Route::get('/login',[\App\Http\Controllers\UserController::class,'showLogin'])->name('login');と書きます。
そうすると、
ログインしてない状態で、/profileにアクセスするとログイン画面に飛ぶようになります！
最後の仕上げ
最後の仕上げとして、welcomeページにログインとユーザー登録に飛べるようなリンクを設置しましょう！
web.phpのregisterの画面に飛ばすところを以下のようにします。
Route::get('/register',[\App\Http\Controllers\UserController::class,'showRegister'])->name('register');そうすると、laravel10はなんとloginとregister画面が表示されるのでした。
laravel 10すごい…
まとめ
Laravel10で自力でログイン機能を作成してみました！！！
少し難し目だったかもしれませんが、今までに比べてだいぶ簡単に作れるようになっているなぁと感じます！！
Laravel10でほかの方法でログインさせる方法も多く書いているので、そちらが気になる方は↓をチェックしてみてください！！
laravelの他の記事
トビログでは他にも多くのLaravelの記事を公開しています！
気になる方は見てみてください！
swimaneというアプリをリリースしました！
コメント