微信公众号开发—通过网页授权实现业务系统登录及用户绑定(微信网页授权自动登录业务系统)

最新推荐文章于 2023-12-09 21:30:00 发布

一恍过去

最新推荐文章于 2023-12-09 21:30:00 发布

阅读量1.9w

点赞数 1

分类专栏：微信公众号开发开发技巧文章标签：微信微信网页授权

本文链接：https://blog.csdn.net/zhuocailing3390/article/details/128363342

版权

开发技巧同时被 2 个专栏收录

115 篇文章 35 订阅

订阅专栏

微信公众号开发

6 篇文章 4 订阅

订阅专栏

😊 @ 作者：一恍过去

💖 @ 主页： https://blog.csdn.net/zhuocailing3390

🎊 @ 社区： Java技术栈交流

🎉 @ 主题：微信公众号开发—通过网页授权实现业务系统登录及用户绑定(微信网页授权自动登录业务系统)

⏱️ @ 创作时间： 2022年12月19日

1、准备工作

1、在本地进行联调时，为让微信端能够访问到本地服务，需要进行内网穿透，参考《本地服务器内网穿透实现（NATAPP）》
2、配置网页授权获取用户基本信息，用于告诉微信发起授权的后端服务器地址

正式公众号：在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”进行配置操作；
测试沙箱环境：在测试环境中，进行配置网页授权

2、登录授权绑定说明

业务系统在外部浏览器默认情况通过手机号进行登录；在微信环境中，除了可以使用手机号登录外，也可以使用微信授权实现业务系统的登录；为了实现微信网页授权登录业务系统与手机号登录业务系统是统一的用户，需要在第一次使用微信授权登录时进行绑定操作。为了简单的记录是否存在绑定关系，此Demo为了简便演示操作，在后台数据库中通过表中的openId是否存在已表示是否存在绑定，表结构如下：

CREATE TABLE `tb_user_info` (
  `id` bigint NOT NULL COMMENT '主键',
  `mobile` varchar(12) DEFAULT NULL COMMENT '手机号',
  `opend_id` varchar(100) DEFAULT NULL COMMENT '公众号openId',
  `gender` int DEFAULT NULL COMMENT '性别',
  `nick_name` varchar(32) DEFAULT NULL COMMENT '昵称',
  `head_image` varchar(256) DEFAULT NULL COMMENT '头像链接',
  PRIMARY KEY (`id`)
)

3、登录授权绑定流程

用户点击微信登录
- 前端请求微信网页授权接口，询问用户是否同意授权；
- 用户同意授权后，通过获取code；
- 前端通过code调用后端wxLogin接口获取openId等微信用户信息；
- 判断openId是否存在绑定关系(是否在数据表中)
  - 存在绑定关系，表示可以直接登录，返回用户信息及登录验证的token信息；
  - 不存在绑定关系，则判断前端调用wxLogin接口时，用户是否已经登录(token是否存在或有效)，如果已登录则直接绑定openId并且返回绑定成功标识；如果没有登录，将通过openId获取的微信信息存入redis中，将redisKey返回到前端；
前端检测是否存在redisKey(是否引导授权绑定)
- 不存在redisKey，并且授权绑定成功，直接渲染当前用户信息；
- 存在redisKey，进入授权绑定页面，引导用户输入手机号及验证码；
  - 前端将用户手机号、验证码、redisKey传入后端；
  - 后端判断redisKey是否过期(默认1小时过期)，如果过期则要求用户重新点击微信登录;
  - 验证手机号及验证码是否正确，如果存在则要求用户重新填写；
  - 如果redisKey、手机号、验证码都正确，则判断该手机号是否存在于业务系统中；
  - 如果手机号存在于系统中，并且已经绑定了openId，则提示用户无法绑定；如果存在于系统中，但是没有绑定openId，则更新数据库，实现openId绑定；
  - 如果手机号不存在于系统中，则将手机号、openId、redisKey中的基本信息插入到数据库中，实现用户的注册已经openId绑定；

基础流程图：
在这里插入图片描述

4、基础代码实现

注意：Demo只实现，用户发起微信登录接口、授权绑定接口两个接口；获取验证码、验证码校验等流程只做伪代码描述，当前Demo没有做前端代码，由后端来模拟网页授权及授权回调后，获取code的接口；

4.1 定义工具类

MapUtils：

public class MapUtils {

    /**
     * Map转换为 Entity
     *
     * @param params 包含参数的Map
     * @param t      需要赋值的实体
     * @param <T>    类型
     */
    public static <T> T mapToEntity(Map<String, Object> params, T t) {
        if (null == params) {
            return t;
        }
        Class<?> clazz = t.getClass();
        Field[] declaredFields = clazz.getDeclaredFields();
        try {
            for (Field declaredField : declaredFields) {
                declaredField.setAccessible(true);
                String name = declaredField.getName();
                if (null != params.get(name)) {
                    declaredField.set(t, params.get(name));
                }
            }
        } catch (Exception e) {
            throw new RuntimeException("属性设置失败！");
        }
        return t;
    }

    /**
     * 将对象转换为HashMap
     *
     * @param t   转换为Map的对象
     * @param <T> 转换为Map的类
     * @return Map
     */
    public static <T> Map<String, Object> entityToMap(T t) {
        Class<?> clazz = t.getClass();
        List<Field> allField = getAllField(clazz);
        Map<String, Object> hashMap = new LinkedHashMap<>(allField.size());
        try {
            for (Field declaredField : allField) {
                declaredField.setAccessible(true);
                Object o = declaredField.get(t);
                if (null != o) {
                    hashMap.put(declaredField.getName(), o);
                }
            }
        } catch (Exception e) {
            throw new RuntimeException("属性获取失败！");
        }
        return hashMap;
    }

    /**
     * 获取所有属性
     *
     * @param clazz class
     * @param <T>   泛型
     * @return List<Field>
     */
    public static <T> List<Field> getAllField(Class<T> clazz) {
        List<Field> fields = new ArrayList<>();
        Class<?> superClazz = clazz;
        while (null != superClazz) {
            fields.addAll(Arrays.asList(superClazz.getDeclaredFields()));
            superClazz = superClazz.getSuperclass();
        }
        return fields;
    }

    /**
     * 将Map参数转换为字符串
     *
     * @param map
     * @return
     */
    public static String mapToString(Map<String, Object> map) {
        StringBuffer sb = new StringBuffer();
        map.forEach((key, value) -> {
            sb.append(key).append("=").append(value.toString()).append("&");
        });
        String str = sb.toString();
        str = str.substring(0, str.length() - 1);
        return str;
    }

    /**
     * 将Bean对象转换Url请求的字符串
     *
     * @param t
     * @param <T>
     * @return
     */
    public static <T> String getUrlByBean(T t) {
        String pre = "?";
        Map<String, Object> map = entityToMap(t);
        return pre + mapToString(map);
    }

}

4.2 模拟前端获取Code

定义请求实体类 Oauth2AuthorizeRep：

@Data
public class Oauth2AuthorizeRep {
    /**
     * 公众号的唯一标识
     */
    private String appid;

    /**
     * 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
     */
    private String redirect_uri;

    /**
     * 返回类型，请填写code
     */
    private String response_type = "code";

    /**
     * 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）
     * snsapi_userinfo （弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
     */
    private String scope;

    /**
     * 重定向后会带上 state 参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
     */
    private String state;
}

定义代码：

@Slf4j
@Controller
public class AuthController {

    /**
     * 模拟前端发起微信网页授权，再用户点击"微信登录"时，进行调用
     *
     * @return
     * @throws UnsupportedEncodingException
     */
    @GetMapping(value = "/pullCode")
    @ApiOperation(value = "用户请求进行授权及获取信息", notes = "用户请求进行授权及获取信息")
    public String code() throws UnsupportedEncodingException {
        log.info("------ 用户请求进行授权及获取信息 ------");

        // 设置回调地址 http://qh3wg7.natappfree.cc/wechat/getCode
        String redirectUri = "http://qh3wg7.natappfree.cc/wechat/getCode";
        // urlEncode处理
        redirectUri = URLEncoder.encode(redirectUri, "utf-8");

        String url = "https://open.weixin.qq.com/connect/oauth2/authorize";
        // 封装url请求参数
        Oauth2AuthorizeRep rep = new Oauth2AuthorizeRep();
        rep.setAppid("wx79ec4331f29311b9");
        rep.setRedirect_uri(redirectUri);
        rep.setScope("snsapi_userinfo");
        rep.setState("STATE");
        // 参数的顺序必须是：appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
        url = url + MapUtils.getUrlByBean(rep) + "#wechat_redirect";

        // 重定向url，微信会自动访问redirectUri，进行回调
        return "redirect:" + url;
    }

    /**
     * 模拟前端接收微信网页授权后回调，并且获取code；
     * 获取code后，由前端将code传入到后端的wxLogin接口中
     *
     * @param code
     */
    @GetMapping(value = "/getCode")
    @ApiOperation(value = "前端根据code获取信息", notes = "前端根据code获取信息")
    @ResponseBody
    public void auth(@RequestParam(value = "code") String code) {
        log.info("------ 回显Code：{} ------", code);
    }
}

4.3 授权绑定操作接口

定义获取用户信息请求实体类 Oauth2UserInfoRep：

@Data
public class Oauth2UserInfoRep {
    /**
     * 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
     */
    private String access_token;

    /**
     * 用户的唯一标识
     */
    private String openid;

    /**
     * 返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语
     */
    private String lang = "zh_CN";

}

定义获取用户信息响应实体类 Oauth2UserInfoRes：

@Data
public class Oauth2UserInfoRes {
    /**
     * 用户昵称
     */
    private String nickname;

    /**
     * 用户的唯一标识
     */
    private String openid;

    /**
     * 用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
     */
    private Integer sex;

    /**
     * 用户个人资料填写的省份
     */
    private String province;

    /**
     * 普通用户个人资料填写的城市
     */
    private String city;

    /**
     * 国家，如中国为CN
     */
    private String country;

    /**
     * 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），
     * 用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效。
     */
    private String headimgurl;

    /**
     * 用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
     */
    private List<String> privilege;

    /**
     * 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。
     */
    private String unionid;
}

定义用户基本信息表实现类：

@Table(name = "tb_user_info")
@Data
public class UserInfo implements Serializable {
    /**
     * 主键
     */
    @Id
    private Long id;

    /**
     * 登录手机号
     */
    private String mobile;

    /**
     * 微信公众号号，唯一ID
     */
    @Column(name = "openId")
    private String openId;

    /**
     * 性别
     */
    private Integer gender;

    /**
     * 昵称
     */
    @Column(name = "nickName")
    private String nickName;

    /**
     * 头像
     */
    @Column(name = "headImage")
    private String headImage;
}

Controller实现：

    /**
     * 用户请求微信登录（由前端获取到）
     *
     * @return
     * @throws UnsupportedEncodingException
     */
    @GetMapping(value = "/wxLogin")
    @ApiOperation(value = "用户请求微信登录", notes = "用户请求微信登录")
    @ResponseBody
    public PageResult wxLogin(@RequestParam(value = "code") String code) {
        return authService.wxLogin(code);
    }


    /**
     * 绑定微信openId
     *
     * @param mobile
     * @param smsCode
     * @param redisKey
     * @return
     */
    @GetMapping(value = "/wxBind")
    @ApiOperation(value = "绑定微信openId", notes = "绑定微信openId")
    @ResponseBody
    public PageResult wxBind(@RequestParam("mobile") String mobile, @RequestParam("smsCode") String smsCode, @RequestParam("redisKey") String redisKey) {
        log.info("------ 绑定微信openId ------");
        //通过code获取用户及天气实时位置等信息
        return authService.wxBind(mobile, smsCode, redisKey);
    }

Service实现：


@Slf4j
@Service
public class AuthService {

    @Resource
    private RestHttpRequest restHttpRequest;

    @Resource
    private UserInfoMapper userInfoMapper;

    @Resource
    private WxBean wxBean;

    public PageResult wxLogin(@RequestParam(value = "code") String code) {
        String appId = wxBean.getAppid();
        String secret = wxBean.getSecret();
        String url = wxBean.getApiUrl() + InterfaceConstant.OAUTH2_ACCESS_TOKEN;
        // 封装url请求参数
        Oauth2AccessTokenRep rep = new Oauth2AccessTokenRep();
        rep.setAppid(appId);
        rep.setSecret(secret);
        // 注意一个code只能使用一次，使用后需要重新模拟前端获取
        rep.setCode(code);
        url = url + MapUtils.getUrlByBean(rep);
        Map map = restHttpRequest.doHttp(url, HttpMethod.GET, null);
        if (map == null || map.get("errcode") != null) {
            throw new RuntimeException("获取授权信息失败！");
        }
        Oauth2AccessTokenRes res = new Oauth2AccessTokenRes();
        MapUtils.mapToEntity(map, res);
        log.info("Oauth2AccessTokenRes：" + JSON.toJSONString(res));

        // 获取accessToken及openId过期时间
        String accessToken = res.getAccess_token();
        String openid = res.getOpenid();

        // 判断openId是否存在绑定关系
        UserInfo userInfo = userInfoMapper.selectByOpenId(openid);
        if (userInfo != null) {
            // 存在绑定关系，表示可以直接登录，返回用户信息及登录验证的token信息
            return ResultUtils.success(userInfo);
        }

        // 判断当前用户是否已经登录了,模拟登录，当System.currentTimeMillis()偶数表示已经登录
        if (System.currentTimeMillis() % 2 == 0) {
            // 如果已登录则直接绑定openId并且返回绑定成功标识
            userInfo = new UserInfo();
            // TODO 如果已经登录了，业务系统直接根据token获取用户Id值
            userInfo.setId(1L);
            userInfo.setOpenId(openid);
            userInfoMapper.updateByPrimaryKeySelective(userInfo);

            return ResultUtils.success(null);
        } else {
            // 如果没有登录，将通过openId获取的微信信息存入redis中，将redisKey返回到前端
            String redisKey = UUIDUtils.getUuId();
            Oauth2UserInfoRes oauth2UserInfoRes = getAndInsertUserInfo(openid, accessToken);
            RedisUtils.setEx(redisKey, JSON.toJSONString(oauth2UserInfoRes), 60L, TimeUnit.MINUTES);

            return ResultUtils.success(redisKey);
        }
    }

    /**
     * 绑定微信openId
     *
     * @param mobile
     * @param smsCode
     * @param redisKey
     * @return
     */
    public PageResult wxBind(@RequestParam("mobile") String mobile, @RequestParam("smsCode") String smsCode, @RequestParam("redisKey") String redisKey) {

        if (!RedisUtils.hasKey(redisKey)) {
            return ResultUtils.fail("长时间未操作，请重新授权登录！");
        }
        Object o = RedisUtils.get(redisKey);
        Oauth2UserInfoRes oauth2UserInfoRes = JSON.parseObject(o.toString(), Oauth2UserInfoRes.class);

        // 验证手机号及验证码是否正确，如果System.currentTimeMillis()为偶数则表示不正确
        if (System.currentTimeMillis() % 2 == 0) {
            return ResultUtils.fail("验证码错误！");
        }

        // 删除key
        RedisUtils.del(redisKey);

        // 通过手机号查询
        UserInfo userInfo = userInfoMapper.selectByMobile(mobile);

        // 如果手机号不存在于系统中，则将手机号、openId、redisKey中的基本信息插入到数据库中，实现用户的注册已经openId绑定；
        if (userInfo == null) {
            userInfo = new UserInfo();
            userInfo.setId(System.currentTimeMillis());
            userInfo.setGender(oauth2UserInfoRes.getSex());
            userInfo.setMobile(mobile);
            userInfo.setNickName(oauth2UserInfoRes.getNickname());
            userInfo.setOpenId(oauth2UserInfoRes.getOpenid());
            userInfo.setHeadImage(oauth2UserInfoRes.getHeadimgurl());
            userInfoMapper.insert(userInfo);
            // 返回成功
            return ResultUtils.success(userInfo);
        }

        if (userInfo.getOpenId() != null) {
            return ResultUtils.fail("手机号已绑定其他微信号，无法再次绑定！");
        } else {
            // 进行绑定操作
            userInfo.setOpenId(oauth2UserInfoRes.getOpenid());
            userInfoMapper.updateByPrimaryKeySelective(userInfo);
            return ResultUtils.success(userInfo);
        }
    }

    private Oauth2UserInfoRes getAndInsertUserInfo(String openid, String accessToken) {
        // 获取用户信息
        String url = wxBean.getApiUrl() + InterfaceConstant.OAUTH2_USERINFO;
        Oauth2UserInfoRep rep = new Oauth2UserInfoRep();
        rep.setAccess_token(accessToken);
        rep.setOpenid(openid);
        url = url + MapUtils.getUrlByBean(rep);
        Map userMap = restHttpRequest.doHttp(url, HttpMethod.GET, null);
        Oauth2UserInfoRes res = new Oauth2UserInfoRes();
        MapUtils.mapToEntity(userMap, res);
        // 打印信息
        log.info("UserInfo：" + JSON.toJSONString(res));
        return res;
    }
}