Verwendung von PHP und Vue zur Implementierung der SMS-Bestätigungscodefunktion

So verwenden Sie PHP und Vue zur Implementierung der SMS-Bestätigungscodefunktion

Mit der Beliebtheit des Internets und der Beliebtheit mobiler Geräte sind SMS-Bestätigungscodes zu einer gängigen Verifizierungsmethode für viele Websites und APPs geworden. Die SMS-Bestätigungscodefunktion kann einfach mit PHP und Vue implementiert werden. In diesem Artikel werden die Implementierungsschritte im Detail vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Vorbereitung

1. Eine Serverumgebung, die PHP unterstützt, wie Apache, Nginx usw.
2. Vue.js Framework und Axios-Bibliothek können über CDN eingeführt werden.
3. Eine SMS-Bestätigungscode-Schnittstelle, wie z. B. die Alibaba Cloud SMS-Schnittstelle oder die Tencent Cloud SMS-Schnittstelle.

2. Back-End-Code-Implementierung

1. Erstellen Sie eine PHP-Datei für die Generierung von Verifizierungscodes, z. B. „verify_code.php“, und schreiben Sie den folgenden Code in die Datei:

<?php
session_start();

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

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

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

2. Erstellen Sie eine PHP-Datei zum Senden von Textnachrichten , wie send_sms.php, und schreiben Sie den folgenden Code in die Datei:

<?php
session_start();

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

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

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

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

3. Front-End-Code-Implementierung

1. Fügen Sie Vue.js- und Axios-Bibliotheken in die HTML-Datei ein, wie zum Beispiel:

<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. Erstellen Sie eine Vue-Instanz und definieren Sie zugehörige Daten und Methoden, wie zum Beispiel:

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. Fügen Sie zugehörige Formulare und Schaltflächen in der HTML-Datei hinzu, sowie Logik, die mit der Vue-Instanz verknüpft ist, wie zum Beispiel:

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

1. Back-End-Codeteil:
2. Die Datei „Verify_code.php“ verwendet session_start(), um die Sitzung zu öffnen und generiert einen sechsstelligen zufälligen Bestätigungscode über mt_rand(100000, 999999 ) Funktion. 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. "发送验证码"按钮触发sendSmsCode
Speichern Sie dann den Bestätigungscode im Array $_SESSION, um die spätere Verwendung der SMS-Versandschnittstelle zu erleichtern.

Zum Schluss geben Sie den Bestätigungscode über echo aus.

🎜

🎜Holen Sie sich die vom Frontend übergebene Mobiltelefonnummer und den zuvor gespeicherten Bestätigungscode aus der Datei send_sms.php. 🎜🎜Rufen Sie die SMS-Schnittstelle auf, um die Bestätigungscode-SMS zu senden. Dieser Teil muss entsprechend der tatsächlichen Situation die entsprechende SMS-Schnittstelle aufrufen. 🎜🎜Schließlich das Ergebnis über die echo-Ausgabe senden. 🎜

🎜🎜Front-End-Codeteil: 🎜🎜Definieren Sie phoneNumber (Mobiltelefonnummer), verifyCode (Bestätigungscode) und serverUrl (URL der SMS-Versandschnittstelle) und andere Daten. 🎜🎜Die Methode <code>generateVerifyCode sendet eine Anfrage an die Schnittstelle verify_code.php, um den Bestätigungscode abzurufen und zu speichern. 🎜🎜Die Methode sendSmsCode sendet eine Anfrage an die Schnittstelle send_sms.php und sendet die Mobiltelefonnummer und den Bestätigungscode als POST-Parameter an das Backend. 🎜🎜HTML-Teil: 🎜🎜Binden Sie die Daten jedes Formularsteuerelements und der Vue-Instanz über v-model in zwei Richtungen. 🎜🎜Die Schaltfläche „Verifizierungscode abrufen“ löst die Methode generateVerifyCode aus und zeigt den Bestätigungscode an. 🎜🎜Die Schaltfläche „Bestätigungscode senden“ löst die Methode sendSmsCode aus, um die Mobiltelefonnummer und den Bestätigungscode an das Backend zu senden. 🎜🎜🎜Durch die oben genannten Schritte und Codes haben wir die SMS-Bestätigungscodefunktion mit PHP und Vue implementiert. In tatsächlichen Anwendungen müssen entsprechende Schnittstellenauthentifizierung, Fehlerbehandlung usw. entsprechend den spezifischen Anforderungen durchgeführt werden. 🎜

Das obige ist der detaillierte Inhalt vonVerwendung von PHP und Vue zur Implementierung der SMS-Bestätigungscodefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!