三步实现微信小程序登录

三步实现微信小程序登录

一、登录流程:

上面这个是微信官方给出的。在通过 wx.login() 获取到用户登录态之后,需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识,而应该自己派发一个 session 登录状态。详见下面的流程图:

1.前端调用wx.login()获取code值(developers.weixin.qq.com/miniprogram... 2.前端通过调用wx.getUserInfo获取iv、rawData、signature、encryptedData等加密数据,传递给后端(developers.weixin.qq.com/miniprogram...; 3.服务器通过code请求api换回session_key和openid; 4.服务器通过前端给的rawData 加获取的session_key使用sha1加密,计算出signature1; 5.比对前端传的signature和自己算出来的signature1是否一致(防止数据不一致); 6.用AES算法解密encryptedData里的敏感数据; 7.拿着敏感数据后做自己的逻辑; 8.通知前端登陆成功;

二、首先调用wx.login获取 临时登录凭证 code

ini 复制代码
wx.login({
  success: res => {
    // 获取到用户的 code:res.code
    const code = res.code;
    console.log("用户的code:" + res.code);
    //传入code调用服务端接口登录
    return api.userLogin.registerOrLogin({ code });
  }
})

Taro 框架 是一个开放式跨端跨框架解决方案(关于taro相关文档可以参考:taro-docs.jd.com/docs/),支持使用 React/Vue/Nerv 等框架来开发应用。taro基本上做到了将微信小程序上的api都封装了,同时也紧随着小程序的更新。这个地方也可以用taro来调用:

javascript 复制代码
const requestLogin = async () => {
  const { code } = await Taro.login();
  console.log("requestLogin code", code);
  return api.userLogin.registerOrLogin({ code });
};

三、服务端后台根据code获取openId、session_key和unionId:

less 复制代码
@PostMapping("/user-login/action/registerOrLogin")
public Response<LoginVO> registerOrLogin(@RequestBody UserLoginDTO userLoginDTO) {
  return ResponseUtils.returnObjectSuccess(userLoginService.registerOrLoginByInfo(userLoginDTO));
}
less 复制代码
public LoginVO registerOrLoginByInfo(UserLoginDTO userLoginDTO) {
    UserAccount userAccount = new UserAccount();
    result = authorizationGrantApi.wxMiniGrant(dto.getCode());
    if (result != null) {
        if (StringUtils.hasText(result.getOpenId())) {
            userAccount.setOpenId(result.getOpenId());
        }
        if (StringUtils.hasText(result.getUnionId())) {
            userAccount.setUnionId(result.getUnionId());
        }
    }
    
    if (StringUtils.hasText(dto.getEncryptedData()) && StringUtils.hasText(dto.getIv())) {
    ObjectNode userNode = weChatMiniGrantApi.decryptUser(dto.getEncryptedData(), result.getAuthorId(), dto.getIv());
    //基本信息
    if (userNode.get("openId") != null) {
        userAccount.setOpenId(userNode.get("openId").textValue());
        userAccount.setGender(userNode.get("gender").intValue());
        userAccount.setNickName(userNode.get("nickName").textValue());
        userAccount.setAvatar(userNode.get("avatarUrl").textValue());
        if (userNode.get("unionId") != null) {
            userAccount.setUnionId(userNode.get("unionId").textValue());
        }
    } else {
        userAccount.setUserPhone(userNode.get("phoneNumber").textValue());
    }
    
    LoginVO vo = new LoginVO();
    vo.setUserAccount(userAccount);
    ..........
    return vo;
}

其中的authorizationGrantApi.wxMiniGrant(dto.getCode())实现了根据code获取openId和unionId:

csharp 复制代码
/**
 * 微信小程序授权
 *
 * @param header
 * @param authCode
 * @return
 */
public AuthorizerGrantResult wxMiniGrant(YryzRequestHeader header, String authCode) {
    return this.wxMiniGrantAndDecryUser(header, authCode, null, null);
}

public AuthorizerGrantResult wxMiniGrantAndDecryUser(String authCode, String encryptedData, String iv) {
    if (weChatMiniGrantApi == null) {
        throw new BusinessException("", "暂未开放微信小程序授权");
    }

    //根据code,调用code2Session得到openid, session_key和unionId
    JsonNode respNode = weChatMiniGrantApi.miniGrant(authCode);

    /**
     * 转换基本参数
     */
    AuthorizerGrantResult base = new AuthorizerGrantResult();
    base.setOpenId(respNode.get("openid").textValue());
    if(respNode.get("unionid") != null){
        base.setUnionId(respNode.get("unionid").textValue());
    }
    base.setChannelId(IAuthorizerGrantHook.WX_MINI);

    /**
     * 解密用户信息数据
     */
    if (StringUtils.hasText(encryptedData) && StringUtils.hasText(iv)) {
        ObjectNode userNode = weChatMiniGrantApi.decryptUser(encryptedData, respNode.get("session_key").textValue(), iv);
        //基本信息
        AuthorizerGrantResult.ChannelAuthor channelAuthor = new AuthorizerGrantResult.ChannelAuthor(userNode);
        channelAuthor.setAvatar(userNode.get("avatarUrl").textValue());
        channelAuthor.setGender(userNode.get("gender").intValue());
        channelAuthor.setNickName(userNode.get("nickName").textValue());
        channelAuthor.setPhone(userNode.get("phoneNumber").textValue());
        base.setChannelAuthor(channelAuthor);
    }
    return authorizerGrantHook.successAfter(header, IAuthorizerGrantHook.WX_MINI, base, respNode);
}

上面代码中的wxMiniGrantAndDecryUser首先根据传入的code调用调用code2Session得到openid, session_key和unionId,然后从encryptedData和iv数据解密得到用户数据信息。解密用户数据信息是调用的decryptUser函数,其实现代码如下:

四、解密encryptedData数据得到用户信息:

ini 复制代码
public ObjectNode decryptUser(String encryptedData, String sessionKey, String iv) {
    // 被加密的数据
    byte[] dataByte = Base64Utils.decodeFromString(encryptedData);
    // 加密秘钥
    byte[] keyByte = Base64Utils.decodeFromString(sessionKey);
    // 偏移量
    byte[] ivByte = Base64Utils.decodeFromString(iv);
    try {
        // 如果密钥不足16位,那么就补足. 这个if 中的内容很重要
        int base = 16;
        if (keyByte.length % base != 0) {
            int groups = keyByte.length / base + 1;
            byte[] temp = new byte[groups * base];
            Arrays.fill(temp, (byte) 0);
            System.arraycopy(keyByte, 0, temp, 0, keyByte.length);
            keyByte = temp;
        }

        // 初始化
        Security.addProvider(new BouncyCastleProvider());
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding", "BC");
        SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
        AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
        parameters.init(new IvParameterSpec(ivByte));
        cipher.init(Cipher.DECRYPT_MODE, spec, parameters);// 初始化
        byte[] resultByte = cipher.doFinal(dataByte);

        return objectMapper.readValue(new String(resultByte, StandardCharsets.UTF_8), ObjectNode.class);
    } catch (Exception e) {
        logger.error("用户信息解密失败:{}", e.getMessage());
    }
}
相关推荐
小雨cc5566ru9 小时前
hbuilderx+uniapp+Android健身房管理系统 微信小程序z488g
android·微信小程序·uni-app
小雨cc5566ru10 小时前
微信小程序hbuilderx+uniapp+Android 新农村综合风貌旅游展示平台
android·微信小程序·uni-app
Stanford_110615 小时前
C++入门基础知识99——【关于C++ 成员运算符】
开发语言·c++·微信小程序·twitter·微信开放平台
正小安1 天前
MobX-Miniprogram:微信小程序的状态管理利器
微信小程序·小程序
GDAL1 天前
软考鸭微信小程序:助力软考备考的便捷工具
微信小程序·小程序
2401_844137951 天前
JAVA智慧社区系统跑腿家政本地生活商城系统小程序源码
微信·微信小程序·小程序·生活·微信公众平台·微信开放平台
45°仰望星空1 天前
ASP.Net Core 获取微信小程序 OpenId 验证
后端·微信小程序·asp.net
等你许久_孟然1 天前
【小程序】小tips:微信小程序登录后返回登录前的页面继续操作(保留参数)
微信小程序·小程序
正小安1 天前
用户登录与信息管理:实现小程序登录与用户信息存储
前端·微信小程序·小程序
YMZN912 天前
基于SSM+微信小程序的校园二手数码交易平台系统(二手3)(源码+sql脚本+视频导入教程+文档)
sql·微信小程序·小程序