java实现微信二维码登录功能

超、凢脫俗 2024-02-19 19:51 8阅读 0赞

实现流程：jsp页面点击微信图标登录
    发起url请求一个jsp页面
    该jsp页面调用微信提供的js方法请求返回二维码显示（这里指定回调url等参数） 
    用手机微信扫码后自动调用上面指定的回调函数，并自动传入微信官方给我们返回的参数 
    在回调函数里面用httpClinet请求微信官方获取必要参数与用户信息，设值进model
    返回登录成功的页面

1.首先来一个jsp页面 loginPage.jsp，请求微信登录

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>登录</title>
    
        <style type="text/css">
            #text{
                margin: 0 auto;
                width: 100px;
                text-align: center;
            }
            #logo{
                margin: 30px auto;
                width: 100px;
            }
        </style>
    
    </head>
    <body>
    <div id="text"><h1>登录</h1></div>
    <div id="logo"><a href="weixinLogin"><img src="/weixinLogo.jpg" width="100px"></a></div>
    </body>
    </html>

请求该页面的controller

@RequestMapping("/loginPage")
        public String loginPage(){
            return "login/loginPage";
        }

上面jsp用到的图片Logo，直接百度微信logo图就行了

效果就这样：

![20190411120107658.png][]

2.点击图标发起请求

@RequestMapping("/weixinLogin")
        public String weixinLogin(){
            return "login/weixinLogin";
        }

该请求直接去到一个jsp页面

该jsp页面，调用微信官方接口，获取二维码，显示在该页面

注意：这里的appid是需要服务类型的微信公众号的，并且需要通过验证，不然返回说scope参数不正确，其实是因为你的微信公众号是订阅类型的或者没有通过验证，下面的secret也是一样

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>微信登录</title>
    
        <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                var obj = new WxLogin({
                    id:"login_container",
                    appid: "你的appid",
                    scope: "snsapi_login",  // 固定参数，微信官方提供的解析参数
                    redirect_uri: "/callBackLogin",   // 回调url，就是你扫码后，微信官方返回一些参数（code，state），然后调用你这里指定的方法
                    state: "",   // 该参数可以不写
                    style: "black",  //二维码黑白风格，该参数可以不写
                    href: "https://某个域名下的css文件"   // 该参数可以不写
                });
    
            });
    
        </script>
    
    </head>
    <body>
        <div id="login_container"></div>
    </body>
    </html>

3.当你扫描二维码后，自动调用你指定的回调函数

函数利用回调的参数code，state去请求微信官方地址获取access\_token，openid，还有用户信息

然后把用户信息放到model，返回登录成功的页面

//微信扫码后的回调方法，里面用获取的参数code，state去请求微信官方地址获取access_token，openid，还有用户信息
        @RequestMapping("/callBackLogin")
        public String login(HttpServletRequest request, HttpServletResponse response, Model model){
            String code = request.getParameter("code");
            String state = request.getParameter("state");
            // System.out.println("code=" + code);
            // System.out.println("state=" + state);
            String url = "https://api.weixin.qq.com/sns/oauth2/access_token?";
            url += "appid=你的appid";
            url += "&secret=你的secret";
            url += "&code=" + code + "&grant_type=authorization_code";
            JSONObject jsonObject = this.httpGet(url);
            String at = jsonObject.getString("access_token"); // 获取微信开放平台票据号
            String openId = jsonObject.getString("openid");  // 获取登录微信的唯一凭证号
            // System.out.println("at=" + at);
            // System.out.println("openId=" + openId);
            url="https://api.weixin.qq.com/sns/userinfo?access_token="+at+"&openid="+openId;  // 该url用于从微信那里获取用户数据
            jsonObject = this.httpGet(url);
            // System.out.println("用户信息"+jsonObject);
            model.addAttribute("userInfo", jsonObject);  // 把用户信息放进request，给前端页面调用显示
            // 查询数据库，判断这个微信的openid是否存在，如果不存在，新增到数据库表（自动创建一个用户,保存微信返回的openid），如果已存在，直接登录成功）
            // 这里查询代码自己加吧
            return "loginSuccess";
        }
    
        // 使用htpClient发送url请求获取返回，用阿里的fastjson解析json
        public JSONObject httpGet(String url) {
            JSONObject jsonResult = null;
            try {
                // DefaultHttpClient client = new DefaultHttpClient();
                CloseableHttpClient client = HttpClients.createDefault();
                HttpGet request = new HttpGet(url);
                // HttpResponse response = client.execute(request);
                CloseableHttpResponse response = client.execute(request);
                if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
                    String strResult = EntityUtils.toString(response.getEntity(),"UTF-8"); //此处设定编码格式
                    jsonResult = JSON.parseObject(strResult);
                } else {
                    System.out.println("请求出错");
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            return jsonResult;
        }

这个controller的方法里面用到httpClient和fastjson，放上maven

<dependency>
         <groupId>org.apache.httpcomponents</groupId>
         <artifactId>httpclient</artifactId>
         <version>4.5.2</version>
    </dependency>
    <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>fastjson</artifactId>
         <version>1.2.47</version>
    </dependency>

到这里基本上就完成了，回调函数的功能在代码注释上非常详细，不做多说了，登录成功返回的页面，自己根据需求编写，用户信息已经放在了model里，不知道返回用户信息的属性的，打印在控制台一看便知。

[20190411120107658.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7e843944df3e4bfa940de2800978298e.png