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

article/2025/9/19 11:01:20
😊 @ 作者: 一恍过去
💖 @ 主页: https://blog.csdn.net/zhuocailing3390
🎊 @ 社区: Java技术栈交流
🎉 @ 主题: 微信公众号开发—通过网页授权实现业务系统登录及用户绑定(微信网页授权自动登录业务系统)
⏱️ @ 创作时间: 2022年12月19日

目录

  • 1、准备工作
  • 2、登录授权绑定说明
  • 3、登录授权绑定流程
  • 4、基础代码实现
    • 4.1 定义工具类
    • 4.2 模拟前端获取Code
    • 4.3 授权绑定操作接口

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/getCodeString 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_redirecturl = 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获取信息")@ResponseBodypublic 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 {/*** 主键*/@Idprivate 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 = "用户请求微信登录")@ResponseBodypublic 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")@ResponseBodypublic 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 {@Resourceprivate RestHttpRequest restHttpRequest;@Resourceprivate UserInfoMapper userInfoMapper;@Resourceprivate 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("验证码错误!");}// 删除keyRedisUtils.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;}
}

http://chatgpt.dhexx.cn/article/xXDNOKbm.shtml

相关文章

微信网页开发,禁止右上角微信复制分享链接JS

禁止微信右上角分享链接 开发网页时&#xff0c;为了提高网页链接的安全&#xff0c;不想让别人分享链接给别人 一般微信打开网页后&#xff0c;点击右上角是这样的 想要网页不能被复制&#xff0c;不能分享给其他人 效果图&#xff1a; 资源文件下载地址 下载地址 直接贴…

开发微信网页及调试方法

参考资料 Mac中怎么使用Nginx实现80端口转发8080端口 - 大数据 - 亿速云 使用代理映射解决微信页面调试难题 | 梦翼坊 微信开发工具里的域名必须是在微信公众号白名单里的域名,而npm run dev大多是localhost,所以为了方便调试,需要如下步骤 在Charles勾选Proxy-macOS Proxy…

微信网页开发之JS-SDK初使用

最近需要做一个页面&#xff0c;该页面使用微信浏览器打开&#xff0c;功能如下&#xff1a; 1、用户打开链接之后获取到用户的openId&#xff0c;用于支付、获取后台数据等场景 2、自定义分享链接、标题、图标、描述等 3、隐藏微信页面中的某些菜单项列表 阅读本文前需掌握…

微信网页开发--获取微信用户信息

流程 用户扫码或者直接点击链接进入我们的入口页面&#xff1b;进入授权登录页面&#xff0c;用户点击授权登录按钮&#xff1b;微信会自动将我么的网页授权域名后增加参数&#xff1b;根据微信给的code去获取当前登录的微信用户的用户信息。 具体操作过程 1.配置网页授权域名…

微信网页开发(4)--使用JSSDK基础接口

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载 本文目录 1. JSSDK接口2. 基础接口3. 开发流程3.1 绑定域名3.2 引入JS文件3.3 通过config接口注入权限验证配置3.5 调用基础接口 4. 小结 1. JSSDK接口 微信提供了很多JSSDK接口&#xff0c;包括基…

微信网页开发(8)--地理位置接口

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载 本文目录 1. 背景2. 代码3. 测试 1. 背景 微信网页提供了获取当前地理位置经纬度&#xff0c;以及通过内置地图查看当前位置的接口。 官方接口说明如下&#xff1a; // 获取位置 wx.getLocation…

微信公众号开发——2、微信网页开发

第一部分、为公众号菜单嵌入网页 一、关键参考文档 微信JS-SDK说明文档 。 二、编辑模式嵌入网页 在公众号平台下&#xff0c;自定义菜单&#xff0c;添加菜单&#xff0c;并选择菜单内容跳转到指定页面地址即可&#xff08;需认证后方可添加页面地址&#xff0c;个人账号暂不…

微信网页开发配置整理

真是人越大记忆越差&#xff0c;断断续续做了几个微信小程序和微信h5项目&#xff0c;然鹅小程序的开发流程有些都忘了&#xff0c;最近刚做完一个微信h5网页开发的项目&#xff0c;所以赶紧记录下开发中需要注意的点&#xff0c;给自己往后回顾&#xff0c;同时也给第一次接入…

微信网页开发调试的一些方法

1. 微信开发者工具调试 微信开发者工具下载 不过多介绍, 下载安装, 就能开始小程序开发和公众号网页开发. 2. 微信内自带调试 微信内打开网页 http://debugx5.qq.com (仅支持Android微信) 打开下面两项&#xff0c;就可以调试了 3. 使用vConsole插件 1. 下载vConsole插件…

前端对接微信公众号网页开发流程,前期配置

微信公众号网页开发&#xff0c;其实就是我们开发的h5网页需要放到微信浏览器环境中使用&#xff0c;但是需要对接公众号授权&#xff0c;授权之后可以获取到用户的个人信息&#xff0c;以及可以使用公众号提供的一些API,如&#xff1a;图片上传、图片预览、获取位置信息、微信…

微信网页开发(3)--微信网页授权

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载 本文目录 1. 什么是授权2. 两种授权方式3. 网页授权access_token和普通access_token4. 网页授权流程5. 网页授权代码开发5.1 项目搭建5.2 修改配置文件5.3 开发启动类5.4 开发公众号配置类5.5 开发…

微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案

需求场景&#xff1a; 当我们需要使用在微信客户端打开的h5页面&#xff0c;在页面上打开微信小程序或者唤起App时&#xff0c;我们需要使用微信js-sdk提供的开放标签能力。这其中&#xff1a;使用wx-open-launch-weapp标签打开微信小程序&#xff1b;使用wx-open-launch-app跳…

算法分析与设计 二分查找

算法分析与设计 二分查找 二分查找的基本概念 ​ 二分查找是一种在有序数组中查找某一特定元素的查找算法。这种查找方法将查找的时间复杂度从原本的线性时间提升到了对数时间范围&#xff0c;大大缩短了搜索时间。 ​ 二分查找的基本思想是&#xff1a;在查找过程从数组的中…

C语言二分查找

我们常常需要对数据进行查找&#xff0c;修改&#xff0c;查找数据有许多方法&#xff0c;我们先看看最简单的顺序查找 int main() {int i, k 0;scanf("%d", &k);int arr[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };int sz sizeof(arr) / sizeof(arr[0]);for (i…

二分查找【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;二分查找的简单思路&#xff0c;为什么必须在有序的前提下才能使用二分查找&#xff0c;该怎么用C程序来实现二分查找&#xff0c;二分查找的局限性&#x1f440;。 目录&#x1f356; 简单思路前提条件编写程序总结 简单思路&…

二分答案

二分答案 总所周知&#xff0c;二分法查找一个数的时间复杂度为O(log n)&#xff0c;所以在int范围内找一个数最多只需要30余次&#xff0c;在longlong范围内最多也只需要60余次。因此&#xff0c;我们可以利用二分这一优势查找答案。即&#xff0c;每次二分后判断该数是不是满…

初探二分算法

又来算法了~~~~ &#x1f603;&#x1f603;&#x1f606;&#x1f606;&#x1f603;&#x1f603;&#x1f603;&#x1f606;&#x1f606;&#x1f606;&#x1f440;&#x1f440;&#x1f606;&#x1f914; 什么是二分算法&#xff1f; 在计算机科学中&#xff0c;二分…

二分(数学背景,边界问题,二分查找,二分答案)

二分法的数学背景 目的 关于二分法的目的&#xff0c;这里引用同济大学数学系出版的《高等数学》第七版上册中关于二分法的相关内容。&#xff08;文段内容多&#xff0c;要有一点耐心~&#xff09; 在科学技术问题中&#xff0c;经常会遇到 求解高次代数方程或其他类型的方程的…

二分模板介绍

以一个典型例题来介绍二分法的两个通用模板&#xff0c;熟练掌握这两个模板可以解决绝大部分二分的问题。 例题&#xff1a;ACWing 789.数的范围 给定一个按照升序排列的长度为n的整数数组&#xff0c;以及q个查询。 对于每个查询&#xff0c;返回一个元素k的起始位置和终止…

二分算法详细解析

二分 有单调性一定可以二分&#xff0c;可以二分不一定有单调性二分的本质是边界不是单调性(单调一定可以二分&#xff0c;不单调的有的也可以二分) 本质&#xff1a;在一个区间上&#xff0c;找到某种性质&#xff0c;每次可以将区间一分为二&#xff08;存在边界&#xff09;…