快捷導(dǎo)航

在uniapp中實(shí)現(xiàn)圖形驗(yàn)證碼的詳細(xì)步驟

更新時(shí)間：2024年11月08日 09:18:05 作者：小那同學(xué)

圖形驗(yàn)證碼是一種常見(jiàn)的安全措施,用于防止自動(dòng)化軟件（機(jī)器人）濫用網(wǎng)站資源,如自動(dòng)提交表單,這篇文章主要介紹了在uniapp中實(shí)現(xiàn)圖形驗(yàn)證碼的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

什么是圖形驗(yàn)證碼？

圖形驗(yàn)證碼（也稱為圖片驗(yàn)證碼或驗(yàn)證碼圖像）通常用于防止機(jī)器人自動(dòng)提交表單，確保用戶是人工操作。

一、需求

我們希望在一個(gè)表單中實(shí)現(xiàn)以下功能：

1.用戶輸入手機(jī)號(hào)。

2.用戶看到一個(gè)圖形驗(yàn)證碼，并輸入驗(yàn)證碼內(nèi)容。

3.用戶點(diǎn)擊“發(fā)送短信”按鈕，發(fā)送驗(yàn)證碼到指定手機(jī)號(hào)。

二、實(shí)現(xiàn)步驟

2.1 項(xiàng)目準(zhǔn)備

創(chuàng)建一下一個(gè)uniapp項(xiàng)目，項(xiàng)目名稱自擬。

2.2 頁(yè)面結(jié)構(gòu)

首先，我們?cè)O(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面布局，其中包括手機(jī)號(hào)輸入框、圖形驗(yàn)證碼圖片、驗(yàn)證碼輸入框以及發(fā)送短信按鈕。

<template>
  <view class="container">
    <view class="phone-container">
      <view class="label-title">
            手機(jī)號(hào)<label>*</label>
      </view>
      <input 
           v-model="phone"
           placeholder="請(qǐng)輸入手機(jī)號(hào)"
           type="number"
           maxlength="11" />
    </view>
    <view class="verification-container">
      <img
        :src="captchaImage"
        alt="驗(yàn)證碼"
        class="captcha"
        @click="refreshCaptcha"
      />
      <input 
        v-model="verificationCode" 
        placeholder="請(qǐng)輸入驗(yàn)證碼" 
        maxlength="4" 
        type="number" 
        class="verification-input" />
    </view>
    <button @click="sendSMS" class="sendBtn">發(fā)送短信</button>
  </view>
</template>

2.3 處理數(shù)據(jù)和方法

接下來(lái)，我們將處理數(shù)據(jù)和方法的部分。

在 data 中定義手機(jī)號(hào)、驗(yàn)證碼輸入、圖形驗(yàn)證碼等字段。

在 methods 中，我們需要實(shí)現(xiàn)以下幾個(gè)功能：

generateCaptcha：生成一個(gè)隨機(jī)的圖形驗(yàn)證碼。

refreshCaptcha：點(diǎn)擊圖形驗(yàn)證碼時(shí)刷新驗(yàn)證碼。

sendSMS：點(diǎn)擊發(fā)送短信按鈕時(shí)觸發(fā)發(fā)送短信的邏輯。

<script>
export default {
  data() {
    return {
      phone: '',             // 用戶輸入的手機(jī)號(hào)
      verificationCode: '', // 用戶輸入的驗(yàn)證碼
      captchaImage: '',     // 圖形驗(yàn)證碼圖片地址
    };
  },
  methods: {
    sendSMS() {
      /*
       * 發(fā)送短信
       */
      console.log('發(fā)送短信到:', this.phone);
    },
    generateCaptcha() {
      /*
       * 生成一個(gè)隨機(jī)的驗(yàn)證碼并顯示為圖片
       */
       // 生成一個(gè)4位數(shù)的驗(yàn)證碼
      const captcha = Math.floor(1000 + Math.random() * 9000);
       // 使用一個(gè)免費(fèi)的圖片生成服務(wù)
      this.captchaImage = `https://dummyimage.com/100x40/000/fff&text=${captcha}`; 
    },
    refreshCaptcha() {
      /*
       * 刷新驗(yàn)證碼
       */
      this.generateCaptcha(); // 重新生成驗(yàn)證碼
    },
  },
  mounted() {
    /*
     * 頁(yè)面加載時(shí)生成驗(yàn)證碼
     */
    this.generateCaptcha();
  },
};
</script>

2.4 CSS樣式

<style>
.container {
  padding: 20px;
}

.phone-container {
  margin-bottom: 20px;
}

.label-title {
  font-size: 16px;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.verification-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.captcha {
  width: 100px;
  height: 40px;
  margin-right: 10px;
  cursor: pointer;
}

.verification-input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.sendBtn {
  background-color: #00ac56;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.sendBtn:hover {
  background-color: #008c4e;
}
</style>

三、圖形驗(yàn)證碼實(shí)現(xiàn)邏輯

生成驗(yàn)證碼：使用一個(gè)免費(fèi)的圖片生成服務(wù)（https://dummyimage.com/）來(lái)生成驗(yàn)證碼。我們生成一個(gè)隨機(jī)的4位數(shù)，然后通過(guò) dummyimage.com 服務(wù)生成帶有文本的圖片作為驗(yàn)證碼。

刷新驗(yàn)證碼：當(dāng)用戶點(diǎn)擊驗(yàn)證碼圖片時(shí)，調(diào)用 refreshCaptcha 方法重新生成一個(gè)新的驗(yàn)證碼。