BLOG
前回の続きになりますので、まだ見ていない方は先にこちらをご覧ください。
では今回はログイン機能の実装を進めていきましょう。
ログイン機能についてはLaravel8から新パッケージとして、『jetstream』が登場しましたので
そちらを使用し実装していきます。
では実装中のディレクトリに移動し
./vendor/bin/sail composer require laravel/jetstreamこのようにインストールしましょう。
インストール時に「Livewire」と「inertia」の二種類を選択出来ますが、今回は『livewire』を使用します。
./vendor/bin/sail artisan jetstream:install livewire『npm install && npm run dev』してくださいと言われるので、実行しましょう。
こちらの実行が必要になるためnodeが必要になります。
npm install && npm run devでは準備ができたのでmigrateします。
./vendor/bin/sail artisan migrateポートは8573に設定していますので
『http://localhost:8573/』でトップページにアクセスしてみましょう。
このように右上に新規登録、ログインが出ていれば完成です。
新規登録を確認すると『名前』『メールアドレス』『パスワード』になっていますが、
今回は『メールアドレス』ではなく『ユーザーID』に変更してみましょう。
今回は練習のため、書き換えてみましょう。
public function create(array $input)
{
Validator::make($input, [
'name' => ['required', 'string', 'max:255'],
'userid' => ['required', 'string', 'max:255', 'unique:users'],
'password' => $this->passwordRules(),
'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['required', 'accepted'] : '',
])->validate();
return User::create([
'name' => $input['name'],
'userid' => $input['userid'],
'password' => Hash::make($input['password']),
]);
}赤色の箇所をこのように書き換えましょう。
次にこちらもuseridにしましょう。
メールアドレスは削除もしくはコメントアウトし、useridを追加します。
protected $fillable = [
'name',
'userid',
// 'email',
'password',
];先程データ側の設定が完了しましたので、次にViewの設定を行います。
{{-- <div class="mt-4">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
</div> --}}
//下記に変更
<div class="mt-4">
<x-jet-label for="userid" value="{{ __('userid') }}" />
<x-jet-input id="userid" class="block mt-1 w-full" type="text" name="userid" :value="old('userid')" required />
</div>上の箇所はメールアドレスの記述ですので、コメントアウトもしくは削除しuseridに書き換えたものを追加しましょう。
{{-- <div>
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div> --}}
//下記に変更
<div>
<x-jet-label for="userid" value="{{ __('userid') }}" />
<x-jet-input id="userid" class="block mt-1 w-full" type="text" name="userid" :value="old('userid')" required autofocus />
</div>先程と同じくメールアドレスの部分をuseridに書き換えたものを追加しましょう。
メールアドレスの部分は削除もしくはコメントアウトを忘れないようお気をつけください。
config/fortify.php
次に『’username’ => ‘email’』を消し『’username’ => ‘userid’』を追加しましょう。
// 'username' => 'email'
//下記に変更
'username' => 'userid'laravelではデフォルトのカラムを変更出来ないようなので、
パッケージをインストールします。
./vendor/bin/sail composer require "doctrine/dbal:2.*"変更のためマイグレーションファイルを作成します。
usersテーブルを変更していきますので下記のような記述になります。
ファイル名はわかりやすければなんでも良いです。
./vendor/bin/sail artisan make:migration add_column_userid_at_users_table --table=users『database/migration/』に『作成した日付＋上記ファイル名』のファイルがありますので、
変更していきましょう。
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('userid')->unique()->after('name')->comment('ログインid');
$table->dropUnique('users_email_unique');
$table->string('email')->unique()->nullable()->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropUnique('users_email_unique');
$table->string('email')->unique()->change();
$table->dropColumn('userid');
});
}このように記載し保存します。
migrateしデータベースを変更し完成です。
./vendor/bin/sail artisan make:migration 1364 Field 'user_id' doesn't have a default valueこのようなエラーが出る場合は、
この記述の部分をfalseに書き換えましょう。
// 'strict' => true
//下記に変更
'strict' => false初めにLaravelの設定で済ましていると思いますが、
アプリ自体を日本語に設定します。再度確認しましょう
'locale' => 'ja',laravel-resources-lang-jaこちらからダウンロードします。
緑色のボタンから『Download ZIP』で保存し解凍しし、resources/langに『ja』フォルダごと移動させましょう。
上記のフォルダを追加しただけでは完全に追加出来ないため手動で追加していきます。
resources/lang/ja/validation.php
'attributes' => [
'email' => 'メールアドレス', // 追加
'password' => 'パスワード', // 追加
],次に、まだ日本語化出来ていない部分があるので追加しましょう。
resources/lang/以下に『ja.json』を作成し以下のコードを貼り付けます。
{
"Whoops! Something went wrong.": "以下のエラーが発生しました。",
"The :attribute must be at least :length characters and contain at least one uppercase character.": ":attributeには:length文字以上の文字列を指定し、１つ以上の大文字を含んでください。",
"The :attribute must be at least :length characters and contain at least one number.": ":attributeには:length文字以上の文字列を指定し、１つ以上の数字を含んでください。",
"The :attribute must be at least :length characters and contain at least one special character.": ":attributeには:length文字以上の文字列を指定し、１つ以上の特殊文字を含んでください。",
"The :attribute must be at least :length characters and contain at least one uppercase character and one number.": ":attributeには:length文字以上の文字列を指定し、１つ以上の大文字と、数字を含んでください。",
"The :attribute must be at least :length characters and contain at least one uppercase character and one special character.": ":attributeには:length文字以上の文字列を指定し、１つ以上の大文字と、特殊文字を含んでください。",
"The :attribute must be at least :length characters and contain at least one uppercase character, one number, and one special character.": ":attributeには:length文字以上の文字列を指定し、１つ以上の大文字と、数字、特殊文字を含んでください。",
"The :attribute must be at least :length characters.": ":attributeには:length文字以上の文字列を指定してください。",
"Name": "ユーザー名",
"Email" : "メールアドレス",
"userid": "ユーザーID",
"Required at login" : "ログイン時に必要",
"Password": "パスワード",
"Confirm Password": "パスワード(確認用)",
"Already registered?": "既に登録済みですか？",
"Register": "登録する",
"Remember me": "次回から自動ログインする",
"Forgot your password?": "パスワードを忘れた場合",
"Login": "ログイン"
}以上でLaravel8でログイン機能を作成し日本語化が完了になります。
