参考的是cmswing,及geetest官方的源码
步骤如下:
1. 极验申请id/key
2. 创建service,调用第三方
3. 控制器编写
4. 前台ajax传值,获取,显示
service代码
'use strict';
/**
*调用第三方极验验证
*/
import Geetest from 'geetest';
export default class extends think.service.base {
/**
* init
* @return {} []
*/
init(http){
super.init(http);
}
/* 初始化 */
async register(){
// 配置公匙
let geetest = new Geetest({
geetest_id: 'bd6d60a559314a9b73235c7aedad68ce',
geetest_key: 'df5cc9df7498fa104362fec789cbb053'
});
// 初始化
let register=() =>{
let deferred = think.defer();
// 向极验申请一次验证所需的challenge
geetest.register(function (err,data) {
console.log(data);
deferred.resolve({
gt: geetest.geetest_id,
challenge: data.challenge,
success: data.success
});
});
return deferred.promise;
}
return await register();
}
// 二次服务器验证
async validate(data,type){
// 配置公匙
let geetest = new Geetest({
geetest_id: 'bd6d60a559314a9b73235c7aedad68ce',
geetest_key: 'df5cc9df7498fa104362fec789cbb053'
});
//验证
let validate = (data)=>{
let deferred = think.defer();
geetest.validate({
challenge: data.geetest_challenge,
validate: data.geetest_validate,
seccode: data.geetest_seccode
}, function (err, result) {
console.log(result);
var data = {status: "success"};
if (err || !result) {
console.log(err);
data.status = "fail";
}
deferred.resolve(data);
});
return deferred.promise;
}
return await validate(data);
}
}
模块是后台admin 控制器是public
'use strict';
export default class extends think.controller.base {
/**
* public action
* @return {Promise} []
*/
async signinAction(){
//用户登录
let is_login = await this.islogin();
let Geetest = think.service("geetest");
console.log(Geetest);
if(this.isPost()){
//验证码
// if(1==this.setup.GEETEST_IS_ADMLOGIN){
if(1){
let Geetest = think.service("geetest"); //加载 commoon 模块下的 geetset service
let geetest = new Geetest();
let res = await geetest.validate(this.post());
if("success" != res.status){
this.http.error = new Error("验证码不正确");
return think.statusAction(702, this.http);
}
}
let username = this.post('username');
let password = this.post('password');
password = encryptPassword(password);
let res = await this.model("member").signin(username,password,this.ip(),1,1);
if(0<res.uid){
//记录用户登录行为
await this.model("action").log("user_login","member",res.uid,res.uid,this.ip(),this.http.url);
//console.log(11111111111111);
await this.session('userInfo', res);
//TODO 用户密钥
this.redirect('/admin/index');
}else { //登录失败
let fail;
switch(res) {
case -1: fail = '用户不存在或被禁用'; break; //系统级别禁用
case -2: fail = '密码错误'; break;
case -3: fail = '您无权登陆后台!'; break;
default: fail = '未知错误'; // 0-接口参数错误(调试阶段使用)
}
this.http.error = new Error(fail);
return think.statusAction(702, this.http);
}
}else{
if(is_login){
this.redirect('/admin/index');
}else{
let Geetest = think.service("geetest");
console.log(Geetest);
return this.display();
}
}
}
async islogin(){
let user = await this.session('userInfo');
let res = think.isEmpty(user) ? false : true;
return res;
}
//验证码
async geetestAction(){
let Geetest = think.service("geetest"); //加载 commoon 模块下的 geetset service
let geetest = new Geetest();
if(this.isPost()){
let post =this.post();
let res = await geetest.validate(post);
return this.json(res);
}else {
let res = await geetest.register(this.get('type'));
//console.log(res);
return this.json(res);
}
}
}
public_signin.html主要部分js
<div class="form-group">
<div class="form-control rounded input-lg text-center no-border">
<div id="captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
</div>
</div>
<div class="alert alert-danger hide" id="notice">
<button type="button" class="close" data-dismiss="alert">×</button>
<i class="fa fa-ban-circle"></i>请先拖动验证码到相应位置.
</div>
$(function () {
var handlerEmbed = function (captchaObj) {
$("#validate-submit").click(function (e) {
var validate = captchaObj.getValidate();
if (!validate) { $("#notice").addClass("show").removeClass("hide");
setTimeout(function () {
$("#notice").addClass("hide").removeClass("show");
}, 2000);
e.preventDefault();
}
});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#captcha");
captchaObj.onReady(function () {
$("#wait")[0].className = "hide";
});
// 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
};
$.ajax({
// 获取id,challenge,success(是否启用failback)
url: "/admin/public/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
// 使用initGeetest接口
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "float", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
}, handlerEmbed);
}
});
})