How to use PHP and Vue to implement SMS verification code function

How to use PHP and Vue to implement the SMS verification code function

With the popularity of the Internet and the popularity of mobile devices, SMS verification codes have become commonly used on many websites and APPs Ways of identifying. The SMS verification code function can be easily implemented using PHP and Vue. This article will introduce the implementation steps in detail and provide specific code examples.

1. Early preparation

1. A server environment that supports PHP, such as Apache, Nginx, etc.
2. The Vue.js framework and axios library can be introduced through CDN.
3. A SMS verification code interface, such as Alibaba Cloud SMS interface or Tencent Cloud SMS interface.

2. Back-end code implementation

1. Create a PHP file for verification code generation, such as verify_code.php, and write the following code in the file:

<?php
session_start();

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

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

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

2. Create a PHP file for sending text messages, such as send_sms.php, and write the following code in the file:

<?php
session_start();

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

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

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

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

3. Front-end code implementation

1. Introduce Vue.js and axios libraries into the HTML file, for example:

<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>

2. Create a Vue instance and define relevant data and methods, for example:

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

3. Add related forms and buttons in the HTML file, as well as logic associated with the Vue instance, such as:

<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. Code analysis

1. Backend code part:
2. verify_code.php file uses session_start() to open the session, and generates a six through the mt_rand(100000, 999999) function digits of random verification code.
3. Then store the verification code in the $_SESSION array to facilitate subsequent use of the SMS sending interface.
4. Finally output the verification code through echo.

• Get the mobile phone number passed by the front end and the previously stored verification code from the send_sms.php file.
• Call the SMS interface to send the verification code SMS. This part needs to call the corresponding SMS interface according to the actual situation.
• Finally send the result through echo output.

2. Front-end code part:
3. defines phoneNumber (mobile phone number), verifyCode (verification code) in the Vue instance ) and serverUrl (the URL of the SMS sending interface) and other data. The
4. generateVerifyCode method sends a request to the verify_code.php interface to obtain and store the verification code. The
5. sendSmsCode method sends a request to the send_sms.php interface, and sends the mobile phone number and verification code to the backend as POST parameters.
6. HTML part:
7. Bind each form control and the data of the Vue instance in two directions through v-model.
8. The "Get Verification Code" button triggers the generateVerifyCode method to display the verification code.
9. The "Send Verification Code" button triggers the sendSmsCode method to send the mobile phone number and verification code to the backend.

Through the above steps and codes, we have implemented the SMS verification code function using PHP and Vue. In actual applications, corresponding interface authentication, error handling, etc. need to be carried out according to specific needs.

The above is the detailed content of How to use PHP and Vue to implement SMS verification code function. For more information, please follow other related articles on the PHP Chinese website!