Cara menggunakan PHP dan Vue untuk melaksanakan fungsi kod pengesahan SMS

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

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

2. Pelaksanaan kod back-end

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

<?php
session_start();

// 生成随机的验证码
$verify_code = mt_rand(100000, 999999);

// 将验证码存入session中
$_SESSION['verify_code'] = $verify_code;

// 返回验证码结果
echo json_encode(['code' => $verify_code]);
?>

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

<?php
session_start();

// 获取手机号码
$phone_number = $_POST['phone_number'];

// 获取之前生成的验证码
$verify_code = $_SESSION['verify_code'];

// 调用短信接口发送短信验证码
// 代码略，根据实际短信接口文档编写发送短信的代码

// 返回发送结果
echo json_encode(['success' => true]);
?>

3. Pelaksanaan kod bahagian hadapan

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>

Cipta tika Vue dan tentukan data dan kaedah yang berkaitan, seperti:

2. 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);
           });
       }
     }
   });

Tambahkan borang dan butang yang berkaitan dalam fail HTML, serta logik yang dikaitkan dengan tika Vue, seperti:

3. <div id="app">
     <form>
       <div class="form-group">
         <label for="phone">手机号码</label>
         <input type="text" class="form-control" id="phone" v-model="phoneNumber">
       </div>
       <div class="form-group">
         <label for="code">验证码</label>
         <input type="text" class="form-control" id="code" v-model="verifyCode">
         <button type="button" class="btn btn-primary" @click="generateVerifyCode">获取验证码</button>
       </div>
       <button type="button" class="btn btn-primary" @click="sendSmsCode">发送验证码</button>
     </form>
   </div>

4. Analisis kod

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

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

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

Akhir sekali, keluarkan kod pengesahan melalui echo.

🎜Dapatkan nombor telefon bimbit yang dilalui di bahagian hadapan dan kod pengesahan yang disimpan sebelum ini daripada fail send_sms.php. 🎜🎜Panggil antara muka SMS untuk menghantar SMS kod pengesahan Bahagian ini perlu memanggil antara muka SMS yang sepadan mengikut situasi sebenar. 🎜🎜Akhir sekali hantar hasil melalui output echo. 🎜

🎜🎜Bahagian kod bahagian hadapan: 🎜🎜takrifkan Nombor telefon (nombor telefon mudah alih), verifyCode (kod pengesahan) dan serverUrl (URL antara muka penghantaran SMS) dan data lain. 🎜🎜Kaedah <code>generateVerifyCode menghantar permintaan ke antara muka verify_code.php untuk mendapatkan dan menyimpan kod pengesahan. 🎜🎜Kaedah sendSmsCode menghantar permintaan ke antara muka send_sms.php dan 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 generateVerifyCode dan 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!