laravel - 使用 Laravel Livewire 和 Laravel Fortify 进行登录

Question

我想使用 Laravel Fortify 和 Livewire 创建一个非常简单的登录表单。我不想使用 Jetstream，因为它有更多我不需要的功能而不是我需要的功能。

我在整个应用程序中使用 livewire，并希望将它用于我的登录页面以提供实时即时验证。

我遇到的问题是，如果我在输入中使用 wire:model，我将无法提交带有值的表单。

我也不能使用 auth()->attempt() 因为它被 Fortify 劫持了。(至少，我认为是。众所周知，当我使用它时，它会返回错误)

如何将 livewire 与 fortify 一起使用？我需要将数据从 livewire 组件发送到 POST/login。

这是我目前的设置:

FortifyServiceProvider.php

public function boot()
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);

        // Custom Fortify Views =============================

        // Login Page
        Fortify::loginView(function () {
            return view('auth.login');
        });
   }

我的auth/login.blade.php(简单地使用适当的布局模板调用 livewire 组件)

<x-layouts.auth>
    @livewire('auth.login')
</x-layouts.auth>

livewire 组件livewire/auth/login.blade.php:

<form wire:submit.prevent="login" action="#" method="POST">
    <div>
        <label for="email">Email address</label>
        <input wire:model="email" id="email" type="email" required autofocus>
        @error('email'){{ $message }}@enderror
    </div>

    <div>
        <label for="password">Password</label>
        <input wire:model.lazy="password" id="password" type="password" required>
        @error('password'){{ $message }}@enderror
    </div>

    <div>
        <input wire:model.lazy="remember" id="remember_me" type="checkbox">
        <label for="remember_me">Remember me</label>

        <a href="#">Forgot your password?</a>
    </div>

    <div>
        <button type="submit">Sign in</button>
    </div>
</form>

和我的 livewire 组件的 Http/Livewire/Auth/Login.php 文件:

class Login extends Component
{
    public $email = '';
    public $password = '';
    public $remember = false;

    protected $rules = [
        'email' => 'required|email|exists:users,email',
        'password' => 'required',
    ];

    /**
     * Shows Real time validation for email field
     */
    public function updatedEmail() {
        $this->validate(['email' => 'email|exists:users,email']);
    }

    /**
     * Logs user in when form is submitted
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Support\MessageBag
     */
    public function login()
    {
        // ******* Need to submit the form to Fortify here?? ******
    }

    /**
     * Renders the view
     * @return mixed
     */
    public function render()
    {
        return view('livewire.auth.login')
            ->layout('layouts.auth');
    }
}

Answer 1

class Login extends Component
{
  public $email = '';
  public $password = '';
......

首先，根据Livewire documentation ，敏感信息(例如密码)不应用作 livewire 组件中的公共(public)属性。因此，在使用带有用户身份验证的 livewire 之前，您应该三思。

protected $rules = [
  'email' => 'required|email|exists:users,email',
  'password' => 'required',
];

接下来，在验证规则中，您将使用 exists:user,email 如果电子邮件在数据库中，它将实时验证。我建议不要在生产系统中将此验证与 livewire 实时验证规则一起使用，因为它很容易被恶意行为者用来提取系统用户的电子邮件列表。

也就是说，您可以通过多种方式在登录功能中进行身份验证(但不使用 Fortify)。例如:

class LoginForm extends Component
{
public $email = '';
public $password = '';
public $remember = false;

protected $rules = [
    'email' => 'required|email|exists:users,email',
    'password' => 'required',
];

/*

Sometimes it's useful to validate a form field as a user types into it. 
Livewire makes "real-time" validation simple with the $this->validateOnly() method.

To validate an input field after every update, we can use Livewire's updated hook:

 */
public function updated($propertyName)
{
    $this->validateOnly($propertyName);
}

public function render()
{
    return view('livewire.loginForm');
}

public function login()
{
    $this->validate();

    // Execution doesn't reach here if validation fails.

    $email = $this->email;
    $password = $this->password;
    $credentials = ['email'=>$email, 'password'=>$password];

    if (Auth::attempt($credentials)) {
        // Auth success
    }

    else{
        // Auth failed
    }
}

然后，当使用此方法时，您只是使用 Fortify 来检索登录页面，这绝对不是 Fortify 的预期用途。因此，在考虑了所有问题之后，我认为您最好避免使用 livewire 进行用户身份验证过程。