OTP adalah cara yang efektif untuk memvalidasi user. Jenis validasi ini banyak diikuti oleh aplikasi perbankan, perangkat lunak e-commerce, dan masih banyak lagi. Dalam tutorial ini, kita akan melihat bagaimana menerapkan verifikasi nomor ponsel OTP SMS menggunakan PHP.
Ada berbagai API yang tersedia di market untuk mengirim SMS melalui aplikasi. Dalam kode ini, saya telah menggunakan API Textlocal untuk mengirim SMS OTP. Textlocal adalah salah satu layanan SMS populer. Ini menyediakan layanan SMS untuk banyak bahasa pemrograman. Download kelas API PHP untuk mengintegrasikannya ke dalam platform aplikasi.
Dalam contoh ini, saya menggunakan dua form HTML. Satu untuk mendapatkan nomor ponsel dan yang lain untuk mendapatkan OTP. Dengan mengirimkan form, permintaan AJAX akan dikirim untuk mengakses PHP untuk mengirim kode OTP dan untuk memvalidasinya dengan data session PHP.
Get Mobile Number untuk Mengirim OTP
Ini merupakan halaman arahan yang akan menampilkan form HTML untuk memastikan nomor ponsel pengguna diverifikasi. Saat mengirimkan nomor ponsel dengan mengklik tombol kirim OTP, kode AJAX akan dieksekusi untuk meminta PHP mengirim OTP melalui SMS menggunakan Textlocal API.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>How to Implement OTP SMS Mobile Verification in PHP with TextLocal</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="error"></div> <form id="frm-mobile-verification"> <div class="form-heading">Mobile Number Verification</div> <div class="form-row"> <input type="number" id="mobile" class="form-input" placeholder="Enter the 10 digit mobile"> </div> <input type="button" class="btnSubmit" value="Send OTP" onClick="sendOTP();"> </form> </div> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script src="verification.js"></script> </body> </html> |
Form HTML untuk Kirim OTP untuk Verifikasi
HTMLÂ yang akan dimuat oleh AJAX setelah mengirim OTP ke nomor ponsel pengguna. Pengguna harus mengirimkan OTP yang diterima melalui formulir ini. Kode OTP yang dihasilkan disimpan dalam variabel session PHP. Data session ini akan digunakan untuk memverifikasi OTP yang dimasukkan sudah benar atau tidak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="error"></div> <div class="success"></div> <form id="frm-mobile-verification"> <div class="form-row"> <label>OTP is sent to Your Mobile Number</label> </div> <div class="form-row"> <input type="number" id="mobileOtp" class="form-input" placeholder="Enter the OTP"> </div> <div class="row"> <input id="verify" type="button" class="btnVerify" value="Verify" onClick="verifyOTP();"> </div> </form> |