laravelの認証機構を見てみよう

mocotech

以下にbreeze(react)で作成したスケルトンみたいなのを置いておく。


これをcloneして進めてもらうと話が早い(もちろん自分でbreezeをinstallしてもよい)

% git clone -b breeze-inertia-react https://gitlab.com/catatsumuri/laravel10-starter.git
Cloning into 'laravel10-starter'...
remote: Enumerating objects: 308, done.
remote: Counting objects: 100% (308/308), done.
remote: Compressing objects: 100% (279/279), done.
remote: Total 308 (delta 102), reused 85 (delta 6), pack-reused 0
Receiving objects: 100% (308/308), 155.64 KiB | 1.38 MiB/s, done.
Resolving deltas: 100% (102/102), done.

composer installと.envの設置とsailおよびnpmのinstall および run devとかすればすぐ使える。

laravel breezeとはそもそも何なのか

認証スケルトンというようなものでログインフォームとかユーザー登録などを供える。

たとえば上記のreactを使ったパーツの部分でみると以下のファイル郡が存在する

resources/js/Pages/Dashboard.jsx
resources/js/Pages/Auth/VerifyEmail.jsx
resources/js/Pages/Auth/Register.jsx
resources/js/Pages/Auth/ForgotPassword.jsx
resources/js/Pages/Auth/Login.jsx
resources/js/Pages/Auth/ResetPassword.jsx
resources/js/Pages/Auth/ConfirmPassword.jsx
resources/js/Pages/Welcome.jsx
resources/js/Pages/Profile/Partials
resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx
resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx
resources/js/Pages/Profile/Edit.jsx

とりわけAuthだけ見れば

  • ログイン

  • ユーザー登録

  • パスワード忘れとパスワード再登録

  • E-mail認証

のような機能を供えるわけだ。まあ最近の認証だとこのように諸々必要だったりするのでこれを自分で実装しようとすると辛いわけだ。ま、今回はその辺りを眺めていこうって趣旨。

ユーザーのスキーマ

これは(breezeではない)

database/migrations/2014_10_12_000000_create_users_table.php

    public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

  • id: ユーザーの一意の識別子。

  • name: ユーザーの名前。

  • email: ユーザーのメールアドレス。一意でなければならない。

  • email_verified_at: メールアドレスが確認された日時。確認されていない場合はnull。

  • password: ハッシュ化されたパスワード。

  • rememberToken: "Remember Me"機能用のトークン。

  • timestamps: 作成日時と更新日時。

ここで注目すべきは認証キーがemailであるという事である。いわゆる「アカウント名」はここでは使わない。もちろん使うようにもできるが、その場合は多少の拡張を必要とするから、本稿ではとりあえず放置する。

起動後


ここにログインとユーザー登録ができている。

registerの機能(を使いたくない場合)

これはwelcomeのbladeとjsxでは結構違っており、bladeはrouteの存在を見てるんだけどjsxの方はそのまんま書かれている

resources/js/Pages/Welcome.jsx

                <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
                    {auth.user ? (
                        <Link
                            href={route('dashboard')}
                            className="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                        >
                            Dashboard
                        </Link>
                    ) : (
                        <>
                            <Link
                                href={route('login')}
                                className="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                            >
                                Log in
                            </Link>

                            <Link
                                href={route('register')}
                                className="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                            >
                                Register
                            </Link>
                        </>
                    )}
                </div>

つわけで、さすがにreactからrouteのあるなしを判断できないので、この辺は自分でやってくれって感じで、registerを使わないのであればこのリンクを削除し、routeから抹消するという事をする必要があるだろう。

改造していく

といってもある程度指針が必要なので定義してみよう

  • email, passwordで認証(要するにこのまま)

  • 自分でregisterできる

  • メールアドレスの妥当性を検証する。要するに適当なメールアドレスで作られたユーザーはスルーする

  • パスワードの複雑性をある程度保証する

  • そうなると、もちろんパスワードを忘れたときの対応も必要である

以上を踏まえてユーザーの自己登録機能を作成していくことにする。余裕があればoauth認証とかも出来たらいいね(長くなるからやらなそう)

いいなと思ったら応援しよう！