微信小程序登陆 + 基于JWT的Token 验证 + 内部用户登陆系统

旧城等待， 2022-11-16 10:57 1482阅读 0赞

## 微信小程序登陆 + 基于JWT的Token 验证 + 内部用户登陆系统 ##

公司需要做一个用于内部员工的培训系统的小程序，之前只是了解过，但是并没有自己动手做过小程序，以下是记录自己这次的开发过程。

### 文档层解析 ###

微信官方登陆文档  
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

![微信登陆流程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70]  
1、微信小程序端调用wx.login 获取一个code（这个code是变化的，即每次调用都会不同，导致session\_key也会变化，所以不要频繁调用这个，一定要在登陆态过期再掉。怎么校验登陆态是否过期呢可以用wx.checkSession(Object object) 去检验当前session\_key是否过期）

2、在服务器端可以调用auth.code2Session的接口去获取openid和session\_key和unionid  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 1]  
3、妥善保存session\_key 这个session\_key在之后解密中可以用的到。用jwt 带上session\_key和openid生成token(登陆态) 返回小程序  
4、小程序端把token存入缓存中 wx.setStorageSync(string key, any data)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 2]

5、所有wx.request发送请求到后端的接口中，都把这个登陆态token 放入请求头中。  
在app.js 封装一个 wx.request的公共方法用来像后端发请求.在这里统一把token取出来放到请求头中

6、后端做全局拦截器，处理token

### 代码层解析 ###

#### 1、在小程序index.js的onLoad方法中 做登陆检测 ####

例子：

const app = getApp()
    const {  http } = getApp()
    
      onLoad:  function() { 
        var _this = this
        wx.checkSession({ 
          success: (res) => { 
            // 判断是否有token,有token 说明通过了 学院 内部用户的验证
            var token = wx.getStorageSync('accessToken')
            if(token===null || token===undefined || token ==='') { 
                // 不含有token
                _this.loginNoPhoneNumber()
            } 
          },
          fail: (res) => { 
            console.log("未登陆")
            _this.loginNoPhoneNumber()
          },
        })
      },
      loginNoPhoneNumber () { 
        var _this = this
        wx.login({ 
          success (res) { 
            if (res.code) { 
              console.log(res.code)
              //发起网络请求
              http({ 
                url:'client/weChatLogin',
                data:{ 
                  code:res.code,
                },
              }).then(res => { 
                if (res.data.code === 1) { 
                  let openId = res.data.data.openId
                  wx.setStorageSync('openId',openId)
                  if(res.data.data.accessToken) { 
                    // 说明登陆成功
                    wx.setStorageSync('accessToken', res.data.data.accessToken)
                  } else { 
                     // 获取手机号的弹窗
                    _this.setData({ 
                      show : true
                    })
                  }
                }
              })
            } else { 
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
      },
      
      getphonenumberMethod (e) { 
        console.log(e.detail.errMsg)
        console.log(e.detail.iv)
        console.log(e.detail.encryptedData)
        var this_ = this
        this_.setData({ 
          iv : e.detail.iv,
          encryptedData : e.detail.encryptedData
        })
    
        // 用手机号登陆
        var openId_ = wx.getStorageSync('openId')
        http({ 
          url:'client/weChatLoginByPhoneNumber',
          data:{ 
            openId:openId_,
            encryptedData:e.detail.encryptedData,
            iv:e.detail.iv,
          },
        }).then(res => { 
          console.log(res.data)
          if (res.data.code === 1) { 
            wx.setStorageSync('accessToken', res.data.data.accessToken)
            this_.setData({ 
              show:false
            })
          } else{ 
            this_.setData({ 
              show:false,
              notInnerUser:true
            })
          }
        })
      },

index.wxml中代码

<van-popup show="{ { show }}" closeable close-icon="close" bind:close="onClose" custom-style="width:600rpx;height:500rpx;text-align:center">
            <View className='bg'>
                <view class="bg_authorization">
                  <text class="header-title">
                     需要您的授权登录
                  </text>
                </view>
                <View class="bg_require">
                  <text>由于您是第一次登陆，所以我\n们需要获取到您的手机号，\n请点击下方按钮来获取手机号</text>
                </View>
    
                <view class="button" >
                  <van-button type="primary" open-type="getPhoneNumber" bind:getphonenumber="getphonenumberMethod">获取手机号码</van-button>
                </view>
              </View>
          </van-popup>
    
          <van-popup show="{ { notInnerUser }}" close-icon="close" bind:close="onClose" custom-style="width:600rpx;height:500rpx;text-align:center">
            <View className='bg'>
                <view class="bg_authorization">
                  <text class="header-title">
                     对不起，您不是本公司员工
                  </text>
                </view>
               
              </View>
          </van-popup>

app.js中代码示例：

baseURL:'http://192.168.0.186:9089/train-app/',
    
      http(params){
        return new Promise((resolve, reject)=>{
          const accessToken = wx.getStorageSync('accessToken')
          console.log(this.baseURL + params.url)
          wx.request({
            url: this.baseURL + params.url,
            data:params.data,
            header:{
              accessToken: accessToken,
            },
            method: params.method||'POST',
            dataType:params.dataType||'json',
            success(res){
              resolve(res)
            },
            fail(err){
              reject(err)
            }
          })
        })
      },

这块逻辑是这样的，首先检测session是否过期，  
1、过期了，就走登陆接口重新获取code，然后发送后端client/weChatLogin 。这个接口是根据code 掉code2Session 获取到session\_key和openId。根据openId去用户表查询是不是内部用户。没查到说明该用户没有用小程序登陆成功过，没有存该用户openId到数据库，这个时候我们是不生成token的，需要让用户同意获取手机号。然后根据手机号判断是否内部用户，如果内部用户则保存openId和生成token  
2、没过期，session没过期说明调用过wx.login 但是不一定已经认证过了内部用户，判断用户是不是通过了系统的认证，需要查询有没有token。没有token则 走登陆流程client/weChatLogin，去获取token。  
client/weChatLogin 接口如果没用给token说明需要用户根据手机号去认证，则setData show为true来显示获取手机号的弹窗

在微信小程序中，想要获取用户手机号的方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 3]

只能是显示获取按钮，引导用户去点击授权。

当用户同意授权之后，会回调getphonenumberMethod 这个方法，然后我们在getphonenumberMethod 方法中 调用client/weChatLoginByPhoneNumber 这个接口去手机号登陆验证,验证成功会颁发token

#### 2、后台 登陆接口 ####

在pom中添加 jwt框架 jjwt的依赖

<dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>

在配置文件中添加jwt配置

jwt:
      # 加密密钥
      secret: iwqjhda8232bjgh432[cicada-smile]
      # token有效时长
      expire: 3600
      # header 名称
      header: token

写jwt生成token的 工具类

/** * @author ldt * @version 1.0 * @date 2021/4/6 13:46 */
    @Service
    public class Token { 
    
        private String secret;
        @Value("${jwt.secret}")
        public void setSecret(String secret_) { 
            secret = secret_;
        }
    
        private long expire;
        @Value("${jwt.expire}")
        public void setExpire(Long expire_) { 
            expire = expire_;
        }
    
        private String header;
        @Value("${jwt.header}")
        public void setHeader(String header_) { 
            header = header_;
        }
        /* * 根据身份ID标识，生成Token */
        public String getToken (SysUser user, String session_key){ 
            Date nowDate = new Date();
            //过期时间
            Date expireDate = new Date(nowDate.getTime() + expire * 1000);
            Map<String,Object> maps = Maps.newHashMap();
            maps.put("user",user);
            maps.put("sessionKey",session_key);
            return Jwts.builder()
                    .setHeaderParam("typ", "JWT")
                    .setSubject(JSONObject.toJSONString(maps))
                    .setIssuedAt(nowDate)
                    .setExpiration(expireDate)
                    .signWith(SignatureAlgorithm.HS512, secret)
                    .compact();
        }
        /* * 获取 Token 中注册信息 */
        public Claims getTokenClaim (String token) { 
            try { 
                return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();
            }catch (Exception e){ 
                e.printStackTrace();
                return null;
            }
        }
    
    }

编写 登陆controller

@RestController
    @RequestMapping("/client")
    @Api(tags = "小程序登录")
    public class WeChatLoginController { 
    
        @Autowired
        private SysWeChatLoginService sysWeChatLoginService;
    
        @PostMapping("/weChatLogin")
        @ApiOperation(value = "小程序登陆")
        public ResultVO login(@RequestBody ClientUserLoginDTO clientUserLoginDTO) { 
            return sysWeChatLoginService.weChatLogin(clientUserLoginDTO);
        }
    
        @PostMapping("/weChatLoginByPhoneNumber")
        @ApiOperation(value = "小程序登陆")
        public ResultVO loginByPhoneNumber(@RequestBody SysWeChatLoginDTO sysWeChatLoginDTO) { 
            return sysWeChatLoginService.weChatLoginByPhoneNumber(sysWeChatLoginDTO);
        }
    
    }

编写 登陆ServiceImpl

@Autowired
        private Token token;
    
        private static String appId;
    
        @Value("${wx.appId}")
        public void setAppId(String appIdNew) { 
            appId = appIdNew;
        }
    
        private static String appSecret;
    
        @Value("${wx.appSecret}")
        public void setAppSecret(String appSecretNew) { 
            appSecret = appSecretNew;
        }
    
        public static String session_key = "session_key";
        public static String openid = "openid";
        
    	@Override
        public ResultVO weChatLogin(ClientUserLoginDTO clientUserLoginDTO) { 
            // 1、根据code 获取 session_key 和 open_id
            String url = String.format(WeChatConstantVar.code2Session, appId, appSecret, clientUserLoginDTO.getCode());
            JSONObject jsonObject = AuthUtil.doGetJson(url);
            Map resultMap = JSONObject.parseObject(JSONObject.toJSONString(jsonObject), Map.class);
            String session_key_str = resultMap.get(session_key).toString();
            String openid_str = resultMap.get(openid).toString();
    
            // 很据appId 查询是否绑定过内部用户
            QueryWrapper<SysUser> queryWrapper = new QueryWrapper<>();
            queryWrapper.lambda().eq(SysUser::getOpenId, openid_str);
            List<SysUser> sysUsers = sysUserMapper.selectList(queryWrapper);
            // 将openId和sessionKey 进行绑定
            RedisUtils.set(ConstantVar.USER_SESSION_KEY_PREFIX + openid_str, session_key_str);
            WeChatLoginVO vo = new WeChatLoginVO();
            if (CollectionUtils.isEmpty(sysUsers)) { 
                // 说明此openId未绑定过内部用户
    
            } else { 
                // 说明此openId已经绑定过内部用户，直接下发token
                String token = this.token.getToken(sysUsers.get(0), session_key_str);
                vo.setAccessToken(token);
            }
            vo.setOpenId(openid_str);
            return ResultVO.success(vo);
        }
    
        @Override
        public ResultVO weChatLoginByPhoneNumber(SysWeChatLoginDTO sysWeChatLoginDTO) { 
            String openId = sysWeChatLoginDTO.getOpenId();
            String session_key = RedisUtils.get(ConstantVar.USER_SESSION_KEY_PREFIX + openId).toString();
            String phoneString = WxUtils.decryptData(sysWeChatLoginDTO.getEncryptedData(), session_key, sysWeChatLoginDTO.getIv());
            JSONObject phoneObject = JSONObject.parseObject(phoneString);
            String phoneNumber = phoneObject.getString("phoneNumber");
            //查询手机是否存在
            SysUser sysUser = sysUserMapper.checkUnique(phoneNumber);
            if (sysUser==null) { 
                return ResultVO.fail("登录失败,查无此人");
            }
            sysUser.setOpenId(openId);
            sysUserMapper.updateById(sysUser);
            String token = this.token.getToken(sysUser , session_key);
            WeChatLoginVO vo = new WeChatLoginVO();
            vo.setOpenId(openId);
            vo.setAccessToken(token);
    
            return ResultVO.success(vo);
        }

发送请求工具类AuthUtil

public class AuthUtil { 
        public static JSONObject doGetJson(String URL)  { 
            JSONObject jsonObject = null;
            HttpURLConnection conn = null;
            InputStream is = null;
            BufferedReader br = null;
            StringBuilder result = new StringBuilder();
            try { 
                //创建远程url连接对象
                URL url = new URL(URL);
                //通过远程url连接对象打开一个连接，强转成HTTPURLConnection类
                conn = (HttpURLConnection) url.openConnection();
                conn.setRequestMethod("POST");
                //设置连接超时时间和读取超时时间
                conn.setConnectTimeout(15000);
                conn.setReadTimeout(60000);
                conn.setRequestProperty("Accept", "application/json");
                //发送请求
                conn.connect();
                //通过conn取得输入流，并使用Reader读取
                if (200 == conn.getResponseCode()) { 
                    is = conn.getInputStream();
                    br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
                    String line;
                    while ((line = br.readLine()) != null) { 
                        result.append(line);
                        System.out.println(line);
                    }
                } else { 
                    System.out.println("ResponseCode is an error code:" + conn.getResponseCode());
                }
            } catch (MalformedURLException e) { 
                e.printStackTrace();
            } catch (IOException e) { 
                e.printStackTrace();
            } catch (Exception e) { 
                e.printStackTrace();
            } finally { 
                try { 
                    if (br != null) { 
                        br.close();
                    }
                    if (is != null) { 
                        is.close();
                    }
                } catch (IOException ioe) { 
                    ioe.printStackTrace();
                }
                conn.disconnect();
            }
            jsonObject = JSONObject.parseObject(result.toString());
            return jsonObject;
        }
    
    }

用于解密的工具类WxUtils

import org.bouncycastle.jce.provider.BouncyCastleProvider;
    import org.bouncycastle.util.Arrays;
    import org.bouncycastle.util.encoders.Base64;
    
    import javax.crypto.Cipher;
    import javax.crypto.spec.IvParameterSpec;
    import javax.crypto.spec.SecretKeySpec;
    import java.security.Key;
    import java.security.Security;
    
    public class WxUtils { 
    
    
        public static String decryptData(String encryptDataB64, String sessionKeyB64, String ivB64) { 
            return new String(
                    decryptOfDiyIV(
                            Base64.decode(encryptDataB64),
                            Base64.decode(sessionKeyB64),
                            Base64.decode(ivB64)
                    )
            );
        }
    
        private static final String KEY_ALGORITHM = "AES";
        private static final String ALGORITHM_STR = "AES/CBC/PKCS7Padding";
        private static Key key;
        private static Cipher cipher;
    
        private static void init(byte[] keyBytes) { 
            // 如果密钥不足16位，那么就补足. 这个if 中的内容很重要
            int base = 16;
            if (keyBytes.length % base != 0) { 
                int groups = keyBytes.length / base + (keyBytes.length % base != 0 ? 1 : 0);
                byte[] temp = new byte[groups * base];
                Arrays.fill(temp, (byte) 0);
                System.arraycopy(keyBytes, 0, temp, 0, keyBytes.length);
                keyBytes = temp;
            }
            // 初始化
            Security.addProvider(new BouncyCastleProvider());
            // 转化成JAVA的密钥格式
            key = new SecretKeySpec(keyBytes, KEY_ALGORITHM);
            try { 
                // 初始化cipher
                cipher = Cipher.getInstance(ALGORITHM_STR, "BC");
            } catch (Exception e) { 
                e.printStackTrace();
            }
        }
    
        /** * 解密方法 * * @param encryptedData 要解密的字符串 * @param keyBytes 解密密钥 * @param ivs 自定义对称解密算法初始向量 iv * @return 解密后的字节数组 */
        private static byte[] decryptOfDiyIV(byte[] encryptedData, byte[] keyBytes, byte[] ivs) { 
            byte[] encryptedText = null;
            init(keyBytes);
            try { 
                cipher.init(Cipher.DECRYPT_MODE, key, new IvParameterSpec(ivs));
                encryptedText = cipher.doFinal(encryptedData);
            } catch (Exception e) { 
                e.printStackTrace();
            }
            return encryptedText;
        } 
    }

#### 3、后台拦截器 ####

LoginInterceptor.java

@Component
    @Slf4j
    public class LoginInterceptor implements HandlerInterceptor { 
    
        @Autowired
        private Token tokenObj;
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { 
    
            return this.verificationAdminToken(request, response);
        }
    
    
    
        private boolean verificationAdminToken(HttpServletRequest request, HttpServletResponse response)throws Exception{ 
            log.info(new Date() + "进入了登录拦截器");
    
            String requestURI = request.getRequestURI();
            log.info("进入了登录拦截器uri:" + requestURI);
    
    
            String token = request.getHeader(Constant.ACCESS_TOKEN);
    
            if(TextUtils.isEmpty(token)){ 
                response.setHeader("Content-type", "application/json;charset=UTF-8");
                response.setCharacterEncoding("UTF-8");
                response.setStatus(HttpStatus.UNAUTHORIZED.value());
                response.getWriter().write(JSONObject.toJSONString(ResultCode.UNAUTHORIZED));
                return false;
            }
    
            Claims tokenClaim = tokenObj.getTokenClaim(token);
            String subject = tokenClaim.getSubject();
            Map obj = JSONObject.parseObject(subject,Map.class);
            SysUser user = (SysUser)obj.get("user");
            CurSysUser curUser = new CurSysUser();
            curUser.setId(user.getId());
            curUser.setUserName(user.getUserName());
            curUser.setLoginName(user.getLoginName());
            curUser.setCompanyId(user.getCompanyId());
            curUser.setDeptId(user.getDeptId());
    
            if(curUser == null){ 
                response.setHeader("Content-type", "application/json;charset=UTF-8");
                response.setCharacterEncoding("UTF-8");
                response.setStatus(HttpStatus.UNAUTHORIZED.value());
                response.getWriter().write(JSONObject.toJSONString(ResultCode.UNAUTHORIZED));
                return false;
            }
    
            SysUserThread.setUser(curUser);
            RedisUtils.set(token, curUser, Constant.ADMINUSER_TOKEN_EXPIRATION_DATE_S, TimeUnit.SECONDS);
    
            return true;
        }
    }

拦截器的配置类MvcConf.java, 需要对登陆接口 排除token认证

@Configuration
    public class MvcConf extends WebMvcConfigurationSupport { 
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            registry.addInterceptor(new LoginInterceptor())
                    .addPathPatterns("/**")
                    .excludePathPatterns("/**/*swagger*/**")
                    .excludePathPatterns("/train/*swagger*/**")
                    .excludePathPatterns("/swagger.html")
                    .excludePathPatterns("/v2/api-docs")
                    .excludePathPatterns("/oss/encryptParam")
                    .excludePathPatterns("/client/weChatLogin")
            .excludePathPatterns("/client/weChatLoginByPhoneNumber");
    
        }
    
        /** * 发现如果继承了WebMvcConfigurationSupport，则在yml中配置的相关内容会失效。 需要重新指定静态资源 * @param registry */
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) { 
            registry.addResourceHandler("/**").addResourceLocations(
                    "classpath:/static/");
            registry.addResourceHandler("swagger-ui.html").addResourceLocations(
                    "classpath:/META-INF/resources/");
            registry.addResourceHandler("/webjars/**").addResourceLocations(
                    "classpath:/META-INF/resources/webjars/");
            super.addResourceHandlers(registry);
        }
    
    }

用户ThreadLocal 线程类， 在拦截其中我们已经把user信息放入了用户线程 SysUserThread.setUser(curUser);  
这样我们在代码中可以直接通过SysUserThread .getUser 来获取当前登录人的信息

public class SysUserThread { 
    
        private static ThreadLocal<CurSysUser> local = new ThreadLocal<CurSysUser>();
    
        /** * 得到当前登录用户 * * @return user | null */
        public static CurSysUser getUser(){ 
            return SysUserThread.local.get();
        }
    
        /** * 设置登录用户 * * @param user user */
        public static void setUser(CurSysUser user){ 
            SysUserThread.local.set(user);
        }
    
        /** * 清理当前用户 */
        public static void removeUser(){ 
            SysUserThread.local.remove();
        }
    
    }

大概就已经实现了 ，内部用户登陆的一套逻辑。 有不明白的或者可以优化的地方欢迎大家一起讨论  
，如果有帮助 帮忙点个赞吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70]: /images/20221022/64f13b3eb65f452dbe00ac5e0eebaee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 1]: /images/20221022/aa4263adfe1443aa800c26e1136cca2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 2]: /images/20221022/8a2a14e175904f02a45cccd9eea7678f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3Mzc5NzIx_size_16_color_FFFFFF_t_70 3]: /images/20221022/aac9cc775e654e83a0ce77f12a2ba98d.png