spring boot集成阿里滑块验证

作者: LegendaryTao | 来源:发表于2019-08-08 11:02 被阅读0次

一、效果

image.png

二、java代码
1、properties

aliyun:
  properties:
    regionid: cn-hangzhou
    accessKeyId: LTAfadfanqxk2UGGX
    accessKeySecret: zZy08Y8EPafdfsfasMKKzxHaElFja
    appKey: FFFF0N00000342354

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * 读取配置
 */
@ConfigurationProperties(prefix = "aliyun.properties")
@Component
@Data
public class AliyunProperties {

    private String regionid;

    private String accessKeyId;

    private String accessKeySecret;

    private String appKey;
}

2、pom.xml

<dependency>
      <groupId>com.aliyun</groupId>
      <artifactId>aliyun-java-sdk-core</artifactId>
      <version>3.0.6</version>
</dependency>
<dependency>
      <groupId>com.ylyc.3dr</groupId>
      <artifactId>aliyun-java-sdk-afs</artifactId>
      <version>1.0.0</version>
</dependency>

3、beanConfig

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class IAcsClientConfig {

    @Autowired
    private AliyunProperties aliyunProperties;

    @Bean
    public IAcsClient client() throws Exception {
        IClientProfile profile = DefaultProfile.getProfile(aliyunProperties.getRegionid(), aliyunProperties.getAccessKeyId(), aliyunProperties.getAccessKeySecret());
        IAcsClient client = new DefaultAcsClient(profile);
        DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
        return client;
    }

}

4、登录controller

import com.aliyuncs.IAcsClient;
import com.ctrip.entity.LoginModel;
import com.ctrip.spring.utils.IPUtil;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigRequest;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigResponse;
import com.ctrip.web.manage.config.AliyunProperties;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
@RequestMapping("/manage")
public class LoginController1 {

    @Autowired
    private AliyunProperties aliyunProperties;

    @Resource
    private IAcsClient client;

    /**
     * 登录验证
     */
    @RequestMapping("/login")
    public String verification(HttpServletRequest request,HttpServletResponse response, Model model, LoginModel loginModel) {
        boolean isAuth = authValidate(loginModel,request);
        if(!isAuth){
            model.addAttribute("msg", "验证失败");
            return "login";
        }
        return "login";
    }

    /**
     * 验证滑块
     * @param loginModel
     * @param request
     * @return
     */
    private boolean authValidate(LoginModel loginModel, HttpServletRequest request) {
        String requestIp = IPUtil.getRemortIP(request);
        AuthenticateSigRequest authRequest = new AuthenticateSigRequest();
        // 必填参数，从前端获取，不可更改
        authRequest.setSessionId(loginModel.getSessionId());
        // 必填参数，从前端获取，不可更改
        authRequest.setSig(loginModel.getSig());
        // 必填参数，从前端获取，不可更改
        authRequest.setToken(loginModel.getToken());
        // 必填参数，从前端获取，不可更改
        authRequest.setScene(loginModel.getScene());
        // 必填参数，后端填写
        authRequest.setAppKey(aliyunProperties.getAppKey());
        // 必填参数，后端填写
        authRequest.setRemoteIp(requestIp);

        try {
            AuthenticateSigResponse acsResponse = client.getAcsResponse(authRequest);
            if(acsResponse.getCode() != 100) {
                System.out.println("=======登录验签失败===" + requestIp);
                return false;
            } else {
                return true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }   
}

5、IPUtil

import org.apache.commons.lang.StringUtils;
import javax.servlet.http.HttpServletRequest;
public class IPUtil {
    
    /**
     * 获取ip地址
     * @param request
     * @return
     */
    public static String getRemoteIP(HttpServletRequest request) {
        String ip = null;
        try {
            ip = request.getHeader("x-forwarded-for");
            if (StringUtils.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
                ip = request.getHeader("Proxy-Client-IP");
            }
            if (StringUtils.isEmpty(ip) || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
                ip = request.getHeader("WL-Proxy-Client-IP");
            }
            if (StringUtils.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
                ip = request.getHeader("HTTP_CLIENT_IP");
            }
            if (StringUtils.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
                ip = request.getHeader("HTTP_X_FORWARDED_FOR");
            }
            if (StringUtils.isEmpty(ip) || "unknown".equalsIgnoreCase(ip)) {
                ip = request.getRemoteAddr();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ip;
    }
}

6、entity

import lombok.Data;

@Data
public class LoginModel {

    private String sessionId;
    private String sig;
    private String token;
    private String scene;
    private String appKey;
    private String remoteIp;
    private String phone;
    private String password;

    private String username;
    private String userpassword;
    private String code;
    private String rememberMe;

}

7、html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>C数据|登录</title>
<meta
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport">
<link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{dist/css/AdminLTE.min.css}">
<link rel="stylesheet" th:href="@{plugins/iCheck/square/blue.css}">
<script th:src="@{plugins/jQuery/jquery-2.2.3.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{plugins/iCheck/icheck.min.js}"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <style type="text/css">
        .nc_scale span {
            height: 34px !important;
        }
    </style>
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="index2.html"><b>C数据</b>后台管理</a>
        </div>
        <div class="login-box-body">
            <form id="loginform" th:action="@{/manage/login}"
                th:method="post">
                <div class="form-group has-feedback">
                    <input name="username" th:value="${username}" type="username" class="form-control"
                        placeholder="用户名"> <span
                        class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input name="userpassword" type="password" class="form-control"
                        placeholder="密码"> <span
                        class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

                <!--请求后台所需数据-->
                <input type="hidden" id="sessionId" name="sessionId"/>
                <input type="hidden" id="sig" name="sig"/>
                <input type="hidden" id="token" name="token"/>
                <input type="hidden" id="scene" name="scene"/>

                <div class="row">
                    <div class="checkbox">
                        <label> <input name="rememberMe" type="checkbox">
                            下次自动登录
                        </label>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary pull-right">登录</button>
                </div>
            </form>
            <div th:if="${msg}!=null" class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <p th:text="${msg}"></p>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $('input').iCheck({
                checkboxClass : 'icheckbox_square-blue',
                radioClass : 'iradio_square-blue',
                increaseArea : '20%' // optional
            });
        });
        var nc_appkey = 'FFFF0N00000342354';  // 应用标识,不可更改,您可以从阿里云console的配置里找到它正确的值

        var nc_token = [nc_appkey, (new Date()).getTime(), Math.random()].join(':');
        var NC_Opt =
            {
                renderTo: "#your-dom-id",
                appkey: nc_appkey,
                scene: "nc_login",
                token: nc_token,
                customWidth: 320,
                trans:{"key1":"code0"},
                elementID: ["usernameID"],
                is_Opt: 0,
                language: "cn",
                isEnabled: true,
                timeout: 3000,
                times:5,
                apimap: {
                    // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                    // 'get_captcha': '//b.com/get_captcha/ver3',
                    // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                    // 'get_img': '//c.com/get_img',
                    // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                    // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                    // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                    // 'umid_serUrl': 'https://g.com/service/um.json'
                },
                callback: function (data) {
                    $("#sessionId").val(data.csessionid);
                    $("#token").val(nc_token);
                    $("#sig").val(data.sig);
                    $("#scene").val("register");
                }
            }
        var nc = new noCaptcha(NC_Opt)
        nc.upLang('cn', {
            _startTEXT: "请按住滑块，拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
            _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
        })
    </script>
</body>
</html>

spring boot集成阿里滑块验证

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读