Laravel10で自分オリジナルのログイン画面を作成する

こんにちは。トビログ管理人のとびうおです!

この記事ではLaravel10でパッケージ等を使わずに、オリジナルのログイン画面を作成する方法を解説していきます。

とびうおくん
とびうおくん

ログイン機能でいうと、laravel uiやbreezeでも実装可能ですが、

実はlaravel単体でも簡単に作れます!

WEBアプリケーションポートフォリオの作り方:トビログ
学生・初心者でも簡単! LaravelとXserverで自分のアプリケーションを月額500円で作成しよう! Laravel 10とXserverのVPSを用いて学生でも簡単にWebアプリケーションポートフォリオを作成できるようになります。 Laravelの使い方から、Xserverでのデプロイまでを初心者でも簡単にわか...

laravelのauthを使用する

10.x 認証 Laravel

主にこちらを参考に、作っていきます。

まず、ログインするための画面には

  • 登録画面
  • ログイン画面
  • ユーザー画面
  • ログアウト画面(ボタン)

が必要になってきます。

なので、まずは登録画面から作成していきましょう!

Laravel10で登録画面を作成する

登録画面を作成していくには

  1. controllerの作成
  2. viewの作成
  3. postするためにcontrollerにメソッドを追加

ことが必要です。

まず、controllerの作成からやっていきましょう!

とびうおくん
とびうおくん

なお、Laravel10では
UserモデルとUsersテーブルはすでに作成済みでした。

そのため、今回はその工程を飛ばします。

UserControllerを作成する

まずは、UserControllerを作成していきます。

./vendor/bin/sail php artisan make:controller UserController

と打ち、UserControllerを作成します。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

このように表示されればOKです。

UserControllerにviewを返す関数を追加する

そうしたら、UserControllerにviewを返す関数を追加しましょう。

public function showRegister()
   {
       return view('register');
   }
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

viewを作成していく

続いて、registerのviewを作成していきましょう。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

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>
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

routeに追加する

そうしたら、routeにこのviewが返ってくるurlを追加しましょう。

web.php上に、

Route::get('/register',[\App\Http\Controllers\UserController::class,'showRegister']);

と追加します。

/registerにアクセスをしてみる

その上で、/registerにアクセスをしてみましょう。

そうすると、次のような画面が表示されます。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

送信ボタンの先を作る前にmigrateをしよう!

ここまでこれたら、userを実際に登録&認証ができるようなcontrollerを作成していきます。

また、ついでに登録完了後に誰としてログインしているかがわかるprofile画面も作成していきましょう!

なおこれをする前に、migrateを済ませておきましょう。(でないと↓のようなエラーがでます)

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する
 ./vendor/bin/sail php artisan migrate

と入力し、

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

ちゃんと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');
   }
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

行っているのは

  1. Userをcreateメソッドで作成する
  2. Authを使って、createしたユーザーとしてログインをする
  3. 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('/');
   }

とてもシンプルな実装で、

  1. Authを使ってログアウトさせる
  2. redirectでトップに戻す

という処理をしています。

ルートに追加する

そして、これをルートに追加していきます。

    Route::post('logout',[\App\Http\Controllers\UserController::class,'logout'])->name('user.logout');
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する
とびうおくん
とびうおくん

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にアクセスすると、以下の画面が表示されるようになります。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

ボタンを押した後のメソッドを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を見にいくと、

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

というエラーが表示されてしまいます。

これは、route nameのloginがないからなので、ここで、loginをする画面を表示しているrouteに追加します。

Route::get('/login',[\App\Http\Controllers\UserController::class,'showLogin'])->name('login');

と書きます。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する

そうすると、

ログインしてない状態で、/profileにアクセスするとログイン画面に飛ぶようになります!

最後の仕上げ

最後の仕上げとして、welcomeページにログインとユーザー登録に飛べるようなリンクを設置しましょう!

web.phpのregisterの画面に飛ばすところを以下のようにします。

Route::get('/register',[\App\Http\Controllers\UserController::class,'showRegister'])->name('register');

そうすると、laravel10はなんとloginとregister画面が表示されるのでした。

Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する
Laravel10で自分オリジナルのログイン画面を作成する
とびうおくん
とびうおくん

laravel 10すごい…

まとめ

Laravel10で自力でログイン機能を作成してみました!!!

少し難し目だったかもしれませんが、今までに比べてだいぶ簡単に作れるようになっているなぁと感じます!!

Laravel10でほかの方法でログインさせる方法も多く書いているので、そちらが気になる方は↓をチェックしてみてください!!

WEBアプリケーションポートフォリオの作り方:トビログ
学生・初心者でも簡単! LaravelとXserverで自分のアプリケーションを月額500円で作成しよう! Laravel 10とXserverのVPSを用いて学生でも簡単にWebアプリケーションポートフォリオを作成できるようになります。 Laravelの使い方から、Xserverでのデプロイまでを初心者でも簡単にわか...

laravelの他の記事

トビログでは他にも多くのLaravelの記事を公開しています!

気になる方は見てみてください!

Laravel
「Laravel」の記事一覧です。
とびうお
ブログ管理人です!
swimaneというアプリをリリースしました!

コメント

タイトルとURLをコピーしました