Laravel にログイン機能を付けるには？

/ Laravel / By
ショコラ
ショコラ

Laravel にログイン機能を付けるには？

Laravel をインストールしてログイン機能を付けてみます。

もっさん先輩
もっさん先輩

↓下のようなログイン画面を直ぐに用意することができます。

手順

Laravel をインストールしてログイン機能を付ける手順。

  1. プロジェクト名（login）を決めて以下のコマンドを実行します。
curl -s https://laravel.build/login | bash

インストール時にプロジェクト名のディレクトリが作成されます。

  1. インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd login && ./vendor/bin/sail up
  1. sail のエイリアスを定義します。
echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc
source ~/.bashrc

Laravel のインストールはここまで。

  1. 「sail up」でコンテナを起動します。
cd login && sail up -d
  1. laravel-breezeパッケージ を取得します。※sailコマンド でやるところがポイントですね。
sail composer require laravel/breeze
  1. laravel-breezeパッケージ をインストールします。
sail artisan breeze:install
  1. laravel-breezeのマイグレーションを実行します。
sail artisan migrate
  1. ブラウザで Laravel にアクセスします。

画面の右上に「Log in」「Register」のリンクが追加されています。

ユーザーの登録ができるようになりましたが、メール認証を行ってユーザーの登録をさせたいと思います。

メール認証でユーザー登録する

  1. メール認証を行うには、app/Models/User.phpファイル を２か所修正する必要があります。
sed -i 's/\/\/ use Illuminate\\Contracts\\Auth\\MustVerifyEmail;/use Illuminate\\Contracts\\Auth\\MustVerifyEmail;/' app/Models/User.php
sed -i 's/class User extends Authenticatable/class User extends Authenticatable implements MustVerifyEmail/' app/Models/User.php
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable implements MustVerifyEmail
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}
  1. メールを送信するので、設定ファイルを修正します。Gmail でメールを送るのは以下のように設定します。
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=｛アカウント｝@gmail.com
MAIL_PASSWORD=｛アプリパスワード｝
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="｛GMAILのメールアドレス｝"
MAIL_FROM_NAME="${APP_NAME}"
  1. 日本語化のリソースを定義します。
    'locale' => 'ja',
{
  "Name":"氏名",
  "Email":"メールアドレス",
  "Password":"パスワード",
  "Confirm Password":"パスワード入力確認",
  "Already registered?":"会員登録済み",
  "Register":"会員登録",
  "Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.":"サインアップしていただきありがとうございます。始める前に、先ほどEメールでお送りしたリンクをクリックして、Eメールアドレスの確認をしていただけますか？もし、メールが届いていない場合は、再度お送りします。",
  "Resend Verification Email":"認証メール再送信",
  "A new verification link has been sent to the email address you provided during registration.":"登録時に入力されたメールアドレスに、新しい認証リンクが送信されました。",
  "Log Out":"ログアウト",
  "Remember me":"パスワードを保存する",
  "Forgot your password?":"パスワードを忘れたら",
  "Log in":"ログイン",
  "Whoops! Something went wrong.":"入力エラー",
  "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.":"パスワードをお忘れですか？メールアドレスをお知らせいただければ、新しいパスワードに変更できるパスワードリセットメールをお送りします。",
  "Email Password Reset Link":"パスワードリセットメールを送る",
  "passwords.sent":"メールを送りました",
  "Reset Password":"パスワードをリセットする",
  "Member 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.":"このパスワードリセットリンクは、:count 分で失効します。",
  "If you did not request a password reset, no further action is required.":"パスワードの再設定を要求していない場合は、これ以上の操作は必要ありません。",
  "Regards":"よろしくお願いします。"
}

ユーザー情報を入力すると、以下の画面になります。

以上

Scroll to Top