Offer

SSM-网站后台管理系统制作(3)---Google的reCaptcha验证码

  网上找了好久,也不知道怎么接入,后来看到一篇博客才搞好  

  reCaptcha官网:https://www.google.com/recaptcha/admin#site/344147946

  参考博客:https://blog.csdn.net/baidu_38990811/article/details/83546143

  

  步骤一:按照官网介入网站获得私钥密钥就好了(Hbulider上面测试的话需要加入127.0.0.1

 

  

步骤二:按照上面步骤基本就可以在Hbulider上面显示一个基本的验证码了

代码如下(私钥是Controller层用于判断发送给Google的)

  

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src='https://www.recaptcha.net/recaptcha/api.js'></script>
</head>
<body>
 
<form action="/check" method="post">
     <!-- 公钥 -->
    <div class="g-recaptcha" data-sitekey="这里是您的公钥"></div>
    <p><button class="btn btn-primary" type="submit">登录</button>
</form>
</body>
</html>

 

   步骤三:然后把该div放到你想加入的form表单里面,发送给Controller层即可,下面分析Controller层

   步骤四:查看json中的数据:

    https://www.recaptcha.net/recaptcha/api/siteverify 

    上面这个网站即可看到返回数据为String类型,没转成json,单纯就string.indexof查找false就可以判断了,整体过程还是蛮简单的,可能由于需要科学上网的原因,导致网上关于该验证码的

完整讲解很少。

 

    总体思路就是:前端发送form表单给Controller层,然后后台给Google发送数据,Google返回是否为robat(在string json中),然后用户判断json中是否有false(正确就返回success,用户也可以

将false改成success),然后前端接收数据,判断用户是否通过(可有可无,和上面的CSDN博客一样,只是为了增加用户体验,下面给出该js代码)

 1 @RequestMapping(value="/login")
 2      public ModelAndView login(@RequestParam("loginname") String loginname,
 3              @RequestParam("password") String password,
 4              HttpSession session,
 5              ModelAndView mv, HttpServletRequest request){
 6         /****************************验证码业务************************************/
 7         String checkCode = request.getParameter("g-recaptcha-response");
 8         Map<String, Object> map = new HashMap<>();
 9          // 私钥
10         map.put("secret", "这里写你的私钥");
11         map.put("response", checkCode);
12         String json = MyHttpRequest.sendPost("https://www.recaptcha.net/recaptcha/api/siteverify", map, "UTF-8");
13         /*************************************************************************/
14         
15         // 调用业务逻辑组件判断用户是否可以登录
16         User user = hrmService.login(loginname, password);
17         if(user != null && json.indexOf("false") == -1){

 

  

<script type="text/javascript">
    function check_grecaptcha() {
        if(grecaptcha.getResponse() == ""){
            alert("请先进行人机验证");
            return false;
        }
        else{
            alert("验证通过");
            return true;
        }
    }
    </script>

  到此,Google的reCATPCHA验证码就成功加入到SSM中了 

posted @ 2019-01-06 09:19  Empirefree  阅读(984)  评论(0编辑  收藏  举报