Laravel8でログイン機能実装1 基本機能導入編
本連載では、Laravelのバージョン8でログイン機能を実装する方法をご紹介いたします。バージョン5の記事や導入のみを紹介した記事はよく見るのですが、実用を意識したカスタマイズまではあまり見かけませんでしたのでこちらでご紹介いたします。
バージョン6以降は同じ手順です。
関連記事で全シリーズを紹介しております。
導入辺をスキップされる方は「関連記事」からリンクください。
目的
Laravelは標準機能を使って会員サイトを構築することができます。
ただ、実用的なものにするには少し手を加える必要がございますので
本稿では基本的な導入手順に加えて、カスタマイズについても記載してきます。
最低限ここまでやれば、まずは実用可能なレベルかと思います。
目指すサイトの構成
本稿では下記の機能を構成します。会員サイトとして最低限の機能ですね。
（会員情報変更などは次回以降で解説致します。現段階では目を瞑っていただいて、、）
- 会員登録
- ログイン
- 会員メニュー
- ログアウト
- パスワード再設定
Laravelでの実装
Laravel5まではmake:authというコマンドがあったのですがLaravel6以降はこのコマンドがなくなっております。
でも諦めることはありません。方法が変わっただけで、Laravelの強力な認証機能はいまでも利用可能です。
コマンドはありませんが、公式に記載されている手順はございますのでこの内容に従って導入を進めていきます。
パッケージのインストール
https://readouble.com/laravel/8.x/ja/frontend.htmlまずはUIパッケージをインストールします。
composer require laravel/ui:^1.0 --dev
パッケージがインストールできたら、フロントエンドのスカフォールドをインストールします。
// 基本的なスカフォールドを生成 php artisan ui bootstrap php artisan ui vue php artisan ui react // ログイン／ユーザー登録スカフォールドを生成 php artisan ui bootstrap --auth php artisan ui vue --auth php artisan ui react --auth
これらはすべてきちんとインストールしてください。
「bootstrapしか使わないな」などと思って、他をインストールしないと
このようになります。
あれ、なんだか画面が崩れている気がする。。
デザインが当たっていない、、、（失敗談）
ということで、きちんとすべてインストールすると、TOP画面(「Laravel」と大きく表示されている、ようこそ的なページ)の右上にloginとregisterが追加されています。
これで基本的なログイン機能が実現されています。実に簡単ですね。
それではそれぞれの画面を見ていきます。
会員登録画面
「Register」の方です。お客様が会員登録する際に利用するページです。
きれいに表示されていますね。
デフォルトでの入力項目は下記4つです。
- 氏名
- メールアドレス（※）
- パスワード（※）
- 確認用パスワード（※）
試しにまずはさくっと登録しようとすると
パスワードを入力しない状態だとエラーが返ってきます。
なんとすでにバリデーションもされています。メールアドレスに@が含まれていない場合や最大入力文字数などもすでに考慮されている状態となっています。すばらしい。
当然メールアドレスの重複チェックなどもされております。
ログイン画面
「Login」の方です。会員登録した後にログインする画面
こちらも問題なしです。機能的にはすでに完成。
でも実際に使うにはまだまだ改良の余地はあります。
日本語化
まずは理解できる言語にしないといけないですね。そう、日本語化です。
Laravelの日本語化
すでに対応済みの方は読み飛ばしてください。
Laravel自体を日本語化するには、読み込む言語ファイルを日本語に指定する必要があります。下記の箇所を修正します
//70行目くらい 'locale' => 'ja' //83行目くらい, 'fallback_locale' => 'ja', //109行目くらい 'faker_locale' => 'ja_JP',
ログイン画面の日本語化
これは手順さえわかってしまえば簡単で、下記jsonファイルを適切な場所に保存するだけです。
{
"Login": "ログイン",
"login_id": "ログインID",
"Register": "新規登録",
"Forgot Your Password?": "パスワードを忘れた場合",
"Reset Password": "パスワード再設定",
"Send Password Reset Link": "パスワード再設定URLを送信",
"Name": "お名前",
"E-Mail Address": "メールアドレス",
"Password": "パスワード",
"Confirm Password": "パスワード(確認用)",
"Remember Me": "ログイン状態を保存",
"Hello!": "ご利用ありがとうございます。",
"Reset Password Notification": "パスワード再設定のお知らせ",
"You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再発行のリクエストがありました。",
"This password reset link will expire in :count minutes.": "再設定URLの有効期限は :count 分です。",
"If you did not request a password reset, no further action is required.": "もしパスワード再発行をリクエストしていない場合、操作は必要ありません。",
"If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser: [:actionURL](:actionURL)": "\":actionText\"ボタンを押しても何も起きない場合、以下URLをコピーしてWebブラウザに貼り付けてください。\n[:actionURL](:actionURL)",
"Regards": "よろしくお願いいたします"
}
このファイルを配置するだけで、この通り日本語化されました。
パスワード再設定のメールについても、この通り日本語化対応完了しております。
エラーメッセージの日本語化
これで日本語化は完了したと思ってたのも束の間
テストをしていると、違和感のあるこんなメッセージが表示されていることを発見します。
「email」でもわからないことはないですが
この際すべて日本語化してしまいましょう。
ここではバリデーションメッセージ用の言語ファイルを更新します。
編集するファイルは下記です。
'attributes' => [
'email' => 'メールアドレス',
],
attributesに「email」の文字列に対して、何の日本語に変換するかを記述します。
たったこれだけで、エラーメッセージの日本語化も完了です。
この手順は、Laravelにてバリデーションエラーを記述する際の基本的な手順です。
本稿は以上となります。
次回はログイン時に利用する項目として「ログインID」が利用できるようにする方法をご紹介いたします。
