史上最详细微信小程序授权登录与后端SprIngBoot交互操作说明，附源代码，有疑惑大家可以直接留言，蟹蟹 2021.11.29 完善更新小程序代码，2022.4.27 更新

2021.11.29 更新文章

你好，我是博主，一起学习吧！！！

写这篇文章的原因，主要是因为最近在写毕业设计，用到了小程序，这中间曲曲折折，一言难尽啊。毕业设计真的让人麻脑阔??。唉

最近在持续更新，每天推送完代码，遇到的问题都记下来，希望对大家也能有所帮助。

在网上找了很多很多，看了不下几十篇，说实话，有些给出了核心代码，添上一个微信官方的那张流程图就结束了，会的人一下就懂了。但是说实话，真的不适合入门学者，浪费很多时间都不一定能解决问题，将代码复制完不是少这就是少那，或者就是不齐，不然就是跑不起来，不知道看到这篇文章的你有没有遇到过这样的问题。

---

所以我自己将踩坑的经历写下来了，希望能够帮助到大家，开源进步，交流进步，一起学习！！！

---

注意

挺多小伙伴遇到过这个问题，如果大家对文章内容存有疑惑或者实现不了这个小demo亦或者文章中有什么错误，可以直接评论、留言或可以直接发问题到 邮箱：nzc_wyh@163.com

希望能够帮助到大家(当然，如果我可以做到的话 ??)

看到都会尽快回复大家，谢谢大家，一起努力

---

微信官方文档

一、微信小程序官方登录流程图

个人理解：

1. 调用wx.login() 获取code，这个code的作用是实现微信临时登录的url中的一个非常重要的参数。

   • 微信授权的url=“https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code”
   • js_code所用到的值就是 获取到的code。

2. 把获取到的code传给我们自己的SpringBoot后端，由我们后端向微信接口服务发送请求。

   String url = "https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code";
   String replaceUrl = url.replace("{0}", appid).replace("{1}", secret).replace("{2}", code);
   String res = HttpUtil.get(replaceUrl);//后面有代码的，莫急
   

   • appid：应用ID，secret：应用密钥，js_code：前台传给我们的code

   • secret获取方式：

     1. 进入微信公众平台
     2. 左侧菜单选择【开发管理】
     3. 右侧tab选择【开发设置】
     4. AppSecret栏右侧点击重置会弹出一个二维码，需要开发者扫描二维码才可以重置AppSecret。出现AppSecret后点击复制，并保存你的AppSecret。
     5. 没保存就只能重新生成了。

3. 后端发送请求后获取到的返回信息：

   {"session_key":"G59Evf/Em54X6WsFsrpA1g==","openid":"o2ttv5L2yufc4-sdf"}
   

4. 按照官方文档所讲：自定义登录态与openid和session_key关联，有很多方式可以实现的，如：

   • 第一种方式：我们可以将openid和session_key存进redis中，前端来访问的时候带上就能够访问了。
   • 第二种方式：利用jwt方式生成Token返回给前端，让前端下次请求时能够带上，就能允许他们访问了。

5. 前端将token存入storage

6. 前端在wx.request()发起业务请求携带自定义登录态，后端进行请求头的检查就可以了。

7. 后端返回业务数据

上述就是官方的方式，但是在现在的时代，数据是非常重要的，不可能说不将用户数据持久化的，所以这个流程会稍稍多一些操作的。

二、个人实现登录流程图

三、小程序端

先说一下，这里只是测试的Demo，是分开测试的，先在前端把我要测试的数据获取出来。

我本地没有微信的编程环境，我是拿小伙伴的微信环境进行测试的。

2.1、调用wx.login()

wx.login({
    success:function(res){
        if(res.code){
            console.log(res.code);
        }
    }
})

就是这样的一个字符串：

我们将这个返回的code,先保存起来，稍后我们在后端测试中会用上的。

2.2、调用getUserInfo()

<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me <tton>


// 微信授权
wx.getUserInfo({
    success: function(res) {
		console.log(res);
    }
})

打印出来是这样的一些数据。

我们需要保存的是

1. encrytedData：包括敏感数据在内的完整用户信息的加密数据（即可以通过反解密，获取出用户数据），详见 用户数据的签名验证和加解密
2. iv：加密算法的初始向量，详见