Membuat Fitur Verifikasi Email pada Formulir Registrasi
Tulisan ini masih berhubungan dengan tulisan sebelumnya.
Di tutorial sebelumnya, kita sudah membuat formulir (form), validasi, dan simpan data pengguna baru disertai dengan auto-login untuk user tersebut.
Di tulisan ini, kita akan menambahkan fitur baru berupa verifikasi email, di mana ketika pengguna mendaftar, pengguna tersebut akan mendapatkan email yang berisi tautan (hyperlink) untuk verifikasi dan aktivasi akun. Sebelum email diverifikasi, maka (seharusnya) pengguna tersebut belum bisa masuk (login) ke dalam aplikasi.
Untuk menambahkan fitur verifikasi email, ada beberapa perubahan yang akan dilakukan berdasarkan skrip tutorial sebelumnya.
- Penambahakan field
status
di tabeluser
. Field ini akan ditambahkan melalui migration dengan tipe dataenum
dengan nilai “pending” dan “activated”. Nilai asalnya adalah “pending”, dan akan diubah menjadi “activated” ketika pengguna memverifikasi alamat emailnya. - Penambahakan fitur kirim email di controller
SignupController
.
Untuk proses pengiriman email, kita dapat memanfaatkan fitur Mailable yang tersedia di Laravel 5.3 ke atas.
Alur proses registrasinya adalah sebagai berikut:
- Calon pengguna mendaftar melalui formulir registrasi (
/signup
). - Validasi berhasil, data pengguna disimpan ke dalam pangkalan data (database) dan mengirimkan email berisi tautan verifikasi. Contoh tautannya berbentuk
domain.com/verify?token=xxx
. Di mana, nilaixxx
merupakan pos-el (email) yang dienkripsi. Data ini nantinya didekripsi saat proses verifikasi. - Apabila nilai
xxx
yang sudah didekripsi ditemukan dalam pangkalan data, maka akun pengguna bersangkutan diubah statusnya menjadi “activated”.
Menambahkan Field di tabel Pengguna (user)
Migration untuk tabel pengguna (user) sudah disediakan Laravel. Kita bisa memodifikasinya pada berkas 2014_10_12_000000_create_users_table.php
dalam direktori database/migrations
.
Tambahkan field status
di dalamnya dengan menambahkan skrip di bawah:
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->rememberToken();
$table->enum('status', ['pending', 'activated'])->default('pending');
$table->timestamps();
});
}
Menambahkan Field pada Model
Jika kita menambahkan field baru pada tabel, tentunya, kita perlu menambahkan atribut tersebut pada model bersangkutan sebagai representasi field di tabel.
Pada berkas app\User.php
, kita memodifikasi properti $fillable
menjadi skrip di bawah.
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'status',
];
Membuat Mailable
Buat mailable dengan baru nama VerifyEmail menggunakan Artisan console.
$ php artisan make:mail VerifyEmail Mail created successfully.
Mailable tersimpan dalam direktori app/Mail
. Direktori app/Mail
sendri otomatis dibuat jika belum tersedia.
Buka berkas VerifyMail.php
dalam direktori app/Mail
, dan tambahkan skrip lengkap seperti di bawah.
Pada skrip di atas, kita menggunakan route dengan nama signup.verify
. Route ini akan kita buat pada bahasan di bawah.
Kita juga menggunakan facade Crypt untuk mengenkripsi data email pengguna.
Membuat View Email
Di skrip mailable di atas, kita mendefinisikan view email.signup
. Itu artinya, kita harus membuat sebuah berkas template Blade dengan nama signup.blade.php
di dalam direktori resources/views/email
.
Contoh template email sederhananya adalah sebagai berikut.
<p>Click link below to verify your email address:</p> <p>{{ $link }}</p><p>Thank you.</p>
Memodifikasi Method store() pada SignupController
Dalam method store()
sudah ada alur untuk validasi, simpan data pengguna, dan auto login. Dari modifikasi kali ini, kita akan menghilangkan fitur auto login dan menggantinya dengan pengiriman email verifikasi.
Skrip lengkapnya dapat diamati pada media di bawah. Perhatikan, kita mengimpor mailable yang sudah dibuat di atas ke dalam SignupController
.
public function store(Request $request)
{
// validate request data
$this->validate($request, [
'name' => 'required|string|max:50',
'email' => 'required|email|max:100|unique:users,email',
'password' => 'required|min:6',
'confirm_password' => 'required|same:password',
]); DB::transaction(function () use ($request) {
// save into table
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password),
]); // send email verification
Mail::to($user->email)->send(new VerifyEmail($user));
}); // redirect to home
return redirect()->back();
}
Selain mailable, kita juga menggunakan facade Crypt untuk mendekripsi token yang terdapat pada tautan.
Membuat Method Verifikasi Email
Pada controller SignupController
, tambahkan method baru dengan nama verify()
. Method ini berfungsi untuk memproses token yang ada pada tautan verifikasi, mendekripsi token, dan mencocokkannya ke dalam pangkalan data pengguna.
public function verify()
{
if (empty(request('token'))) {
// if token is not provided
return redirect()->route('signup.form');
} // descrypt token as email
$decryptedEmail = Crypt::decrypt(request('token')); // find user by email
$user = User::whereEmail($decryptedEmail)->first(); if ($user->status == 'activated') {
// user is already active, do something
} // otherwise change user status to "activated"
$user->status = 'activated';
$user->save(); // autologin
Auth::loginUsingId($user->id); return redirect('/home');
}
Skrip lengkap SignupController dapat dilihat pada Gist Github.
Mendaftarkan Method Verifikasi pada Route
Jangan lupa, untuk menambahkan method tersebut pada route. Selain itu, kita juga memberi nama pada path yang didaftarkan.
Route::get('verify', 'SignupController@verify')->name('signup.verify');
Mengkonfigurasi SMTP Email
Ada banyak layanan yang menyediakan SMTP Relay, seperti Mailgun, Google, ElasticEmail, dan lain sebagainya.
Khusus untuk tahap pengembangan, kita bisa menggunakan layanan Mailtrap.io. Nantinya, semua email yang dikirim akan masuk ke dalam satu kotak masuk.
Silakan mendaftar sebagai pengguna di Mailtrap, kemudian ubah pengaturan pada berkas .env
sesuai dengan konfigurasi yang diberikan oleh Mailtrap. Pastikan komputer kalian terhubung dengan internet untuk menggunkan layanan Mailtrap.
Ujicoba
Tahap ujicoba ada beberapa langkah, dan tidak jauh berbeda dengan langkah yang saya jabarkan pada tulisan sebelumnya.
Untuk memastikan fitur berjalan dengan benar, cobalah untuk mengakses halaman /signup dari peramban, isi data pengguna di sana, dan periksa apakah email verifikasi sudah masuk?
Pesan masuk pada Mailtrap
Jika email sudah masuk, cobalah menyalin tautan verifikasi tersebut pada peramban untuk mengaktifkan akun yang terdaftar sebelumnya. Berhasil? Semoga saja aplikasi berjalan dengan sempurna. 😀
Konklusi
Jika kita menggunakan fitur login yang disediakan oleh Laravel, maka status apapun tidak berpengaruh (baik “pending” maupun “activate”). Padahal, semestinya status yang masih “pending” belum bisa login dan butuh verifikasi email terlebih dahulu.
Nah, untuk menangani kasus di atas, kita bisa membuat fitur login sendiri yang juga memeriksa status pengguna. Bahasan membuat login di Laravel akan saya jabarkan pada tulisan berikutnya. 😉
Originally published at www.laravel.web.id on April 25, 2017.