Springboot集成微信扫码登入（测试号）

最新推荐文章于 2024-04-11 17:45:59 发布

昔醒

最新推荐文章于 2024-04-11 17:45:59 发布

阅读量1.7k

点赞数 4

分类专栏： java 文章标签： spring java java-ee

本文链接：https://blog.csdn.net/weixin_44407318/article/details/120870240

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Springboot集成微信扫码登入（测试号）

到微信公众号测试号管理

到微信公众号测试号管理

点击前往测试号平台
效果图

1，创建springboot项目

依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.66</version>
        </dependency>

配置文件

# 配置端口
server.port=8080

页面模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">
    </script>
</head>
<body>
<div id="weixin"></div>
<script>
    var obj = new WxLogin({
        self_redirect:true,
        id:"weixin", // 要与你在那里生成二维码的div id 一致
        appid: "你测试号的appid", // 你申请的appid
        redirect_uri: encodeURIComponent("http://ip地址/weixinlogin"),// 回调url，ip地址一定是内网穿透过的，然后你扫码后，微信官方返回一些参数（code，state）
        scope: "snsapi_login,snsapi_userinfo",// 你的权限
        state: "STATE",// 微信官方接口为了防止跨域攻击要加的参数 可以默认就这个
    });
</script>
</body>
</html>

新建一个controller(用于扫码登入的)

@RestController
@Slf4j
public class WechatLoginController {

    @Autowired
    private RestTemplate restTemplate;

	/**
	*  当扫码之后微信会来调用的，/weixinlogin记得跟前端的回调url的最后面一样
	*/
    @RequestMapping(value = "/weixinlogin",name = "进入微信登录方法")
    public String weixinlogin(String code,String state) {
        // 查看获取到的code
        log.info("进入微信登入方法，code为：{}, state为：{}",code,state);
        
        // 根据code获取access_token和openId
        // 微信请求地址标准格式url
        String getAccessTokenAndOpenIdUrl="https://api.weixin.qq.com/sns/oauth2/access_token?appid="+ 你测试号的appid +"&secret="+你测试号的secret+"&code="+code+"&grant_type=authorization_code";
        
        // 向微信发送请求获取access_token与openid
        Map map = JSON.parseObject(restTemplate.getForObject(getAccessTokenAndOpenIdUrl, String.class), Map.class);
        
        // 开始遍历参数
        map.forEach(
                (key,value)->{
                    log.info("根据code请求微信获取的值，key：{}, value：{}",key,value);
                }
        );
        
        // 获取accessToken
        String access_token = map.get("access_token").toString();
        
        // 获取openid
        String openid = map.get("openid").toString();
        
        // 再次请求微信平台，获取用户信息
        String getUserInfoUrl="https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid+"&lang=zh_CN";
        
        // 发起请求
        Map userInfoMap = JSON.parseObject(restTemplate.getForObject(getUserInfoUrl, String.class), Map.class);
        userInfoMap.forEach((key, value)-> {
            log.info("微信获取用户信息，key为：{}, value为：{}",key,value);
        });
		// 把当前用户信息返回
        return JSON.toJSONString(userInfoMap);
    }
 
}

在新建一个controller（用于跟微信服务器通信的）
简单理解就是，我们自己的服务器每次去请求微信登入的接口需要先验证一下（微信防止伪造请求），那我们这个controller就是负责去告诉微信服务器，我们是真的请求，验证通过，那我们就可以进行下一步登入操作

@RestController
@RequestMapping(value = "/wx")
@Slf4j
public class WechatMsgController {

    /**
     * 验证微信消息
     *
     * @param request
     * @return
     */
    @GetMapping(value = "/check")
    public String checkWxMsg(HttpServletRequest request) {
        log.info("进入微信校验的接口了");
        /**
         * 微信加密签名
         */
        String signature = request.getParameter("signature");
        /**
         * 随机字符串
         */
        String echostr = request.getParameter("echostr");
        /**
         * 时间戳
         */
        String timestamp = request.getParameter("timestamp");
        /**
         * 随机数
         */
        String nonce = request.getParameter("nonce");
 
        String[] str={timestamp,nonce, "填写在测试号接口配置那里的Token"};
        //将token、timestamp、nonce三个参数进行字典序排序
        Arrays.sort(str);
        StringBuffer sb = new StringBuffer();
        //将三个参数字符串拼接成一个字符串进行sha1加密
        for (String param:str) {
            sb.append(param);
        }

        //获取到加密过后的字符串
        String encryptStr = EncryptionUtil.encrypt("SHA1", sb.toString());
        //判断加密后的字符串是否与微信的签名一致
        if(signature.equalsIgnoreCase(encryptStr)){
            log.info("签名一致可以通过");
            return echostr;
        }

        log.error("这不是微信发来的消息！！");
        return null;
    }
}

第三个controller是负责跳转页面的

@Controller
@RequestMapping("/wx")
@Slf4j
public class HellowController {

    @RequestMapping("/doLogin")
    public String doLogin(){
        log.info("前往登入页面");
        return "wx_login"; // 跟页面模板名字一样才能跳转
    }
}

2，开始配置内网穿透

下载链接:
https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-windows-amd64.zip

下载解压后：
在这里插入图片描述
开始配置
接下来需要做的就是对ngrok进行配置。我们需要配置authtoken（账户凭证）。这时，我们需要到 Ngrok官网注册一个账号，然后在用户中心里可以查到我们的authtoken（账户凭证），authtoken是每个用户的身份凭证，请注意保密
在这里插入图片描述 生成凭证
复制我们的用户凭证，并在ngrok命令行（cmd）中，输入下面的命令，按回车键执行

ngrok authtoken 你自己的凭证

成功之后
执行成功后，命令行界面中会出现下面的信息。此时，代表配置成功。ngrok程序已经在你的用户目录下，创建一个.ngrok2文件夹，并在文件夹中创建一个配置文件ngrok.yml

Authtoken saved to configuration file: C:\Users\xxx/.ngrok2/ngrok.yml

启动ngrok，把内网映射到外网
在ngrok里面执行

ngrok http 8080

则代表把8080端口进行外网映射了，原来localhost:8080/xx的链接，现在可以 http://428bxxxxx.ngrok.io/xx去进行访问了
在这里插入图片描述到此内网穿透结束

3，开始配置测试号

在这里插入图片描述 首先配置接口配置管理

URL的参数：http://ip地址/wx/check      注：一定要内网穿透的（后面的wx/check跟之前定义的第二个controller路径要一样）
Token的参数：xxxxx					 注：可以自己随便填写，但是要保存，到时候要用到这个token

配置JS接口安全域名

域名的参数：ip地址        
注：不要加http，就填写内网穿透的域名即可，比如http://www.baidu.com，那就只需要填写www.baidu.com

配置网页授权接口开通
在这里插入图片描述这里的授权回调页面域名跟JS接口一样的

4，接下来开始登入

先访问扫码登入页面
在这里插入图片描述 然后用数据开始扫码
注意观察后端的日志
后端出现这些说明登入成功

如果扫码出现此公众号没有scope权限10005
那么可以采用访问链接的方式进行登入（具体什么原因小编找了好久暂时没有找到）
把下面链接在微信手机端打开
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxx&redirect_uri=xxxxx&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

appid: 你测试号的appid
redirect_uri: 你扫码登入时访问的url，跟上面第一个controller的url链接是一样的
比如：http:内网穿透ip/weixinlogin

至此springboot集成微信扫码登入全部完结。

昔醒

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
Springboot集成微信扫码登入（测试号）

Springboot集成微信扫码登入（测试号）到微信公众号测试号管理1，创建springboot项目2，开始配置内网穿透3，开始配置测试号4，接下来开始登入到微信公众号测试号管理点击前往测试号平台1，创建springboot项目依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-sta
复制链接

扫一扫