Skip to content

Commit 8471003

Browse files
22273246892227324689
committed
完成验证码功能开发
1 parent 86db018 commit 8471003

21 files changed

Lines changed: 630 additions & 770 deletions

File tree

‎gpmall-front/src/api/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ export const thank = (params) => {
4747
return http.fetchGet('/goods/thank', params)
4848
} */
4949

50-
// 极验验证码
51-
export const geetest = (params) => {
52-
return http.fetchGet('/member/geetestInit?t=' + (new Date()).getTime(), params)
50+
export const initKaptcha = (params) => {
51+
return http.fetchGet('/user/kaptcha?t=' + (new Date()).getTime(), params)
5352
}
5453

‎gpmall-front/src/page/Login/login.vue‎

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
</div>
1919
</li>
2020
<li>
21-
<div id="captcha">
22-
<p id="wait">正在加载验证码...</p>
21+
<div class="input">
22+
<input type="text" v-model="ruleForm.captcha" placeholder="验证码"/>
23+
&nbsp;&nbsp;&nbsp;
24+
<img id="imageCode" :src="imageCode" @click="init_geetest()"/>
2325
</div>
2426
</li>
2527
<li style="text-align: right" class="pr">
@@ -56,11 +58,10 @@
5658
<script>
5759
import YFooter from '/common/footer'
5860
import YButton from '/components/YButton'
59-
import { userLogin, geetest } from '/api/index.js'
61+
import { userLogin, initKaptcha } from '/api/index.js'
6062
import { addCart } from '/api/goods.js'
6163
import { setStore, getStore, removeStore } from '/utils/storage.js'
6264
require('../../../static/geetest/gt.js')
63-
var captcha
6465
export default {
6566
data () {
6667
return {
@@ -69,6 +70,7 @@ export default {
6970
ruleForm: {
7071
userName: '',
7172
userPwd: '',
73+
captcha: '',
7274
errMsg: ''
7375
},
7476
registered: {
@@ -79,7 +81,7 @@ export default {
7981
},
8082
autoLogin: false,
8183
logintxt: '登录',
82-
statusKey: ''
84+
imageCode: ''
8385
}
8486
},
8587
computed: {
@@ -152,23 +154,17 @@ export default {
152154
this.logintxt = '登录中...'
153155
this.rememberPass()
154156
if (!this.ruleForm.userName || !this.ruleForm.userPwd) {
155-
// this.ruleForm.errMsg = '账号或者密码不能为空!'
156157
this.message('账号或者密码不能为空!')
157158
return false
158159
}
159-
// var result = captcha.getValidate()
160-
// if (!result) {
161-
// this.message('请完成验证')
162-
// this.logintxt = '登录'
163-
// return false
164-
// }
160+
if (!this.ruleForm.captcha) {
161+
this.message('请输入验证码!')
162+
return false
163+
}
165164
var params = {
166165
userName: this.ruleForm.userName,
167166
userPwd: this.ruleForm.userPwd,
168-
// challenge: result.geetest_challenge,
169-
// validate: result.geetest_validate,
170-
// seccode: result.geetest_seccode,
171-
statusKey: this.statusKey
167+
captcha: this.ruleForm.captcha
172168
}
173169
userLogin(params).then(res => {
174170
if (res.success) {
@@ -194,35 +190,21 @@ export default {
194190
} else {
195191
this.logintxt = '登录'
196192
this.message(res.message)
197-
captcha.reset()
193+
this.init_geetest()
198194
return false
199195
}
200196
})
201197
},
202198
init_geetest () {
203-
geetest().then(res => {
204-
this.statusKey = res.statusKey
205-
window.initGeetest({
206-
gt: res.gt,
207-
challenge: res.challenge,
208-
new_captcha: res.new_captcha,
209-
offline: !res.success,
210-
product: 'popup',
211-
width: '100%'
212-
}, function (captchaObj) {
213-
captcha = captchaObj
214-
captchaObj.appendTo('#captcha')
215-
captchaObj.onReady(function () {
216-
document.getElementById('wait').style.display = 'none'
217-
})
218-
})
199+
initKaptcha().then(res => {
200+
this.imageCode = 'data:image/gif;base64,' + res.result
219201
})
220202
}
221203
},
222204
mounted () {
223205
this.getRemembered()
224206
this.login_addCart()
225-
// this.init_geetest()
207+
this.init_geetest()
226208
this.open('登录提示', '测试体验账号密码：test | test')
227209
},
228210
components: {

‎gpmall-front/src/page/Login/register.vue‎

Lines changed: 32 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@
2828
</div>
2929
</li>
3030
<li>
31-
<div id="captcha">
32-
<p id="wait">正在加载验证码...</p>
31+
<div class="input">
32+
<input type="text" v-model="registered.captcha" placeholder="验证码" style="width:650px;"/>
33+
&nbsp;&nbsp;&nbsp;
34+
<img id="imageCode" :src="imageCode" @click="init_geetest()"/>
3335
</div>
3436
</li>
3537
</ul>
@@ -40,21 +42,21 @@
4042
</el-checkbox>
4143
<div style="margin-bottom: 30px;">
4244
<y-button
43-
:classStyle="registered.userPwd&&registered.userPwd2&&registered.userName&&registxt==='注册'?'main-btn':'disabled-btn'"
45+
:classStyle="registered.userPwd&&registered.userPwd2&&registered.userName&&registered.captcha&&registxt==='注册'?'main-btn':'disabled-btn'"
4446
:text="registxt"
45-
style="margin: 0;width: 100%;height: 48px;font-size: 18px;line-height: 48px"
47+
style="margin: 0;width: 100%;height: 40px;font-size: 15px;line-height: 40px"
4648
@btnClick="regist"
4749
>
4850
</y-button>
4951
</div>
5052
<div class="border" style="margin-bottom: 10px;"></div>
5153
<ul class="common-form pr">
5254
<!-- <li class="pa" style="left: 0;top: 0;margin: 0;color: #d44d44">{{registered.errMsg}}</li> -->
53-
<li style="text-align: center;line-height: 48px;margin-bottom: 0;font-size: 12px;color: #999;">
54-
<span>如果您已拥有 咕泡商城 账号，则可在此</span>
55+
<li style="text-align: center;line-height: 48px;margin-bottom: 0;font-size: 15px;color: #999;">
56+
<span>如果您已拥有 <span style="color:royalblue">咕泡商城</span> 账号，则可在此</span>
5557
<a href="javascript:;"
5658
style="margin: 0 5px"
57-
@click="toLogin">登陆</a>
59+
@click="toLogin">登录</a>
5860
</li>
5961
</ul>
6062
</div>
@@ -67,7 +69,7 @@
6769
<script>
6870
import YFooter from '/common/footer'
6971
import YButton from '/components/YButton'
70-
import { register, geetest } from '/api/index.js'
72+
import { register, initKaptcha } from '/api/index.js'
7173
require('../../../static/geetest/gt.js')
7274
// var captcha
7375
export default {
@@ -84,8 +86,10 @@ export default {
8486
userName: '',
8587
userPwd: '',
8688
userPwd2: '',
87-
errMsg: ''
89+
errMsg: '',
90+
captcha: ''
8891
},
92+
imageCode: '',
8993
agreement: false,
9094
registxt: '注册',
9195
statusKey: ''
@@ -124,6 +128,7 @@ export default {
124128
let userName = this.registered.userName
125129
let userPwd = this.registered.userPwd
126130
let userPwd2 = this.registered.userPwd2
131+
let captcha = this.registered.captcha
127132
if (!userName || !userPwd || !userPwd2) {
128133
this.message('账号密码不能为空!')
129134
this.registxt = '注册'
@@ -134,57 +139,40 @@ export default {
134139
this.registxt = '注册'
135140
return false
136141
}
142+
if (!captcha) {
143+
this.message('请输入验证码')
144+
this.registxt = '注册'
145+
return false
146+
}
137147
if (!this.agreement) {
138148
this.message('您未勾选同意我们的相关注册协议!')
139149
this.registxt = '注册'
140150
return false
141151
}
142-
// var result = captcha.getValidate()
143-
// if (!result) {
144-
// this.message('请完成验证')
145-
// this.registxt = '注册'
146-
// return false
147-
// }
148152
register({
149153
userName,
150154
userPwd,
151-
// challenge: result.geetest_challenge,
152-
// validate: result.geetest_validate,
153-
// seccode: result.geetest_seccode,
154-
statusKey: this.statusKey }).then(res => {
155+
captcha}).then(res => {
155156
if (res.success === true) {
156157
this.messageSuccess()
157158
this.toLogin()
158159
} else {
159160
this.message(res.message)
160-
// captcha.reset()
161-
this.regist = '注册'
161+
this.registxt = '注册'
162+
this.init_geetest()
163+
this.registered.captcha = ''
162164
return false
163165
}
164166
})
165167
},
166168
init_geetest () {
167-
geetest().then(res => {
168-
this.statusKey = res.statusKey
169-
window.initGeetest({
170-
gt: res.gt,
171-
challenge: res.challenge,
172-
new_captcha: res.new_captcha,
173-
offline: !res.success,
174-
product: 'popup',
175-
width: '100%'
176-
}, function (captchaObj) {
177-
// captcha = captchaObj
178-
captchaObj.appendTo('#captcha')
179-
captchaObj.onReady(function () {
180-
document.getElementById('wait').style.display = 'none'
181-
})
182-
})
169+
initKaptcha().then(res => {
170+
this.imageCode = 'data:image/gif;base64,' + res.result
183171
})
184172
}
185173
},
186174
mounted () {
187-
// this.init_geetest()
175+
this.init_geetest()
188176
},
189177
components: {
190178
YFooter,
@@ -201,11 +189,11 @@ export default {
201189
overflow-x: hidden;
202190
overflow-y: hidden;
203191
.input {
204-
height: 50px;
192+
height: 46px;
205193
display: flex;
206194
align-items: center;
207195
input {
208-
font-size: 16px;
196+
font-size: 14px;
209197
width: 100%;
210198
height: 100%;
211199
padding: 10px 15px;
@@ -236,7 +224,6 @@ export default {
236224
overflow: visible;
237225
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
238226
position: relative;
239-
background-image: url(/static/images/smartisan_4ada7fecea.png);
240227
background-size: 140px;
241228
background-position: top center;
242229
background-repeat: no-repeat;
@@ -364,6 +351,8 @@ export default {
364351
365352
.registered {
366353
h4 {
354+
background-image: -webkit-linear-gradient(#fff, #f1f1f1);
355+
background-image: linear-gradient(#fff, #f1f1f1);
367356
padding: 0;
368357
text-align: center;
369358
color: #666;
@@ -372,9 +361,10 @@ export default {
372361
-moz-box-shadow: none;
373362
box-shadow: none;
374363
font-weight: 700;
375-
font-size: 20px;
364+
font-size: 18px;
376365
height: 60px;
377366
line-height: 60px;
367+
border-radius:20px 10px 0px 0;
378368
}
379369
}
380370

‎gpmall-user/pom.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@
6363
<version>1.0-SNAPSHOT</version>
6464
<artifactId>commons-core</artifactId>
6565
</dependency>
66+
<dependency>
67+
<groupId>com.github.penggle</groupId>
68+
<artifactId>kaptcha</artifactId>
69+
<version>2.3.2</version>
70+
</dependency>
6671
</dependencies>
6772

6873
<build>

‎gpmall-user/src/main/java/com/gpmall/user/controller/CaptchaController.java‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
package com.gpmall.user.controller;
2+
3+
/**
4+
* 腾讯课堂搜索 咕泡学院
5+
* 加群获取视频：608583947
6+
* 风骚的Michael 老师
7+
*/
8+
9+
import com.gpmall.commons.result.ResponseData;
10+
import com.gpmall.commons.result.ResponseUtil;
11+
import com.gpmall.commons.tool.utils.CookieUtil;
12+
import com.gpmall.user.IKaptchaService;
13+
import com.gpmall.user.annotation.Anoymous;
14+
import com.gpmall.user.constants.SysRetCodeConstants;
15+
import com.gpmall.user.dto.KaptchaCodeRequest;
16+
import com.gpmall.user.dto.KaptchaCodeResponse;
17+
import org.apache.dubbo.config.annotation.Reference;
18+
import org.springframework.web.bind.annotation.*;
19+
20+
import javax.servlet.http.Cookie;
21+
import javax.servlet.http.HttpServletRequest;
22+
import javax.servlet.http.HttpServletResponse;
23+
24+
@RestController
25+
@RequestMapping("/user")
26+
public class CaptchaController {
27+
28+
@Reference
29+
IKaptchaService kaptchaService;
30+
31+
/**
32+
*
33+
*/
34+
@Anoymous
35+
@GetMapping("/kaptcha")
36+
public ResponseData getKaptchaCode(HttpServletResponse response) {
37+
KaptchaCodeRequest kaptchaCodeRequest=new KaptchaCodeRequest();
38+
KaptchaCodeResponse kaptchaCodeResponse=kaptchaService.getKaptchaCode(kaptchaCodeRequest);
39+
if(kaptchaCodeResponse.getCode().equals(SysRetCodeConstants.SUCCESS.getCode())){
40+
Cookie cookie=CookieUtil.genCookie("kaptcha_uuid",kaptchaCodeResponse.getUuid(),"/",60);
41+
cookie.setHttpOnly(true);
42+
response.addCookie(cookie);
43+
return new ResponseUtil<>().setData(kaptchaCodeResponse.getImageCode());
44+
}
45+
return new ResponseUtil<>().setErrorMsg(kaptchaCodeResponse.getCode());
46+
}
47+
48+
@Anoymous
49+
@PostMapping("/kaptcha")
50+
public ResponseData validKaptchaCode(@RequestBody String code,HttpServletRequest httpServletRequest) {
51+
KaptchaCodeRequest request = new KaptchaCodeRequest();
52+
String uuid = CookieUtil.getCookieValue(httpServletRequest, "kaptcha_uuid");
53+
request.setUuid(uuid);
54+
request.setCode(code);
55+
KaptchaCodeResponse response = kaptchaService.validateKaptchaCode(request);
56+
if (response.getCode().equals(SysRetCodeConstants.SUCCESS.getCode())) {
57+
return new ResponseUtil<>().setData(null);
58+
}
59+
return new ResponseUtil<>().setErrorMsg(response.getCode());
60+
}
61+
}

0 commit comments

Comments
 (0)