Comment utiliser PHP et Vue pour implémenter la fonction de code de vérification SMS

Comment utiliser PHP et Vue pour implémenter la fonction de code de vérification SMS

Avec la popularité d'Internet et la popularité des appareils mobiles, les codes de vérification SMS sont devenus une méthode de vérification courante pour de nombreux sites Web et applications. La fonction de code de vérification SMS peut être facilement implémentée à l'aide de PHP et Vue. Cet article présentera les étapes de mise en œuvre en détail et fournira des exemples de code spécifiques.

1. Préparation

1. Un environnement serveur prenant en charge PHP, tel qu'Apache, Nginx, etc.
2. Le framework Vue.js et la bibliothèque axios peuvent être introduits via CDN.
3. Une interface de code de vérification SMS, telle que l'interface SMS Alibaba Cloud ou l'interface SMS Tencent Cloud.

2. Implémentation du code back-end

1. Créez un fichier PHP pour la génération du code de vérification, tel que verify_code.php, et écrivez le code suivant dans le fichier :

<?php
session_start();

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

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

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

2. Créez un fichier PHP pour l'envoi de messages texte , tel que send_sms.php, et écrivez le code suivant dans le fichier :

<?php
session_start();

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

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

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

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

3. Implémentation du code frontal

1. Introduisez les bibliothèques Vue.js et axios dans le fichier HTML, telles que :

<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. Créez une instance Vue et définissez les données et méthodes associées, telles que :

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. Ajoutez des formulaires et des boutons associés dans le fichier HTML, ainsi que la logique associée à l'instance Vue, telles que :

<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. Analyse du code

1. Partie code back-end :
2. Le fichier verify_code.php utilise session_start() pour ouvrir la session et génère un code de vérification aléatoire à six chiffres via le mt_rand(100000, 999999 ) fonction. 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
Stockez ensuite le code de vérification dans le tableau $_SESSION pour faciliter l'utilisation ultérieure de l'interface d'envoi de SMS.

Enfin, affichez le code de vérification via echo.

🎜

🎜Obtenez le numéro de téléphone mobile transmis par le front-end et le code de vérification précédemment stocké à partir du fichier send_sms.php. 🎜🎜Appelez l'interface SMS pour envoyer le code de vérification SMS. Cette partie doit appeler l'interface SMS correspondante en fonction de la situation réelle. 🎜🎜Enfin, envoyez le résultat via la sortie echo. 🎜

🎜🎜Partie du code frontal : 🎜🎜définissez phoneNumber (numéro de téléphone portable), verifyCode (code de vérification) et serverUrl (URL de l'interface d'envoi de SMS) et autres données. 🎜🎜La méthode <code>generateVerifyCode envoie une requête à l'interface verify_code.php pour obtenir et stocker le code de vérification. 🎜🎜La méthode sendSmsCode envoie une requête à l'interface send_sms.php et envoie le numéro de téléphone mobile et le code de vérification au backend en tant que paramètres POST. 🎜🎜Partie HTML : 🎜🎜Liez les données de chaque contrôle de formulaire et l'instance Vue via v-model dans deux directions. 🎜🎜Le bouton « Obtenir le code de vérification » déclenche la méthode generateVerifyCode et affiche le code de vérification. 🎜🎜Le bouton « Envoyer le code de vérification » déclenche la méthode sendSmsCode pour envoyer le numéro de téléphone mobile et le code de vérification au backend. 🎜🎜🎜Grâce aux étapes et au code ci-dessus, nous avons implémenté la fonction de code de vérification SMS en utilisant PHP et Vue. Dans les applications réelles, l'authentification d'interface correspondante, la gestion des erreurs, etc. doivent être traitées en fonction de besoins spécifiques. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!