Menggunakan Fasad Otentikasi Laravel 5

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Otentikasi adalah bagian dari hampir semua aplikasi web tempat Anda bekerja. Benar-benar membosankan untuk terus mengulangi semua kode boilerplate di setiap proyek. Nah, kabar baiknya adalah Laravel 5 membantu Anda mengatasi kebosanan ini dengan menyediakan fasad otentikasi siap pakai.

Yang perlu Anda lakukan adalah mengkonfigurasi dan menyesuaikan penyedia layanan otentikasi dengan kebutuhan proyek Anda. Dalam tip cepat ini, saya akan menunjukkan kepada Anda bagaimana cara melakukannya.

Mencari Jalan Pintas?

Jika Anda ingin solusi siap pakai, dicoba dan diuji, cobalah Vanguard - Advanced PHP Login and User Management di Envato Market. Ini adalah aplikasi PHP, yang ditulis dalam Laravel 5.2, yang memungkinkan pemilik situs web dengan cepat menambahkan dan mengaktifkan otentikasi, otorisasi, dan manajemen pengguna di situs web mereka.

Vanguard - Advanced PHP Login and User Management on Envato Market — Vanguard - Advanced PHP Login and User Management di Envato Market

Menyiapkan Lingkungan

Saya akan menganggap Anda memulai dengan instalasi Laravel 5 yang baru, tetapi Anda dapat melewati salah satu dari langkah-langkah ini jika Anda telah melakukannya. Pertama, Anda akan mengatur beberapa variabel lingkungan dalam file .env di root proyek Anda. Pada dasarnya, ini ada hubungannya dengan konfigurasi database.

APP_ENV=local
APP_DEBUG=true
APP_KEY=8wfDvMTvfXWHuYE483uXF11fvX8Qi8gC

DB_HOST=localhost
DB_DATABASE=laravel_5_authentication
DB_USERNAME=root
DB_PASSWORD=root

CACHE_DRIVER=file
SESSION_DRIVER=file

Perhatikan variabel APP_ENV, DB_HOST, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD. Variabel APP_ENV memberi tahu Laravel lingkungan mana kami ingin menjalankan aplikasi web kami. Sisa nama variabel database cukup jelas.

Ini semua yang perlu Anda lakukan untuk mengkonfigurasi koneksi database. Tapi bagaimana Laravel memanfaatkan variabel-variabel ini? Mari kita periksa file config/database.php. Anda akan melihat penggunaan fungsi env(). Misalnya, env('DB_HOST', 'localhost'). Laravel 5 menggunakan fungsi ini untuk menangkap variabel dari array global $_ENV dan $_SERVER, yang secara otomatis diisi dengan variabel yang Anda tetapkan dalam file .env.

Mengatur Migrasi

Jalankan php artisan migrate:install --env=local di terminal Anda di root proyek Anda untuk menginstal migrasi secara lokal. Juga perhatikan bahwa ada dua migrasi yang sudah didefinisikan dalam folder database/migrations. Dengan menggunakan migrasi ini, Laravel 5 membuat tabel users dan password_resets, memungkinkan boilerplate otentikasi default agar bekerja. Saya akan membuat migrasi ketiga untuk memodifikasi tabel users hanya untuk menunjukkan cara menyesuaikan pengaturan otentikasi default.

Jalankan php artisan make:migration alter_users_table_remove_name_add_first_name_last_name di terminal untuk membuat migrasi ketiga.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AlterUsersTableRemoveNameAddFirstNameLastName extends Migration {

    /**
   * Run the migrations.
	 *
	 * @return void
	 */
	public function up()
	{
		Schema::table('users', function($table){
			$table->dropColumn('name');
			$table->string('first_name', 50)->after('id');
			$table->string('last_name', 50)->after('first_name');
		});
	}

	/**
	 * Reverse the migrations.
	 *
	 * @return void
	 */
	public function down()
	{
		Schema::table('users', function($table){
			$table->dropColumn('last_name');
			$table->dropColumn('first_name');
			$table->string('name')->after('id');
		});
	}

}

Seperti yang Anda lihat, Anda telah menghapus kolom name dan menambahkan dua kolom lagi untuk first_name dan last_name dengan panjang maksimum 50 karakter. Anda juga telah menambahkan kode yang menggulung kembali perubahan ini dalam database.

Jalankan php artisan migrate di terminal. Jika migrasi berhasil, Anda harus dapat melihat kedua tabel dalam database Anda dengan kolom yang Anda tetapkan.

Mengkonfigurasi Layanan Registrar

Anda akan mengonfigurasi layanan Registrar untuk menambahkan kolom tabel users yang baru Anda definisikan.

Edit file app/Services/Registrar.php.

<?php namespace App\Services;

use App\User;
use Validator;
use Illuminate\Contracts\Auth\Registrar as RegistrarContract;

class Registrar implements RegistrarContract {

    /**
	 * Get a validator for an incoming registration request.
	 *
	 * @param  array  $data
	 * @return \Illuminate\Contracts\Validation\Validator
	 */
	public function validator(array $data)
	{
		return Validator::make($data, [
			'first_name' => 'required|min:3|max:50',
			'last_name' => 'required|min:3|max:50',
			'email' => 'required|email|max:255|unique:users',
			'password' => 'required|confirmed|min:6',
		]);
	}

	/**
	 * Create a new user instance after a valid registration.
	 *
	 * @param  array  $data
	 * @return User
	 */
	public function create(array $data)
	{
		return User::create([
			'first_name' => $data['first_name'],
			'last_name' => $data['last_name'],
			'email' => $data['email'],
			'password' => bcrypt($data['password']),
		]);
	}

}

Fungsi validator memvalidasi data yang dikirimkan dari formulir pendaftaran pengguna. Anda telah menghapus kolom name default dan menambahkan kolom first_name dan last_name dengan panjang minimum tiga karakter dan panjang maksimum 50 karakter untuk keduanya. Fungsi create menambahkan pengguna terdaftar ke tabel users dalam database, jadi Anda hanya perlu menyertakan kolom first_name dan last_name ke dalamnya.

Memperbarui Model User

Anda juga perlu memperbarui model User untuk menyertakan kolom first_name dan last_name.

Edit file app/User.php.

<?php namespace App;

use Illuminate\Auth\Authenticatable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Auth\Passwords\CanResetPassword;
use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
use Illuminate\Contracts\Auth\CanResetPassword as CanResetPasswordContract;

class User extends Model implements AuthenticatableContract, CanResetPasswordContract {

    use Authenticatable, CanResetPassword;

	/**
	 * The database table used by the model.
	 *
	 * @var string
	 */
	protected $table = 'users';

	/**
	 * The attributes that are mass assignable.
	 *
	 * @var array
	 */
	protected $fillable = ['first_name', 'last_name', 'email', 'password'];

	/**
	 * The attributes excluded from the model's JSON form.
	 *
	 * @var array
	 */
	protected $hidden = ['password', 'remember_token'];

}

Array $fillable menentukan kolom mana dari model yang terbuka untuk modifikasi. Anda biasanya tidak akan menyertakan kolom yang dihasilkan secara otomatis ke dalam array atau kolom yang tidak memerlukan masukan pengguna seperti hash untuk token remember me. Yang telah Anda lakukan adalah memperbarui array $fillable untuk memungkinkan first_name dan last_name dapat ditetapkan secara massal.

Memperbarui View

Akhirnya, Anda hanya perlu memperbarui view front-end untuk menyertakan bidang first_name dan last_name. Pertama, Anda akan memperbarui formulir pendaftaran.

Edit file resources/views/auth/register.blade.php.

@extends('app')

@section('content')

<div class="container-fluid">
    <div class="row">
		<div class="col-md-8 col-md-offset-2">
			<div class="panel panel-default">
				<div class="panel-heading">Register</div>
				<div class="panel-body">
					@if (count($errors) > 0)
						<div class="alert alert-danger">
							<strong>Whoops!</strong> There were some problems with your input.<br><br>
							<ul>
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif

					<form class="form-horizontal" role="form" method="POST" action="/auth/register">
						<input type="hidden" name="_token" value="{{ csrf_token() }}">

						<div class="form-group">
							<label class="col-md-4 control-label">First Name</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="first_name" value="{{ old('first_name') }}">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-4 control-label">Last Name</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="last_name" value="{{ old('last_name') }}">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-4 control-label">E-Mail Address</label>
							<div class="col-md-6">
								<input type="email" class="form-control" name="email" value="{{ old('email') }}">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-4 control-label">Password</label>
							<div class="col-md-6">
								<input type="password" class="form-control" name="password">
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-4 control-label">Confirm Password</label>
							<div class="col-md-6">
								<input type="password" class="form-control" name="password_confirmation">
							</div>
						</div>

						<div class="form-group">
							<div class="col-md-6 col-md-offset-4">
								<button type="submit" class="btn btn-primary">
									Register
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

Anda telah menambahkan bidang first_name dan last_name ke formulir pendaftaran. Anda juga perlu mengedit tata letak aplikasi default di resources/views/app.blade.php untuk menampilkan nama pengguna yang sudah login ke dalam menu navigasi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel 5: Using The Authentication Facade</title>

	<link href="/css/bootstrap.min.css" rel="stylesheet">
	<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
	<link href="/css/app.css" rel="stylesheet">

	<!-- Fonts -->
	<!--<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>-->

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle Navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Laravel</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="/">Home</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					@if (Auth::guest())
						<li><a href="/auth/login">Login</a></li>
						<li><a href="/auth/register">Register</a></li>
					@else
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->first_name . ' ' . Auth::user()->last_name }} <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="/auth/logout">Logout</a></li>
							</ul>
						</li>
					@endif
				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		@yield('content')
	</div>

	<!-- Scripts -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Mengamankan Rute Anda

Untuk mengamankan rute Anda dan hanya mengizinkan pengguna yang login untuk dapat mengaksesnya, Anda perlu menggunakan middleware auth yang disediakan oleh Laravel. The middleware auth dapat ditemukan di app\Http\Middleware\Authenticate.php.

Berikut beberapa contoh cara menggunakannya untuk melindungi rute Anda.

// route closure
Route::get('<your-route-uri>', ['middleware' => 'auth', function()
{
    // if user is not logged in
    // he/she will be redirected to the login page
    // and this code will not be executed
}]);

// controller action
Route::get('<your-route-uri>', ['middleware' => 'auth', 'uses' => '<your-controller>@<your-action>']);

// within a controller
class YourController extends Controller {

    public function __construct()
    {
        $this->middleware('<your-middleware-name>');

        $this->middleware('<another-middleware>', ['only' => ['<some-action-name>']]);

        $this->middleware('<more-middleware>', ['except' => ['<another-action-name>']]);
    }

}

Memodifikasi Rute Otentikasi Default

Anda dapat menjalankan php artisan route:list di terminal untuk memeriksa rute default yang digunakan fasad otentikasi. Anda dapat mengakses rute ini untuk menguji kode otentikasi Anda. Berikut beberapa contoh cara memodifikasi rute ini.

Edit file app/Http/routes.php.

// Example 1
// login url https://www.example.com/account/login
// logout url http://www.example.com/account/logout
// registration url http://www.example.com/account/register
Route::controllers([
    'account' => 'Auth\AuthController',
    'password' => 'Auth\PasswordController',
]);

// Example 2
// login url http://www.example.com/login
// logout url http://www.example.com/logout
// registration url http://www.example.com/register
Route::controllers([
	'' => 'Auth\AuthController', 
	'password' => 'Auth\PasswordController',
]);

// Example 3
// redefine all routes
Route::get('example/register', 'Auth\AuthController@getRegister');
Route::post('example/register', 'Auth\AuthController@postRegister');
Route::get('example/login', 'Auth\AuthController@getLogin');
Route::post('example/login', 'Auth\AuthController@postLogin');
Route::get('example/logout', 'Auth\AuthController@getLogout');
Route::get('example/email', 'Auth\PasswordController@getEmail');
Route::post('example/email', 'Auth\PasswordController@postEmail');
Route::get('example/reset/{code}', 'Auth\PasswordController@getReset');
Route::post('example/reset', 'Auth\PasswordController@postReset');

Juga, ingat untuk memanggil URI secara dinamis dalam view dan template email Anda menggunakan helper Laravel. Anda dapat melihat cara melakukannya di repositori GitHub dari tip cepat ini.

Pemikiran Akhir

Fitur pengaturan ulang kata sandi mengirimkan tautan pengaturan ulang kata sandi ke email pengguna, jadi pastikan Anda memiliki konfigurasi mail yang diatur dalam proyek Laravel Anda. Template view untuk email pengaturan ulang kata sandi ada di resources/views/emails/password.blade.php. Anda juga dapat mengkonfigurasi beberapa opsi dasar lainnya di file config/auth.php.

Saya harap tip cepat ini mudah diikuti. Sampai potongan Tuts+ saya berikutnya, selamat mengkode!

By the way, jika Anda membutuhkan bantuan tambahan dengan memperbaiki bug atau membuat kustomisasi yang Anda tidak nyaman dengannya, hubungi salah satu penyedia layanan PHP di Envato Studio. Mereka dapat membantu Anda dengan berbagai masalah dengan cepat dan andal, sehingga dengan investasi uang kecil, Anda dapat menghemat banyak waktu!