gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

集成 AJ-Captcha 验证码功能

pull/22/head
小诺 2021-01-21 23:45:44 +08:00 committed by Gitee
parent 8d41de6c0a d1b1966f25
commit 1cf5299538
19 changed files with 1376 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_web/.eslintrc.js
View File

@ -56,7 +56,9 @@ module.exports = {
}
],
'template-curly-spacing': 'off',
'indent': 'off'
'indent': 'off',
"space-before-function-paren": 0,
'no-multi-spaces': 2, //不能用多余的空格
},
parserOptions: {
parser: 'babel-eslint'

1
_web/package.json
View File

@ -16,6 +16,7 @@
"babel-polyfill": "^6.26.0",
"clipboard": "^2.0.6",
"core-js": "^3.1.2",
"crypto-js": "^4.0.0",
"default-passive-events": "^1.0.10",
"enquire.js": "^2.1.6",
"font-awesome": "^4.7.0",

14
_web/src/api/modular/system/loginManage.js
View File

@ -75,3 +75,17 @@ export function getSmsCaptcha (parameter) {
params: parameter
})
}
/**
* 获取验证码开关
* @author Jax
* @param parameter
*/
export function getCaptchaOpen (parameter) {
return axios({
url: '/getCaptchaOpen',
method: 'get',
params: parameter
})
}

465
_web/src/components/verifition/Verify.vue Normal file
View File

File diff suppressed because one or more lines are too long

245
_web/src/components/verifition/Verify/VerifyPoints.vue Normal file
View File

@ -0,0 +1,245 @@
<template>
<div style="position: relative"
>
<div class="verify-img-out">
<div class="verify-img-panel" :style="{'width': setSize.imgWidth,
'height': setSize.imgHeight,
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
'margin-bottom': vSpace + 'px'}"
>
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
<i class="iconfont icon-refresh"></i>
</div>
<img :src="'data:image/png;base64,'+pointBackImgBase"
ref="canvas"
alt="" style="width:100%;height:100%;display:block"
@click="bindingClick?canvasClick($event):undefined">
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
:style="{
'background-color':'#1abd6c',
color:'#fff',
'z-index':9999,
width:'20px',
height:'20px',
'text-align':'center',
'line-height':'20px',
'border-radius': '50%',
position:'absolute',
top:parseInt(tempPoint.y-10) + 'px',
left:parseInt(tempPoint.x-10) + 'px'
}">
{{index + 1}}
</div>
</div>
</div>
<!-- 'height': this.barSize.height, -->
<div class="verify-bar-area"
:style="{'width': setSize.imgWidth,
'color': this.barAreaColor,
'border-color': this.barAreaBorderColor,
'line-height':this.barSize.height}">
<span class="verify-msg">{{text}}</span>
</div>
</div>
</template>
<script type="text/babel">
/**
* VerifyPoints
* @description 点选
* */
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util'
import {aesEncrypt} from "./../utils/ase"
import {reqGet,reqCheck} from "./../api/index"
export default {
name: 'VerifyPoints',
props: {
//弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed'
},
captchaType:{
type:String,
},
//间隔
vSpace: {
type: Number,
default: 5
},
imgSize: {
type: Object,
default() {
return {
width: '310px',
height: '155px'
}
}
},
barSize: {
type: Object,
default() {
return {
width: '310px',
height: '40px'
}
}
}
},
data() {
return {
secretKey:'', //后端返回的ase加密秘钥
checkNum:3, //默认需要点击的字数
fontPos: [], //选中的坐标信息
checkPosArr: [], //用户点击的坐标
num: 1, //点击的记数
pointBackImgBase:'', //后端获取到的背景图片
poinTextList:[], //后端返回的点击字体顺序
backToken:'', //后端返回的token值
setSize: {
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0
},
tempPoints: [],
text: '',
barAreaColor: undefined,
barAreaBorderColor: undefined,
showRefresh: true,
bindingClick: true
}
},
computed: {
resetSize() {
return resetSize
}
},
methods: {
init() {
//加载页面
this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1
this.getPictrue();
this.$nextTick(() => {
this.setSize = this.resetSize(this) //重新设置宽度高度
this.$parent.$emit('ready', this)
})
},
canvasClick(e) {
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
if (this.num == this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
//按比例转换坐标值
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.setSize);
//等创建坐标执行完
setTimeout(() => {
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
//发送后端请求
var captchaVerification = this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
let data = {
captchaType:this.captchaType,
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr),
"token":this.backToken
}
reqCheck(data).then(res=>{
if (res.repCode == "0000") {
this.barAreaColor = '#4cae4c'
this.barAreaBorderColor = '#5cb85c'
this.text = '验证成功'
this.bindingClick = false
if (this.mode=='pop') {
setTimeout(()=>{
this.$parent.clickShow = false;
this.refresh();
},1500)
}
this.$parent.$emit('success', {captchaVerification})
}else{
this.$parent.$emit('error', this)
this.barAreaColor = '#d9534f'
this.barAreaBorderColor = '#d9534f'
this.text = '验证失败'
setTimeout(() => {
this.refresh();
}, 700);
}
})
}, 400);
}
if (this.num < this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
}
},
//获取坐标
getMousePos: function (obj, e) {
var x = e.offsetX
var y = e.offsetY
return {x, y}
},
//创建坐标点
createPoint: function (pos) {
this.tempPoints.push(Object.assign({}, pos))
return ++this.num;
},
refresh: function () {
this.tempPoints.splice(0, this.tempPoints.length)
this.barAreaColor = '#000'
this.barAreaBorderColor = '#ddd'
this.bindingClick = true
this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1
this.getPictrue();
this.text = '验证失败'
this.showRefresh = true
},
// 请求背景图片和验证图片
getPictrue(){
let data = {
captchaType:this.captchaType
}
reqGet(data).then(res=>{
if (res.repCode == "0000") {
this.pointBackImgBase = res.repData.originalImageBase64
this.backToken = res.repData.token
this.secretKey = res.repData.secretKey
this.poinTextList = res.repData.wordList
this.text = '请依次点击【' + this.poinTextList.join(",") + '】'
}else{
this.text = res.repMsg;
}
})
},
//坐标转换函数
pointTransfrom(pointArr,imgSize){
var newPointArr = pointArr.map(p=>{
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth))
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight))
return {x,y}
})
// console.log(newPointArr,"newPointArr");
return newPointArr
}
},
watch: {
// type变化则全面刷新
type: {
immediate: true,
handler() {
this.init()
}
}
},
mounted() {
// 禁止拖拽
this.$el.onselectstart = function () {
return false
}
},
}
</script>

347
_web/src/components/verifition/Verify/VerifySlide.vue Normal file
View File

@ -0,0 +1,347 @@
<template>
<div style="position: relative;">
<div v-if="type === '2'" class="verify-img-out"
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
>
<div class="verify-img-panel" :style="{width: setSize.imgWidth,
height: setSize.imgHeight,}">
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block">
<div class="verify-refresh" @click="refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i>
</div>
<transition name="tips">
<span class="verify-tips" v-if="tipWords" :class="passFlag ?'suc-bg':'err-bg'">{{tipWords}}</span>
</transition>
</div>
</div>
<!-- 公共部分 -->
<div class="verify-bar-area" :style="{width: setSize.imgWidth,
height: barSize.height,
'line-height':barSize.height}">
<span class="verify-msg" v-text="text"></span>
<div class="verify-left-bar"
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}">
<span class="verify-msg" v-text="finishText"></span>
<div class="verify-move-block"
@touchstart="start"
@mousedown="start"
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
<i :class="['verify-icon iconfont', iconClass]"
:style="{color: iconColor}"></i>
<div v-if="type === '2'" class="verify-sub-block"
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
'height': setSize.imgHeight,
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
}">
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/babel">
/**
* VerifySlide
* @description 滑块
* */
import {aesEncrypt} from "./../utils/ase"
import {resetSize} from './../utils/util'
import {reqGet,reqCheck} from "./../api/index"
// "captchaType":"blockPuzzle",
export default {
name: 'VerifySlide',
props: {
captchaType:{
type:String,
},
type: {
type: String,
default: '1'
},
//弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed'
},
vSpace: {
type: Number,
default: 5
},
explain: {
type: String,
default: '向右滑动完成验证'
},
imgSize: {
type: Object,
default() {
return {
width: '310px',
height: '155px'
}
}
},
blockSize: {
type: Object,
default() {
return {
width: '50px',
height: '50px'
}
}
},
barSize: {
type: Object,
default() {
return {
width: '310px',
height: '40px'
}
}
}
},
data() {
return {
secretKey:'', //后端返回的加密秘钥 字段
passFlag:'', //是否通过的标识
backImgBase:'', //验证码背景图片
blockBackImgBase:'', //验证滑块的背景图片
backToken:"", //后端返回的唯一token值
startMoveTime:"", //移动开始的时间
endMovetime:'', //移动结束的时间
tipsBackColor:'', //提示词的背景颜色
tipWords:'',
text: '',
finishText:'',
setSize: {
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0
},
top: 0,
left: 0,
moveBlockLeft: undefined,
leftBarWidth: undefined,
// 移动中样式
moveBlockBackgroundColor: undefined,
leftBarBorderColor: '#ddd',
iconColor: undefined,
iconClass: 'icon-right',
status: false, //鼠标状态
isEnd: false, //是够验证完成
showRefresh: true,
transitionLeft: '',
transitionWidth: ''
}
},
computed: {
barArea() {
return this.$el.querySelector('.verify-bar-area')
},
resetSize() {
return resetSize
}
},
methods: {
init() {
this.text = this.explain
this.getPictrue();
this.$nextTick(() => {
let setSize = this.resetSize(this) //重新设置宽度高度
for (let key in setSize) {
this.$set(this.setSize, key, setSize[key])
}
this.$parent.$emit('ready', this)
})
var _this = this
window.removeEventListener("touchmove", function (e) {
_this.move(e);
});
window.removeEventListener("mousemove", function (e) {
_this.move(e);
});
//鼠标松开
window.removeEventListener("touchend", function () {
_this.end();
});
window.removeEventListener("mouseup", function () {
_this.end();
});
window.addEventListener("touchmove", function (e) {
_this.move(e);
});
window.addEventListener("mousemove", function (e) {
_this.move(e);
});
//鼠标松开
window.addEventListener("touchend", function () {
_this.end();
});
window.addEventListener("mouseup", function () {
_this.end();
});
},
//鼠标按下
start: function (e) {
e = e || window.event
if (!e.touches) { //兼容PC端
var x = e.clientX;
} else { //兼容移动端
var x = e.touches[0].pageX;
}
this.startLeft =Math.floor(x - this.barArea.getBoundingClientRect().left);
this.startMoveTime = +new Date(); //开始滑动的时间
if (this.isEnd == false) {
this.text = ''
this.moveBlockBackgroundColor = '#337ab7'
this.leftBarBorderColor = '#337AB7'
this.iconColor = '#fff'
e.stopPropagation();
this.status = true;
}
},
//鼠标移动
move: function (e) {
e = e || window.event
if (this.status && this.isEnd == false) {
if (!e.touches) { //兼容PC端
var x = e.clientX;
} else { //兼容移动端
var x = e.touches[0].pageX;
}
var bar_area_left = this.barArea.getBoundingClientRect().left;
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
}
if (move_block_left <= 0) {
move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
}
//拖动后小方块的left值
this.moveBlockLeft = (move_block_left - this.startLeft) + "px"
this.leftBarWidth = (move_block_left - this.startLeft) + "px"
}
},
//鼠标松开
end: function () {
this.endMovetime = +new Date();
var _this = this;
//判断是否重合
if (this.status && this.isEnd == false) {
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
moveLeftDistance = moveLeftDistance * 310/ parseInt(this.setSize.imgWidth)
let data = {
captchaType:this.captchaType,
"pointJson":this.secretKey ? aesEncrypt(JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:moveLeftDistance,y:5.0}),
"token":this.backToken
}
reqCheck(data).then(res=>{
if (res.repCode == "0000") {
this.moveBlockBackgroundColor = '#5cb85c'
this.leftBarBorderColor = '#5cb85c'
this.iconColor = '#fff'
this.iconClass = 'icon-check'
this.showRefresh = false
this.isEnd = true;
if (this.mode=='pop') {
setTimeout(()=>{
this.$parent.clickShow = false;
this.refresh();
},1500)
}
this.passFlag = true
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0})
setTimeout(()=>{
this.tipWords = ""
this.$parent.closeBox();
this.$parent.$emit('success', {captchaVerification})
},1000)
}else{
this.moveBlockBackgroundColor = '#d9534f'
this.leftBarBorderColor = '#d9534f'
this.iconColor = '#fff'
this.iconClass = 'icon-close'
this.passFlag = false
setTimeout(function () {
_this.refresh();
}, 1000);
this.$parent.$emit('error',this)
this.tipWords = "验证失败"
setTimeout(()=>{
this.tipWords = ""
},1000)
}
})
this.status = false;
}
},
refresh: function () {
this.showRefresh = true
this.finishText = ''
this.transitionLeft = 'left .3s'
this.moveBlockLeft = 0
this.leftBarWidth = undefined
this.transitionWidth = 'width .3s'
this.leftBarBorderColor = '#ddd'
this.moveBlockBackgroundColor = '#fff'
this.iconColor = '#000'
this.iconClass = 'icon-right'
this.isEnd = false
this.getPictrue()
setTimeout(() => {
this.transitionWidth = ''
this.transitionLeft = ''
this.text = this.explain
}, 300)
},
// 请求背景图片和验证图片
getPictrue(){
let data = {
captchaType:this.captchaType
}
reqGet(data).then(res=>{
if (res.repCode == "0000") {
this.backImgBase = res.repData.originalImageBase64
this.blockBackImgBase = res.repData.jigsawImageBase64
this.backToken = res.repData.token
this.secretKey = res.repData.secretKey
}else{
this.tipWords = res.repMsg;
}
})
},
},
watch: {
// type变化则全面刷新
type: {
immediate: true,
handler() {
this.init()
}
}
},
mounted() {
// 禁止拖拽
this.$el.onselectstart = function () {
return false
}
},
}
</script>

22
_web/src/components/verifition/api/index.js Normal file
View File

@ -0,0 +1,22 @@
/**
* 此处可直接引用自己项目封装好的 axios 配合后端联调
*/
import { axios } from '@/utils/request'
// 获取验证图片 以及token
export function reqGet(data) {
return axios({
url: '/captcha/code',
method: 'get',
data
})
}
// 滑动或者点选验证
export function reqCheck(data) {
return axios({
url: '/captcha/code/check',
method: 'post',
data
})
}

11
_web/src/components/verifition/utils/ase.js Normal file
View File

@ -0,0 +1,11 @@
import CryptoJS from 'crypto-js'
/**
* @word 要加密的内容
* @keyWord String 服务器随机返回的关键字
* */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
var key = CryptoJS.enc.Utf8.parse(keyWord);
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
}

30
_web/src/components/verifition/utils/axios.js Normal file
View File

@ -0,0 +1,30 @@
import axios from 'axios';
axios.defaults.baseURL = process.env.BASE_API;
const service = axios.create({
timeout: 40000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
},
})
service.interceptors.request.use(
config => {
return config
},
error => {
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
return res
},
error => {
}
)
export default service

36
_web/src/components/verifition/utils/util.js Normal file
View File

@ -0,0 +1,36 @@
export function resetSize(vm) {
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
if (vm.imgSize.width.indexOf('%') != -1) {
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
} else {
img_width = this.imgSize.width;
}
if (vm.imgSize.height.indexOf('%') != -1) {
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
} else {
img_height = this.imgSize.height
}
if (vm.barSize.width.indexOf('%') != -1) {
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
} else {
bar_width = this.barSize.width
}
if (vm.barSize.height.indexOf('%') != -1) {
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
} else {
bar_height = this.barSize.height
}
return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height}
}
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

49
_web/src/views/userLoginReg/Login.vue
View File

@ -82,6 +82,16 @@
>忘记密码</router-link>
</a-form-item>
<a-form-item>
<Verify
@success="verifySuccess"
:mode="'pop'"
:captchaType="'clickWord'"
:imgSize="{ width: '330px', height: '155px' }"
ref="verify"
></Verify>
</a-form-item>
<a-form-item style="margin-top:24px">
<a-button
size="large"
@ -120,11 +130,13 @@
<script>
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { mapActions } from 'vuex'
import { getSmsCaptcha } from '@/api/modular/system/loginManage'
import { getSmsCaptcha, getCaptchaOpen } from '@/api/modular/system/loginManage'
import Verify from '@/components/verifition/Verify'
export default {
components: {
TwoStepCaptcha
TwoStepCaptcha,
Verify
},
data () {
return {
@ -145,13 +157,27 @@ export default {
},
accountLoginErrMsg: '',
tenantOpen: false,
tenantsList: []
captchaOpen: false, // 是否开启验证码
tenantsList: [],
loginParams: [] // 登录参数
}
},
created () {
this.getCaptchaOpen()
},
methods: {
...mapActions(['Login', 'Logout', 'dictTypeData']),
/**
* 获取验证码开关
*/
getCaptchaOpen () {
getCaptchaOpen().then((res) => {
if (res.success) {
this.captchaOpen = res.data
}
})
},
// handler
handleUsernameOrEmail (rule, value, callback) {
const { state } = this
@ -185,6 +211,12 @@ export default {
}
validateFields(validateFieldsKey, { force: true }, (err, values) => {
if (!err) {
this.loginParams = values
// 是否开启验证码
if (this.captchaOpen) {
this.$refs.verify.show()
return
}
const loginParams = { ...values }
delete loginParams.account
loginParams[!state.loginType ? 'email' : 'account'] = values.account
@ -205,6 +237,17 @@ export default {
}
})
},
/**
* 获取验证码
*/
verifySuccess(params) {
this.loginParams.code = params.captchaVerification
this.Login(this.loginParams).then((res) => this.loginSuccess(res))
.catch(err => this.requestFailed(err))
.finally(() => {
this.state.loginBtn = false
})
},
getCaptcha (e) {
e.preventDefault()
const { form: { validateFields }, state } = this

5
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/consts/CommonConstant.java
View File

@ -111,4 +111,9 @@ public interface CommonConstant {
* 数据库链接URL标识
*/
String DATABASE_URL_NAME = "DATABASE_URL_NAME";
/**
* 点选验证码
*/
String IMAGE_CODE_TYPE = "clickWord";
}

4
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/consts/SpringSecurityConstant.java
View File

@ -63,6 +63,10 @@ public interface SpringSecurityConstant {
//druid的
"/druid/**",
//获取验证码
"/captcha/**",
"/getCaptchaOpen",
};
}

9
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/context/constant/ConstantContextHolder.java
View File

@ -390,4 +390,13 @@ public class ConstantContextHolder {
}
}
/**
* @Description 获取验证码 开关标识
* @Date 2021/1/21 15:22
* @author Jax
* @return Boolean
**/
public static Boolean getCaptchaOpenFlag() {
return getSysConfigWithDefault("XIAONUO_CAPTCHA_OPEN", Boolean.class, true);
}
}

9
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/exception/enums/AuthExceptionEnum.java
View File

@ -86,7 +86,14 @@ public enum AuthExceptionEnum implements AbstractBaseExceptionEnum {
/**
* 无登录用户
*/
NO_LOGIN_USER(9, "无登录用户");
NO_LOGIN_USER(9, "无登录用户"),
/**
* 验证码错误
*/
CONSTANT_EMPTY_ERROR(10, "验证码错误"),
;
private final Integer code;

8
xiaonuo-base/xiaonuo-system/pom.xml
View File

@ -85,6 +85,14 @@
<groupId>com.github.xiaoymin</groupId>
<artifactId>swagger-bootstrap-ui</artifactId>
</dependency>
<!--验证码-->
<dependency>
<groupId>com.github.anji-plus</groupId>
<artifactId>captcha-spring-boot-starter</artifactId>
<version>1.2.6</version>
</dependency>
</dependencies>
<build>

68
xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/modular/auth/controller/SysLoginController.java
View File

@ -25,11 +25,18 @@ XiaoNuo采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注
package com.cn.xiaonuo.sys.modular.auth.controller;
import cn.hutool.core.lang.Dict;
import com.anji.captcha.model.common.ResponseModel;
import com.anji.captcha.model.vo.CaptchaVO;
import com.anji.captcha.service.CaptchaService;
import com.cn.xiaonuo.core.consts.CommonConstant;
import com.cn.xiaonuo.core.context.constant.ConstantContextHolder;
import com.cn.xiaonuo.core.context.login.LoginContextHolder;
import com.cn.xiaonuo.core.exception.AuthException;
import com.cn.xiaonuo.core.exception.enums.AuthExceptionEnum;
import com.cn.xiaonuo.core.pojo.response.ResponseData;
import com.cn.xiaonuo.core.pojo.response.SuccessResponseData;
import com.cn.xiaonuo.sys.modular.auth.service.AuthService;
import org.springframework.context.annotation.Lazy;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
@ -49,6 +56,10 @@ public class SysLoginController {
@Resource
private AuthService authService;
@Lazy
@Resource
private CaptchaService captchaService;
/**
* 获取是否开启租户的标识
*
@ -72,6 +83,11 @@ public class SysLoginController {
String password = dict.getStr("password");
String tenantCode = dict.getStr("tenantCode");
//检测是否开启验证码
if (ConstantContextHolder.getCaptchaOpenFlag()) {
verificationCode(dict.getStr("code"));
}
//如果系统开启了多租户开关，则添加租户的临时缓存
if (ConstantContextHolder.getTenantOpenFlag()) {
authService.cacheTenantInfo(tenantCode);
@ -103,4 +119,56 @@ public class SysLoginController {
return new SuccessResponseData(LoginContextHolder.me().getSysLoginUserUpToDate());
}
/**
* @Description 获取验证码开关
* @author Jax
* @Date 2021/1/21 15:19
* @return ResponseData
**/
@GetMapping("/getCaptchaOpen")
public ResponseData getCaptchaOpen() {
return new SuccessResponseData(ConstantContextHolder.getCaptchaOpenFlag());
}
/**
* @Description 获取验证码
* @Date 2021/1/21 15:25
* @author Jax
* @return ResponseModel
**/
@GetMapping("/captcha/code")
public ResponseModel getCode() {
CaptchaVO vo = new CaptchaVO();
vo.setCaptchaType(CommonConstant.IMAGE_CODE_TYPE);
return captchaService.get(vo);
}
/**
* @Description 校验前端验证码
* @Date 2021/1/21 15:26
* @author Jax
* @param captcha
* @return ResponseModel
**/
@PostMapping("/captcha/code/check")
public ResponseModel check(@RequestBody CaptchaVO captcha) {
return captchaService.check(captcha);
}
/**
* @Description 校验验证码
* @Date 2021/1/21 15:27
* @author Jax
* @param code
* @return boolean
**/
private boolean verificationCode(String code) {
CaptchaVO vo = new CaptchaVO();
vo.setCaptchaVerification(code);
if (!captchaService.verification(vo).isSuccess()) {
throw new AuthException(AuthExceptionEnum.CONSTANT_EMPTY_ERROR);
}
return true;
}
}

48
xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/provider/CaptchaCacheServiceProvider.java Normal file
View File

@ -0,0 +1,48 @@
package com.cn.xiaonuo.sys.provider;
import com.anji.captcha.service.CaptchaCacheService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import java.util.concurrent.TimeUnit;
/**
* @ClassName CaptchaCacheServiceProvider
* @Description 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis
* 如果应用是单点的，也没有使用redis，那默认使用内存。内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败
* @Author Jax
* @Date 2021/1/21 16:27
**/
//public class CaptchaCacheServiceProvider implements CaptchaCacheService {
//
// private static final String REDIS = "redis";
//
// @Autowired
// private StringRedisTemplate stringRedisTemplate;
//
// @Override
// public void set(String key, String value, long expiresInSeconds) {
// stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
// }
//
// @Override
// public boolean exists(String key) {
// return stringRedisTemplate.hasKey(key);
// }
//
// @Override
// public void delete(String key) {
// stringRedisTemplate.delete(key);
// }
//
// @Override
// public String get(String key) {
// return stringRedisTemplate.opsForValue().get(key);
// }
//
// @Override
// public String type() {
// return REDIS;
// }
//
//}

6
xiaonuo-main/src/main/resources/application.yml
View File

@ -55,3 +55,9 @@ jodconverter:
port-numbers: 8100
#libreoffice进程重启前的最大进程数
max-tasks-per-process: 100
#验证码相关配置
aj:
captcha:
type: clickword #验证码类型 为点选
font-type: 宋体