PHPとVueを使ってSMS認証コード機能を実装する方法

PHP と Vue を使用して SMS 検証コード機能を実装する方法

インターネットの普及とモバイル デバイスの普及に伴い、SMS 検証コードは一般的になりました。多くの Web サイトやアプリで使用される識別方法。 SMS認証コード機能はPHPとVueを使えば簡単に実装できますので、本記事ではその実装手順と具体的なコード例を詳しく紹介します。

1. 事前の準備

1. Apache、Nginx などの PHP をサポートするサーバー環境。
2. Vue.js フレームワークと axios ライブラリは CDN を通じて導入できます。
3. Alibaba Cloud SMS インターフェイスや Tencent Cloud SMS インターフェイスなどの SMS 検証コード インターフェイス。

2. バックエンド コードの実装

1. 検証コード生成用の PHP ファイル (verify_code.php など) を作成し、そのファイルに次のコードを記述します。
##

<?php
session_start();

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

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

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

テキスト メッセージを送信するための PHP ファイル (send_sms.php など) を作成し、そのファイルに次のコードを記述します:

<?php
session_start();

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

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

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

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

3. Front-コードの実装を終了

Vue.js および axios ライブラリを HTML ファイルに導入します。例:

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

Vue インスタンスを作成し、関連するデータとメソッドを定義します。例:

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

関連するフォームとボタンを HTML ファイルに追加するだけでなく、Vue インスタンスに関連付けられたロジックも追加します (例:

<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. コード分析

バックエンド コード部分:
1. verify_code.php ファイルは、
2. session_start() を使用してセッションを開き、## を通じて 6 を生成します。 #mt_rand(100000, 999999) ランダムな検証コードの関数桁。 次に、確認コードを
$_SESSION
3. 配列に保存して、SMS 送信インターフェイスを後で簡単に使用できるようにします。 最後に、
echo
4. を通じて検証コードを出力します。

フロントエンドによって渡された携帯電話番号と、以前に保存された確認コードを send_sms.php ファイルから取得します。

• SMS インターフェイスを呼び出して確認コード SMS を送信します。この部分は、実際の状況に応じて、対応する SMS インターフェイスを呼び出す必要があります。
• 最後に、
echo
• 出力を通じて結果を送信します。

フロントエンド コード部分:

2. は、
phoneNumber
3. (携帯電話番号)、verifyCode (検証コード) を定義します。 Vue インスタンス ) と serverUrl (SMS 送信インターフェイスの URL) およびその他のデータ。
generateVerifyCode
4. メソッドは、検証コードを取得して保存するリクエストを verify_code.php インターフェイスに送信します。
sendSmsCode
5. メソッドは、リクエストを send_sms.php インターフェイスに送信し、携帯電話番号と確認コードを POST パラメーターとしてバックエンドに送信します。 HTML 部分:
6. 各フォーム コントロールと Vue インスタンスのデータを
v-model
7. を介して双方向にバインドします。 [確認コードの取得] ボタンは、
generateVerifyCode
8. メソッドをトリガーして確認コードを表示します。 [確認コードの送信] ボタンは、
sendSmsCode
9. メソッドをトリガーして、携帯電話番号と確認コードをバックエンドに送信します。
上記の手順とコードにより、PHP と Vue を使用して SMS 認証コード機能を実装しました。実際のアプリケーションでは、特定のニーズに応じて、対応するインターフェイスの認証、エラー処理などを実行する必要があります。

以上がPHPとVueを使ってSMS認証コード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。