Cara menggunakan PHP dan Vue untuk melaksanakan fungsi kod pengesahan SMS-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi kod pengesahan SMS

Dengan populariti Internet dan populariti peranti mudah alih, kod pengesahan SMS telah menjadi kaedah pengesahan biasa untuk banyak tapak web dan APP. Fungsi kod pengesahan SMS boleh dilaksanakan dengan mudah menggunakan PHP dan Vue Artikel ini akan memperkenalkan langkah pelaksanaan secara terperinci dan memberikan contoh kod khusus.

1. Persediaan

Persekitaran pelayan yang menyokong PHP, seperti Apache, Nginx, dll.
Rangka kerja Vue.js dan perpustakaan axios boleh diperkenalkan melalui CDN.
Antara muka kod pengesahan SMS, seperti antara muka SMS Awan Alibaba atau antara muka SMS Awan Tencent.

2. Pelaksanaan kod back-end

Buat fail PHP untuk penjanaan kod pengesahan, seperti verify_code.php, dan tulis kod berikut dalam fail:

 $verify_code]); ?>

Salin selepas log masuk

Buat fail PHP untuk menghantar mesej teks , seperti send_sms. php, dan tulis kod berikut dalam fail:

 true]); ?>

Salin selepas log masuk

3. Pelaksanaan kod bahagian hadapan

Perkenalkan perpustakaan Vue.js dan axios ke dalam fail HTML, seperti:

Salin selepas log masuk

new Vue({ el: '#app', data: { phoneNumber: '', verifyCode: '', serverUrl: '/send_sms.php' }, methods: { // 生成验证码 generateVerifyCode: function() { axios.get('/verify_code.php') .then(function(response) { this.verifyCode = response.data.code; }.bind(this)) .catch(function(error) { console.log(error); }); }, // 发送短信验证码 sendSmsCode: function() { axios.post(this.serverUrl, { phone_number: this.phoneNumber }) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); }); } } });

Salin selepas log masuk

   手机号码  
  验证码

Salin selepas log masuk

Fail verify_code.php menggunakansession_start()untuk membuka sesi dan menjana kod pengesahan rawak enam digit melaluimt_rand(100000, 999999 )fungsi.
session_start()开启了会话，并通过mt_rand(100000, 999999)函数生成一个六位数的随机验证码。
然后将验证码存入$_SESSION数组中，方便之后的短信发送接口使用。
最后通过echo输出验证码。

send_sms.php文件中获取前端传递的手机号码和之前存储的验证码。
调用短信接口发送验证码短信，这部分需要根据实际情况调用相应的短信接口。
最后通过echo输出发送结果。

前端代码部分：
在Vue实例中定义了phoneNumber（手机号码）、verifyCode（验证码）和serverUrl（短信发送接口的URL）等数据。
generateVerifyCode方法发送请求给verify_code.php接口，获取并存储验证码。
sendSmsCode方法发送请求给send_sms.php接口，将手机号码和验证码作为POST参数发送给后端。
HTML部分：
将各表单控件与Vue实例的数据通过v-model双向绑定。
"获取验证码"按钮触发generateVerifyCode方法，显示验证码。
"发送验证码"按钮触发sendSmsCodeKemudian simpan kod pengesahan dalam tatasusunan$_SESSIONuntuk memudahkan penggunaan seterusnya antara muka penghantaran SMS.

echo

Nombor telefon (nombor telefon mudah alih), verifyCode(kod pengesahan) dan

serverUrl (URL antara muka penghantaran SMS) dan data lain. Kaedah generateVerifyCodemenghantar permintaan ke antara muka
         verify_code.phpuntuk mendapatkan dan menyimpan kod pengesahan. Kaedah
         sendSmsCodemenghantar permintaan ke antara muka
         send_sms.phpdan menghantar nombor telefon mudah alih dan kod pengesahan ke bahagian belakang sebagai parameter POST. Bahagian HTML: Ikat data setiap kawalan borang dan tika Vue melalui
         
          v-model
         dalam dua arah. Butang "Dapatkan Kod Pengesahan" mencetuskan kaedah
         generateVerifyCodedan memaparkan kod pengesahan. Butang "Hantar Kod Pengesahan" mencetuskan kaedah
         
          sendSmsCode untuk menghantar nombor telefon mudah alih dan kod pengesahan ke bahagian belakang. Melalui langkah dan kod di atas, kami telah melaksanakan fungsi kod pengesahan SMS menggunakan PHP dan Vue. Dalam aplikasi sebenar, pengesahan antara muka yang sepadan, pengendalian ralat, dll. perlu dijalankan mengikut keperluan khusus.


        Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi kod pengesahan SMS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!