微信公众号网页登录，获取用户信息

0、参考

wechat登录前端代码.zip 下载
后端java代码 下载

1、接口信息配置

请填写接口配置信息，此信息需要你有自己的服务器资源，填写的URL需要正确响应微信发送的Token验证

URL=http://自己的域名/rest/WeChat/verify
Token=12345679

2、JS接口安全域名

域名=自己的域名

3、网页授权获取用户基本信息配置

网页服务>网页帐号>网页授权获取用户基本信息
授权回调页面域名=自己的域名

4、前端页面

获取用户信息，需点击确认

    $(function () {
        let appid = "appid的值";
        let redirect_uri = window.location.href;
        let scope = "snsapi_userinfo";  //snsapi_userinfo snsapi_base
        let code = getQueryString('code');

        if (code == null) {
            let url_authorize = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid
                + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=' + scope + '&state=123#wechat_redirect';
            console.log("url_authorize", url_authorize);
            window.location.href = url_authorize;
        } else {
            $.ajax({
                url: "http://自己的域名/rest/WeChat/userInfo", //要请求的后端地址
                type: "GET", //数据发送的方式(POST或者GET)
                data: { code: getQueryString('code') }, //需要传递的参数
                dataType: "json", //后端返回的数据格式
                success: function (result) {//ajax请求成功后触发的方法
                    console.log("userInfo", result); //result为响应内容
                },
                error: function () {//ajax请求失败后触发的方法
                    console.log('Send Request Fail..');
                }
            });
        }
    });
    function getQueryString(name) {
        // const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
        const url_string = window.location.href;
        const url = new URL(url_string);
        return url.searchParams.get(name);
    }

获取用户openid，静默

    $(function () {
        let appid = "appid的值";
        let redirect_uri = window.location.href;
        let scope = "snsapi_base";  //snsapi_userinfo snsapi_base
        let code = getQueryString('code');

        if (code == null) {
            let url_authorize = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid
                + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=' + scope + '&state=123#wechat_redirect';
            console.log("url_authorize", url_authorize);
            window.location.href = url_authorize;
        } else {
            $.ajax({
                url: "http://自己的域名/rest/WeChat/userBase", //要请求的后端地址
                type: "GET", //数据发送的方式(POST或者GET)
                data: { code: getQueryString('code') }, //需要传递的参数
                dataType: "json", //后端返回的数据格式
                success: function (result) {//ajax请求成功后触发的方法
                    console.log("userBase", result); //result为响应内容
                },
                error: function () {//ajax请求失败后触发的方法
                    console.log('Send Request Fail..');
                }
            });
        }
    });
    function getQueryString(name) {
        // const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
        const url_string = window.location.href;
        const url = new URL(url_string);
        return url.searchParams.get(name);
    }

5、后端代码

    @GetMapping("/userInfo")
    public Result userInfo(String code) {
        if (StringUtils.isBlank(code))
            return Result.error("code为空");
        Map<String, Object> cc22 = new LinkedHashMap<>();
        //点击链接直接返回过来的code,第二步获取access_token
        String format_url_access_token = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
        String url_access_token = String.format(format_url_access_token, APP_ID, APP_SECRET, code);
        String data_access_token = HttpUtil.get(url_access_token);
        JSONObject jsonObject_access_token = JSONObject.parseObject(data_access_token);

        cc22.put("jsonObject_access_token", jsonObject_access_token);
        String accessToken = jsonObject_access_token.getString("access_token");
        //用户唯一标识,后续用于微信支付
        String openId = jsonObject_access_token.getString("openid");
        //第三步可以不用，直接用第四步
        String format_url_userinfo = "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s&lang=zh_CN";
        String url_userinfo = String.format(format_url_userinfo, accessToken, openId);
        String data_userinfo = HttpUtil.get(url_userinfo);
        JSONObject jsonObject_userinfo = JSONObject.parseObject(data_userinfo);
        cc22.put("jsonObject_userinfo", jsonObject_userinfo);
        //这是返回的就是用户信息,这里就可以将用户信息解析。然后保存到数据库
        //还有要考虑的问题,就是每次或者看你要不要更新用户信息,比如用户姓名,头像
        //map.put("nickName", jsonObject_userinfo.getString("nickname"));
        //map.put("imgUrl", jsonObject_userinfo.getString("headimgurl"));
        return Result.OK(cc22);
    }

    @GetMapping("/userBase")
    public Result userBase(String code) {
        if (StringUtils.isBlank(code))
            return Result.error("code为空");
        //点击链接直接返回过来的code,第二步获取access_token
        //https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
        String format_url_access_token = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
        String url_access_token = String.format(format_url_access_token, APP_ID, APP_SECRET, code);
        String data_access_token = HttpUtil.get(url_access_token);
        JSONObject jsonObject_access_token = JSONObject.parseObject(data_access_token);
        return Result.OK(jsonObject_access_token);
    }