Java結(jié)合uniapp實(shí)現(xiàn)驗(yàn)證碼功能的示例詳解
更新時(shí)間：2024年07月25日 08:47:29 作者：碼農(nóng)研究僧
UniApp 是一個(gè)基于 Vue.js 的跨平臺(tái)應(yīng)用開發(fā)框架,允許開發(fā)者使用統(tǒng)一的代碼庫來構(gòu)建多平臺(tái)應(yīng)用,這篇文章將給大家介紹Java結(jié)合uniapp實(shí)現(xiàn)驗(yàn)證碼功能,文中通過詳細(xì)的代碼示例講解的非常詳細(xì),需要的朋友可以參考下
本次的Demo主要以圖片驗(yàn)證碼的方式輸入和接收
初始界面如下：
改造之后的界面如下：
1. Java
引入驗(yàn)證碼
<!-- 驗(yàn)證碼 -->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
</dependency>
設(shè)置驗(yàn)證碼的key以及image
下方的redisTemplate 為RedisTemplate<String, Object> redisTemplate
@GetMapping("/oauth/captcha")
public Kv captcha() {
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
String verCode = specCaptcha.text().toLowerCase();
String key = StringUtil.randomUUID();
// 存入redis并設(shè)置過期時(shí)間為30分鐘
redisTemplate.opsForValue().setEx(CacheNames.CAPTCHA_KEY + key, verCode, Duration.ofMinutes(30));
// 將key和base64返回給前端
return Kv.create().set("key", key).set("image", specCaptcha.toBase64());
}
其中Kv為我的工具類，對(duì)應(yīng)的create()其實(shí)是new一個(gè)對(duì)象而已
2. uniapp
驗(yàn)證碼處理:
refreshCode 方法用于獲取新的驗(yàn)證碼圖片，并更新 captchaImg
點(diǎn)擊驗(yàn)證碼圖片會(huì)觸發(fā) refreshCode 方法，用戶可以獲取新的驗(yàn)證碼以便重新輸入
登錄邏輯:
在 login 方法中，首先檢查用戶名、密碼和驗(yàn)證碼是否為空。如果為空，則通過 uni.$u.toast 提示用戶
將密碼使用 MD5 加密后，與用戶名和其他參數(shù)一起發(fā)送到服務(wù)器進(jìn)行登錄驗(yàn)證
登錄成功后，使用 uni.$store.commit 保存 token，并存儲(chǔ)當(dāng)前時(shí)間到本地存儲(chǔ)中，然后跳轉(zhuǎn)到主頁面
響應(yīng)式布局:
根據(jù)屏幕的寬高比例調(diào)整登錄框的位置和寬度，確保在不同設(shè)備上都有良好的顯示效果
錯(cuò)誤處理:
使用 uni.$u.toast 提示用戶登錄失敗的原因，以便可以進(jìn)行必要的調(diào)整
其中的圖片還有路徑等細(xì)節(jié) ，可放置個(gè)人的東西
對(duì)應(yīng)的小程序界面如下：
<template> <view style="width: 100%; height: 100vh;"> <image src="../../static/cloud.jpg" :style="topstyle" class="app_content_top"></image> <view class="login_box" :style="loginBoxClass"> <view style="text-align: center; margin-top: 3%; margin-bottom: 2%;"> <image src="../../static/logo.png" class="logo"></image> </view> <view class="title"><text>碼農(nóng)研究僧的小程序</text></view> <view style="width: 90%; margin-left: 5%;"> <view class="equipment_input"> <u--input clearable v-model="username" placeholder="請(qǐng)輸入賬號(hào)" prefixIcon="account" prefixIconStyle="font-size: 22px; color: #909399" ></u--input> </view> <view class="equipment_input"> <u--input clearable v-model="password" placeholder="請(qǐng)輸入密碼" prefixIcon="lock" password prefixIconStyle="font-size: 22px; color: #909399" ></u--input> </view> <view class="equipment_input"> <u--input clearable v-model="captcha" placeholder="請(qǐng)輸入驗(yàn)證碼" prefixIcon="account" prefixIconStyle="font-size: 22px; color: #909399" ></u--input> <image :src="captchaImg" @click="refreshCode" class="captcha"></image> </view> </view> <view style="text-align: center; margin-top: 5%;"> <u-button style="width: 90%; margin-left: 5%; margin-bottom: 5%;" type="primary" :plain="true" :hairline="true" text="細(xì)邊" @click="login">登錄</u-button> </view> </view> <view style="text-align: center; margin-top: 70%;"> <text>Copyright 2024 - 碼農(nóng)研究僧.</text> </view> </view> </template>
js方法如下：
<script>
import w_md5 from "../../js_sdk/zww-md5/w_md5.js";
import { getCaptcha } from "../../api/auth.js";
export default {
data() {
return {
captchaImg: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
captcha: '',
username: '',
password: '',
topstyle: {
height: 0,
},
loginBoxClass: {},
};
},
created() {
this.refreshCode();
},
mounted() {
this.topstyle.height = uni.getSystemInfoSync().screenHeight + 'px';
if (uni.getSystemInfoSync().screenWidth > uni.getSystemInfoSync().screenHeight) {
this.loginBoxClass = {
'margin-top': '5%',
'width': '60%',
'margin-left': '20%',
};
}
},
methods: {
refreshCode() {
getCaptcha().then(res => {
this.captchaImg = res.data.image;
});
},
login() {
if (!this.username) {
uni.$u.toast('請(qǐng)輸入賬號(hào)!');
return;
}
if (!this.password) {
uni.$u.toast('請(qǐng)輸入密碼!');
return;
}
if (!this.captcha) {
uni.$u.toast('請(qǐng)輸入驗(yàn)證碼!');
return;
}
const password = w_md5.hex_md5_32(this.password);
uni.$u.http.post('/manong/oauth/token', {
grant_type: 'password',
username: this.username,
password: password,
scope: 'all',
tenantId: '000000'
}, {
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Tenant-Id': '000000'
}
}).then(res => {
const data = res.data;
uni.$store.commit('updateToken', data);
uni.setStorageSync('tokenDateTime', new Date().getTime());
uni.$u.toast('登錄成功!');
uni.switchTab({
url: "../index/index",
});
}).catch(err => {
uni.$u.toast('登錄失敗，請(qǐng)重試!');
});
}
}
};
</script>
布局如下：
<style lang="scss" scoped>
.app_content_top {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.login_box {
border-radius: 2%;
box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.5);
background-color: $uni-bg-color;
width: 90%;
margin-top: 30%;
margin-left: 5%;
}
.title {
font-size: $uni-img-size-base;
text-align: center;
margin-top: 2%;
margin-bottom: 2%;
}
.equipment_input {
margin-top: 1%;
margin-bottom: 1%;
border-bottom: 1px solid #d1d1d1;
}
.logo {
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 200rpx;
border-radius: 50%;
background-color: #eeeeee;
}
.captcha {
height: 150rpx;
}
</style>
補(bǔ)充兩個(gè)引入的js文件
獲取后端驗(yàn)證碼的js文件：
const http = uni.$u.http
export const getCaptcha = () => http.get('/manong/oauth/captcha')
md5加密
let w_md5 = {}
function hex_md5(string,bit) {
function md5_RotateLeft(lValue, iShiftBits) {
return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
}
function md5_AddUnsigned(lX, lY) {
var lX4, lY4, lX8, lY8, lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}
function md5_F(x, y, z) {
return (x & y) | ((~x) & z);
}
function md5_G(x, y, z) {
return (x & z) | (y & (~z));
}
function md5_H(x, y, z) {
return (x ^ y ^ z);
}
function md5_I(x, y, z) {
return (y ^ (x | (~z)));
}
function md5_FF(a, b, c, d, x, s, ac) {
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac));
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
};
function md5_GG(a, b, c, d, x, s, ac) {
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac));
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
};
function md5_HH(a, b, c, d, x, s, ac) {
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac));
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
};
function md5_II(a, b, c, d, x, s, ac) {
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac));
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
};
function md5_ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1 = lMessageLength + 8;
var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
var lWordArray = Array(lNumberOfWords - 1);
var lBytePosition = 0;
var lByteCount = 0;
while (lByteCount < lMessageLength) {
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
lBytePosition = (lByteCount % 4) * 8;
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
lByteCount++;
}
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
lBytePosition = (lByteCount % 4) * 8;
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
return lWordArray;
};
function md5_WordToHex(lValue) {
var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
for (lCount = 0; lCount <= 3; lCount++) {
lByte = (lValue >>> (lCount * 8)) & 255;
WordToHexValue_temp = "0" + lByte.toString(16);
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
}
return WordToHexValue;
};
function md5_Utf8Encode(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
};
var x = Array();
var k, AA, BB, CC, DD, a, b, c, d;
var S11 = 7, S12 = 12, S13 = 17, S14 = 22;
var S21 = 5, S22 = 9, S23 = 14, S24 = 20;
var S31 = 4, S32 = 11, S33 = 16, S34 = 23;
var S41 = 6, S42 = 10, S43 = 15, S44 = 21;
string = md5_Utf8Encode(string);
x = md5_ConvertToWordArray(string);
a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
for (k = 0; k < x.length; k += 16) {
AA = a; BB = b; CC = c; DD = d;
a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453);
c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
d = md5_GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
c = md5_GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
b = md5_GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
a = md5_HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
d = md5_HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
c = md5_HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
b = md5_HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
a = md5_HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
d = md5_HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
c = md5_HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
b = md5_HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
a = md5_HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
d = md5_HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
c = md5_HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
b = md5_HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
a = md5_HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
d = md5_HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
c = md5_HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
b = md5_HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
a = md5_II(a, b, c, d, x[k + 0], S41, 0xF4292244);
d = md5_II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
c = md5_II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
b = md5_II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
a = md5_II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
d = md5_II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
c = md5_II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
b = md5_II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
a = md5_II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
d = md5_II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
c = md5_II(c, d, a, b, x[k + 6], S43, 0xA3014314);
b = md5_II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
a = md5_II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
d = md5_II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
c = md5_II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
b = md5_II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
a = md5_AddUnsigned(a, AA);
b = md5_AddUnsigned(b, BB);
c = md5_AddUnsigned(c, CC);
d = md5_AddUnsigned(d, DD);
}
if(bit==32){
return (md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d)).toLowerCase();
}
return (md5_WordToHex(b) + md5_WordToHex(c)).toLowerCase();
}
//16位小寫
w_md5.hex_md5_16 = function (string) {
return hex_md5(string,16);
}
//16位大寫
w_md5.hex_md5_16Upper = function (string) {
return hex_md5(string,16).toUpperCase();
}
//32位小寫
w_md5.hex_md5_32 = function (string) {
return hex_md5(string,32);
}
//32位大寫
w_md5.hex_md5_32Upper = function (string) {
return hex_md5(string,32).toUpperCase();
}
export default w_md5
到此這篇關(guān)于Java結(jié)合uniapp實(shí)現(xiàn)驗(yàn)證碼功能的示例詳解的文章就介紹到這了,更多相關(guān)Java uniapp驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了java中Pair和Map的區(qū)別,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
深入解析Java編程中的StringBuffer與StringBuider
這篇文章主要介紹了Java編程中的StringBuffer與StringBuider,是Java入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)匯總了Java String類的常用方法，感興趣的小伙伴們可以參考一下2016-07-07
java實(shí)現(xiàn)浮點(diǎn)數(shù)轉(zhuǎn)人民幣的小例子
java實(shí)現(xiàn)浮點(diǎn)數(shù)轉(zhuǎn)人民幣的小例子，需要的朋友可以參考一下2013-03-03
用Spring Native將SpringBoot程序轉(zhuǎn)換為GraalVM
這篇文章主要介紹了用Spring Native將SpringBoot程序轉(zhuǎn)換為GraalVM的方法，幫助大家更好的理解和學(xué)習(xí)使用SpringBoot，感興趣的朋友可以了解下2021-04-04
spring-gateway網(wǎng)關(guān)聚合swagger實(shí)現(xiàn)多個(gè)服務(wù)接口切換的示例代碼
這篇文章主要介紹了spring-gateway網(wǎng)關(guān)聚合swagger實(shí)現(xiàn)多個(gè)服務(wù)接口切換的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
etcd是一個(gè)分布式鍵值存儲(chǔ)數(shù)據(jù)庫，用于共享配置和服務(wù)發(fā)現(xiàn)，etcd采用Go語言編寫，具有出色的跨平臺(tái)支持，很小的二進(jìn)制文件和強(qiáng)大的社區(qū)，這篇文章主要介紹了SpringBoot集成etcd,需要的朋友可以參考下2023-08-08
SpringBoot超詳細(xì)講解集成Flink的部署與打包方法
昨天折騰了下SpringBoot與Flink集成，實(shí)際上集成特簡單，主要是部署打包的問題折騰了不少時(shí)間。想打出的包直接可以java -jar運(yùn)行，同時(shí)也可以flink run運(yùn)行，或者在flink的dashboard上上傳點(diǎn)擊啟動(dòng)。結(jié)果是不行，但是使用不同的插件打包還是可以的2022-05-05
這篇文章主要介紹了拳皇Java簡單小程序，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了如何區(qū)分JAVA中的equals與==，文章簡單易懂，實(shí)例代碼幫助大家更好的參考學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06