Memodifikasi proses Login Laravel

Untuk beberapa kasus, kita juga mungkin perlu untuk memodifikasi proses Login pada Laravel, misalnya mengganti login credential menggunakan username dari pada email. Oleh karena itu pada artikel ini kita akan membahas bagaimana memodifikasi proses login pada Laravel.

Mengganti field login dengan username

Ketika menggunakan laravel authentication scaffold, proses login pada Laravel secara default menggunakan email dan password.

Pada artikel memodifikasi halaman register Laravel kita telah membahas bagaimana menambahkan field username pada saat user melakukan registrasi. Kali ini kita akan menggunakan field username ini untuk proses login.

Login Controller

Field login diatur pada trait Illuminate\Foundation\Auth\AuthenticatesUsers pada method username. Untuk mengganti field login kita akan mengoverride method username pada controller Login (app/Http/Controllers/Auth/LoginController).

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    //
    
    /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function username()
    {
        return 'username';
    }

    //
}

View Login

Selanjutnya, kita harus merubah view login dengan mengganti input email menjadi username.

<div class="form-group row">
    <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>

    <div class="col-md-6">
        <input id="username" type="username" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autocomplete="username" autofocus>

        @error('username')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

Setelah mengganti input email dengan username, halaman login akan terlihat seperti ini.

Login menggunakan email / username

Kita juga bisa mengizinkan pengguna untuk login menggunakan username / email yang pengguna gunakan pada saat mereka mendaftar. Sehingga, pengguna bisa memilih untuk menggunakan username atau email untuk login.

Login Controller

Update Login controller dengan memvalidasi input dan menentukan credential yang akan digunakan saat login.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;

class LoginController extends Controller
{
    // 

    /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function username()
    {
        return 'login';
    }

    /**
     * Get the needed authorization credentials from the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    protected function credentials(Request $request)
    {
        $loginField = filter_var($request->input($this->username()), FILTER_VALIDATE_EMAIL) ? 'email' : 'username';

        $request->merge([
            $loginField => $request->input($this->username())
        ]);

        return $request->only($loginField, 'password');
    }
}

Method validateLogin digunakan untuk memvalidasi input dari pengguna. field login seperti yang dituliskan diatas kita perlukan untuk memvalidasi input name login (karena kita mengganti nama input username dengan nama login).

Method credentials digunakan untuk menentukan field mana (username / email) yang akan kita gunakan untuk credentials login.

View Login

Untuk mengizinkan pengguna login menggunakan username / email mereka, kita perlu mengubah input field menjadi nama yang berbeda misalnya login, sebenarnya perubahan ini bersifat opsional, kita masih bisa menggunakan input username seperti contoh diatas, akan tetapi untuk penamaan saya rasa lebih baik jika kita merubah nama inputnya.

Perlu diperhatikan, bahwa penamaan pada view disini harus disesuaikan dengan nama field yang kita gunakan pada class Login Controller.

<div class="form-group row">
    <label for="login" class="col-md-4 col-form-label text-md-right">
        Username / Email
    </label>

    <div class="col-md-6">
        <input id="login" type="login" class="form-control @error('login') is-invalid @enderror" name="login" value="{{ old('login') }}" required autocomplete="login" autofocus>

        @error('login')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

Setelah itu kita bisa menggunakan email/username untuk login pada project kita.

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S