Menerapkan Login OTP di proyek Aplikasi Laravel

Menerapkan Login OTP di proyek Aplikasi Laravel

Di sebagian besar situs web, mereka menerapkan login dengan otp .

Hari ini saya akan menulis tentang topik ini tentang mengintegrasikan sistem login otp pada halaman login default laravel.

Kami juga membutuhkan api SMS untuk mengirim otp dari logika kode situs web . Jadi, bersiaplah untuk api SMS Anda.

Jika Anda tidak memiliki api SMS maka tidak masalah untuk saat ini. Mari kita gali, Anda dapat menguji tanpa api SMS.

Tutorial di bawah ini mengasumsikan Anda sudah menginstal aplikasi laravel.

Langkah mengimplementasikan login OTP pada aplikasi Laravel.

1. Buat tabel database 'phone_verification'

Pertama-tama kita perlu membuat tabel database 'phone_verification' . Di mana kita akan menempatkan OTP yang dikirimkan ke pengguna untuk divalidasi saat pengguna memasukkan otp.

Jalankan sql di bawah ini untuk membuat tabel database ini.

Anda dapat mengeksekusi di tab 'SQL' phpmyadmin Anda

Kita juga perlu menambahkan bidang baru 'telepon' ke tabel 'pengguna'. Jalankan sql di bawah ini untuk menambahkan bidang ini pada tabel 'pengguna'

ALTER TABLE `users` ADD `phone` VARCHAR(15) NULL DEFAULT NULL AFTER `email`; 

2. buat phone_verification.js yang berisi jquery untuk  mengirim dan memvalidasi otp

Sekarang saya akan membuat phone_verification.js . Ini terutama akan berisi otp send dan validasi kode javascript.

kita menggunakannya dengan jquery. Jadi, pastikan Anda sudah memasukkan jquery di aplikasi laravel Anda.

Di bawah kode lengkap file ini.

Saya telah meletakkannya di bawah jalur situs web laravel saya

public\front\assets\js\phone_verification.js

3. Tambahkan jquery dan phone_verification.js di dalam resources/views/app.blade.php

Buka file master template frontend laravel Anda dan tambahkan di bawah ini

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> var url="{{url('/')}}";  

Saya juga telah membuat bagian 'footer' . File app.blade.php lengkap saya.

4. Edit file login.blade.php default

Mari kita edit file login.blade.php default yang disediakan oleh sistem otentikasi bootstrap laravel.

Anda dapat mengambil cadangan file ini dan mengeditnya. 

Di sini kita harus menghapus bidang kata sandi dan menambahkan bidang otp dengan beberapa fungsi javascript untuk logika kita. Anda dapat mengganti dengan kode saya di bawah ini ke resources/views/auth/login.blade.php

 

5. Perbarui register.blade.php

Karena kita membuat login dengan OTP. bidang nomor telepon harus. Jadi, mari tambahkan bidang telepon di register default.blade.php underresources\views\layouts\auth\

Kode lengkap saya untuk file ini

Sekarang Anda dapat mendaftar untuk pengujian di halaman login

6. Tambahkan pada file route

Route di bawah ini akan menangani permintaan url untuk pengiriman OTP dan validasi OTP.

Letakkan di bawah ini di dalam route/web.php.

Route::get('/ajax/ajax_otp_send_for_login', 

      ['uses' => 'App\Http\Controllers\SMSController@ajax_otp_send_for_login']);  

      

  Route::get('/ajax/check_otp_for_login_with_phone', 

      ['uses' => 'App\Http\Controllers\SMSController@check_otp_for_login_with_phone']); 

7. Tambahkan file modal PhoneVerification.php

Sekarang tambahkan file modal PhoneVerification.php di dalam app\Models

<?php

  namespace App\Models;

  use Illuminate\Database\Eloquent\Model;

  class PhoneVerification extends Model

  {

      protected $primaryKey = 'pv_id';

   protected $table = 'phone_verification';

   

      protected $fillable = array('phone','otp','is_verified');

   

     

   

  } 

Buka juga file modal User.php dan tambahkan 'telepon' di dalam array $ yang dapat diisi

ex

 protected $fillable = [

         'name', 'email','phone','status','password',

     ]; 

Tidak ada perubahan lain yang diperlukan dalam file modal user.php ini.

8. Buat file pengontrol baru SMSController.php

Mari kita kerjakan bagian utama dari tutorial ini.

Buat SMScontroller.php baru di dalam app\Http\Controllers .

Ini akan memiliki 3 fungsi

1.sms_send

Fungsi pertama 'sms_send' akan menangani panggilan API SMS . Kami akan menggunakan fungsi ini untuk memanggil permintaan pengiriman sms ke API.

2.ajax_otp_send_for_login

Fungsi ini menangani logika pengiriman otp. Itu membuat OTP dan menyimpan ke meja kami 'phone_verification' kemudian mengirim OTP ke nomor telepon pengguna

3.check_otp_for_login_with_phone

Fungsi ini menangani logika validasi otp yang dimasukkan oleh pengguna.

Catatan:

Ganti 'PUT_API_KEY_HERE' dan 'PUT_SENDER_ID_HERE' dengan nilai asli Anda.

Kode lengkap akhir dari SMSController.php

9. Perbarui RegisterController.php

Sekarang perbarui RegisterController.php di dalam app\Http\Controllers\Auth

Menambahkan kolom 'telepon'. Jadi, formulir register baru itu akan dapat mengirim nilai bidang 'telepon' ke tabel basis data 'pengguna'.

File RegisterController.php saya yang telah diedit

Sekarang, Anda siap untuk login dengan OTP di aplikasi laravel Anda.

Anda dapat membuka url login

 <url> /login 

maka Anda dapat memasukkan nomor ponsel Anda untuk menguji sistem OTP.

Catatan:

Jika Anda tidak memiliki SMS api saat ini, Anda dapat meninggalkan fungsi 'sms_send' dari SMSController.php . Berarti tidak mengedit apa pun.

Kemudian Anda dapat menemukan OTP dari tabel database 'phone_verification' dan menggunakannya di layar login.