Langsung ke konten utama

Reset Password Laravel 8 API

Pada kasus kali ini saya menggunakan Laravel 8 (buat API) frontend Vue Js:

Pertama siapkan routingnya pada folder routes - api.php

Route::post('forgot-password', [UserController::class'forgotPassword']);
Route::post('reset-password', [UserController::class'resetPassword']);

 

Tambahkan di UserController.php atau anda bisa nambah controller baru.

public function forgotPassword(Request $request)
    {
        $request->validate(['email' => 'required|email']);

        $status = Password::sendResetLink(
            $request->only('email')
        );

        if($status == Password::RESET_LINK_SENT){
            return [
                'status' => __($status)
            ];
        }

        throw ValidationException::withMessages([
            'email' => [trans($status)],
        ]);
    }

    public function resetPassword(Request $request)
    {
        $request->validate([
            'token' => 'required',
            'email' => 'required|email',
            'password' => ['required''confirmed'RulesPassword::defaults()],
        ]);

        $status = Password::reset(
            $request->only('email''password''password_confirmation''token'),
            function ($useruse ($request) {
                $user->forceFill([
                    'password'=> Hash::make($request->password),
                    'remember_token' => Str::random(60),
                ])->save();

                event(new PasswordReset($user));
            }
        );

        if($status == Password::PASSWORD_RESET){
            return response([
                'message' => 'Password reset successfully'
            ]);
        }

        return response([
            'message' => __($status)
        ], 500);
    }

 Tambahkan di model User.php

public function sendPasswordResetNotification($token)
    {
        $url = 'http://localhost:8000/reset-password?token=' . $token;

        $this->notify(new ResetPasswordNotification($url));
    }

 Jalankan notification reset password melalui terminal

php artisan make:notification ResetPasswordNotification 

 Lalu buka file ResetPasswordNotification.php

Tambahkan url 

public $url;
 
public function __construct(string $url)
{
    $this->url = $url;
}
 
public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->line('Forgot Password?')
                    ->action('Click to reset'$this->url)
                    ->line('Thank you for using our application!');
    }
 

 Langkah selanjutnya tinggal testing apakah berjalan dengan lancar

http://localhost:8000/api/forgot-password
{
  "status": "We have emailed your password reset link!"
}
artinya sudah dikirim ke email
 

http://localhost:8000/api/reset-password

 

Jangan lupa samakan ubah config .env 

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=xxxx
MAIL_PASSWORD=xxxx
MAIL_ENCRYPTION=tls

Jika menggunakan gmail setting dulu di bagian keamanan - akses aplikasi yang kurang aman di uncheclist.
MAIL_MAILER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=72ce0f2cdeb928 MAIL_PASSWORD=80c25747b32926 MAIL_ENCRYPTION=tls

Komentar

Postingan populer dari blog ini

Apa itu API

Bagaimana membuat aplikasi atau website dengan performa yang baik? Bagaimana membuat website yang mudah dikembangkan di berbagai platform? Bagaimana mengintegrasikan website dengan aplikasi yang berbeda bahasa pemrograman? Jawabannya adalah dengan membuat API. Untuk membuat API, arsitektur yang paling populer yaitu RESTful API.   Pada tutorial kali ini saya akan sharing bagaimana membuat RESTful API menggunakan node.js, express, dan MySQL secara step by step. Api itu RESTful API? RESTful API  merupakan implementasi dari API  ( Application Programming Interface ). REST (REpresentational State Transfer) adalah suatu arsitektur metode komunikasi yang menggunakan protocol HTTP untuk pertukaran data dan metode ini sering diterapkan dalam pengembangan aplikasi. Mungkin terdengar rumit tapi sebenarnya tidak. Tujuannya untuk menjadikan system dengan performa yang baik, cepat, dan mudah untuk dikembangkan ( scale ) terutama dalam pertukaran dan komunikasi data...

Arsitektur & Organisasi Komputer

    Arsitektur Komputer  Dalam bidang teknik komputer, arsitektur komputer adalah konsep perencanaan dan struktur pengoperasian dasar dari suatu sistem komputer. Arsitektur komputer ini merupakan rencana cetak-biru dan deskripsi fungsional dari kebutuhan bagian perangkat keras yang didesain (kecepatan proses dan sistem interkoneksinya). Dalam hal ini, implementasi perencanaan dari masing–masing bagian akan lebih difokuskan terutama, mengenai bagaimana CPU akan bekerja, dan mengenai cara pengaksesan data dan alamat dari dan ke memori cache, RAM, ROM, cakram keras, dll). Beberapa contoh dari arsitektur komputer ini adalah arsitektur von Neumann, CISC, RISC, blue Gene, dll.     Arsitektur komputer juga dapat didefinisikan dan dikategorikan sebagai ilmu dan sekaligus seni mengenai cara interkoneksi komponen-komponen perangkat keras untuk dapat menciptakan sebuah komputer yang memenuhi kebutuhan fungsional, kinerja, dan target biayanya. Arsitektur komputer ini...

How to use CKEditor in Nuxt Js

Requirement:  Node 14.18.3 NPM 6.14.15 Yarn 1.22.4 yarn add @ckeditor/ckeditor5-vue@23.0.0 yarn add @blowstack/ckeditor5-full-free-build@1.0.2 // plugins/ckeditor.vue import Vue from ' vue ' import CKEditor from ' @ckeditor/ckeditor5-vue ' Vue . use ( CKEditor ) // components/CkEditor.vue < template > < ckeditor : editor = " editor " : value = " value " : config = " config " @ input = " ( event ) => $emit ( ' input ' , event) " /> </ template > < script > let FullFreeBuildEditor; let CKEditor; if (process . client ) { FullFreeBuildEditor = require ( ' @blowstack/ckeditor5-full-free-build ' ); CKEditor = require ( ' @ckeditor/ckeditor5-vue ' ); } else { CKEditor = { component: { template: ' <div></div> ' } }; } export default { name: ' CkEditor ' , components: { ckeditor: CKEditor . component , }, p...